Onboarding Progress Indicator

This commit is contained in:
adam 2021-10-15 08:46:21 -05:00
parent c641784a95
commit e1439ba363
4 changed files with 141 additions and 0 deletions

View File

@ -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 */,

View File

@ -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
}
}

View File

@ -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")

View File

@ -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()
}
}