Onboarding Progress Indicator
This commit is contained in:
parent
c641784a95
commit
e1439ba363
|
@ -57,6 +57,7 @@
|
|||
6654C73E2715A41300901167 /* OnboardingStore.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6654C73D2715A41300901167 /* OnboardingStore.swift */; };
|
||||
6654C7412715A47300901167 /* Onboarding.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6654C7402715A47300901167 /* Onboarding.swift */; };
|
||||
6654C7442715A4AC00901167 /* OnboardingStoreTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6654C7432715A4AC00901167 /* OnboardingStoreTests.swift */; };
|
||||
66A0807B271993C500118B79 /* OnboardingProgressIndicator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 66A0807A271993C500118B79 /* OnboardingProgressIndicator.swift */; };
|
||||
/* End PBXBuildFile section */
|
||||
|
||||
/* Begin PBXContainerItemProxy section */
|
||||
|
@ -132,6 +133,7 @@
|
|||
6654C73D2715A41300901167 /* OnboardingStore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingStore.swift; sourceTree = "<group>"; };
|
||||
6654C7402715A47300901167 /* Onboarding.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Onboarding.swift; sourceTree = "<group>"; };
|
||||
6654C7432715A4AC00901167 /* OnboardingStoreTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingStoreTests.swift; sourceTree = "<group>"; };
|
||||
66A0807A271993C500118B79 /* OnboardingProgressIndicator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingProgressIndicator.swift; sourceTree = "<group>"; };
|
||||
/* End PBXFileReference section */
|
||||
|
||||
/* Begin PBXFrameworksBuildPhase section */
|
||||
|
@ -388,6 +390,7 @@
|
|||
isa = PBXGroup;
|
||||
children = (
|
||||
0DA13C9226C15E2F00E3B610 /* PlainButton.swift */,
|
||||
66A0807A271993C500118B79 /* OnboardingProgressIndicator.swift */,
|
||||
);
|
||||
path = "UI Components";
|
||||
sourceTree = "<group>";
|
||||
|
@ -681,6 +684,7 @@
|
|||
0D864A0F26E1583000A61879 /* LoadingScreenViewModel.swift in Sources */,
|
||||
0DA13CA126C1955600E3B610 /* HomeScreen.swift in Sources */,
|
||||
0DA13C9026C15D1D00E3B610 /* WelcomeScreenViewModel.swift in Sources */,
|
||||
66A0807B271993C500118B79 /* OnboardingProgressIndicator.swift in Sources */,
|
||||
0DA13C8F26C15D1D00E3B610 /* WelcomeScreen.swift in Sources */,
|
||||
0DA13C9326C15E2F00E3B610 /* PlainButton.swift in Sources */,
|
||||
0D32282826C586E000262533 /* RequestZcashScreen.swift in Sources */,
|
||||
|
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"colors" : [
|
||||
{
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0xA0",
|
||||
"green" : "0x81",
|
||||
"red" : "0x6E"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
},
|
||||
{
|
||||
"appearances" : [
|
||||
{
|
||||
"appearance" : "luminosity",
|
||||
"value" : "dark"
|
||||
}
|
||||
],
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0xA0",
|
||||
"green" : "0x81",
|
||||
"red" : "0x6E"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
|
@ -48,6 +48,7 @@ internal enum Asset {
|
|||
internal enum ProgressIndicator {
|
||||
internal static let gradientLeft = ColorAsset(name: "GradientLeft")
|
||||
internal static let gradientRight = ColorAsset(name: "GradientRight")
|
||||
internal static let negativeSpace = ColorAsset(name: "NegativeSpace")
|
||||
}
|
||||
internal enum Text {
|
||||
internal static let button = ColorAsset(name: "Button")
|
||||
|
|
|
@ -0,0 +1,98 @@
|
|||
//
|
||||
// OnboardingProgressIndicator.swift
|
||||
// secant-testnet
|
||||
//
|
||||
// Created by Adam Stener on 10/15/21.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct OnboardingProgressStyle: ProgressViewStyle {
|
||||
let height: CGFloat = 3
|
||||
let animation: Animation = .easeInOut
|
||||
let gradient = LinearGradient(
|
||||
colors: [
|
||||
Asset.Colors.ProgressIndicator.gradientLeft.color,
|
||||
Asset.Colors.ProgressIndicator.gradientRight.color
|
||||
],
|
||||
startPoint: UnitPoint(x: 0.00, y: 0.00),
|
||||
endPoint: UnitPoint(x: 1.00, y: 0.00)
|
||||
)
|
||||
|
||||
func makeBody(configuration: Configuration) -> some View {
|
||||
let fractionCompleted = configuration.fractionCompleted ?? 0
|
||||
|
||||
return VStack {
|
||||
HStack {
|
||||
configuration.label
|
||||
.foregroundColor(Asset.Colors.ProgressIndicator.negativeSpace.color)
|
||||
|
||||
Spacer()
|
||||
}
|
||||
|
||||
ZStack {
|
||||
GeometryReader { proxy in
|
||||
let currentWidth = proxy.size.width
|
||||
let progressMaxWidth = currentWidth * CGFloat(fractionCompleted)
|
||||
let trailingMaxWidth = currentWidth - (currentWidth * CGFloat(fractionCompleted))
|
||||
|
||||
HStack(spacing: 15) {
|
||||
if fractionCompleted > 0 {
|
||||
Capsule()
|
||||
.fill(gradient)
|
||||
.frame(maxWidth: progressMaxWidth)
|
||||
}
|
||||
|
||||
if fractionCompleted < 1 {
|
||||
Capsule()
|
||||
.fill(Asset.Colors.ProgressIndicator.negativeSpace.color)
|
||||
.frame(maxWidth: trailingMaxWidth)
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame(height: height)
|
||||
.animation(animation)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - ProgressView : onboardingProgressStyle
|
||||
|
||||
extension ProgressView {
|
||||
var onboardingProgressStyle: some View {
|
||||
progressViewStyle(OnboardingProgressStyle())
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Interactive ProgressStyle View
|
||||
|
||||
struct OnboardingProgressViewPreviewHelper: View {
|
||||
@State private var value: CGFloat = 0.0
|
||||
|
||||
var progressString: String {
|
||||
String(format: "%02d", value)
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 50) {
|
||||
ProgressView(
|
||||
"\(Int(value))",
|
||||
value: value,
|
||||
total: 100
|
||||
)
|
||||
.onboardingProgressStyle
|
||||
|
||||
Slider(value: $value, in: 0...100, step: 1)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Previews
|
||||
|
||||
struct OnboardingProgressIndicator_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
OnboardingProgressViewPreviewHelper()
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue