From 9ca33c44328d82fa8c7a4fd0dbc4c525fefafd74 Mon Sep 17 00:00:00 2001 From: Felix Mau Date: Wed, 9 Mar 2022 21:48:03 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20::=20Adapt=20example=20application?= =?UTF-8?q?=20to=20show=20SwiftUI=20variant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Example/Example/Scenes/EntryPointView.swift | 8 +- .../SwiftUIExample/SwiftUIExampleView.swift | 170 +++++++++++++++++- 2 files changed, 173 insertions(+), 5 deletions(-) diff --git a/Example/Example/Scenes/EntryPointView.swift b/Example/Example/Scenes/EntryPointView.swift index 2559e74..700bb13 100644 --- a/Example/Example/Scenes/EntryPointView.swift +++ b/Example/Example/Scenes/EntryPointView.swift @@ -19,7 +19,7 @@ struct EntryPointView: View { var body: some View { NavigationView { List { - Section(header: Text("Example Application")) { + Section(header: Text("UIKit Examples")) { NavigationLink(destination: BasicExampleView()) { TitleSubtitleView(title: "🏡 Basic Example", subtitle: "Basic usage and setup.") @@ -50,10 +50,12 @@ struct EntryPointView: View { .contentShape(Rectangle()) } .buttonStyle(PlainButtonStyle()) + } + Section(header: Text("SwiftUI Examples")) { NavigationLink(destination: SwiftUIExampleView()) { - TitleSubtitleView(title: "🪄 SwiftUI Example", - subtitle: "How to use in a SwiftUI context.") + TitleSubtitleView(title: "🎨 GradientLoadingBarView Example", + subtitle: "How to use the SwiftUI view.") } } } diff --git a/Example/Example/Scenes/SwiftUIExample/SwiftUIExampleView.swift b/Example/Example/Scenes/SwiftUIExample/SwiftUIExampleView.swift index bae9062..244f8bf 100644 --- a/Example/Example/Scenes/SwiftUIExample/SwiftUIExampleView.swift +++ b/Example/Example/Scenes/SwiftUIExample/SwiftUIExampleView.swift @@ -7,14 +7,180 @@ // import SwiftUI +import GradientLoadingBar struct SwiftUIExampleView: View { + // MARK: - Render + var body: some View { - Text("Coming soon!") - .navigationTitle("🎨 SwiftUI Example") + List { + // + Section(header: Spacer()) { + DefaultExampleView() + } + + Section { + CustomColorsExampleView() + } + + Section { + CustomProgressDurationExampleView() + } + } + .navigationTitle("🎨 SwiftUI Example") } } +// MARK: - Subviews + +private struct TitleSubtitleView: View { + let title: String + let subtitle: String + + var body: some View { + VStack(alignment: .leading, spacing: 8) { + Text(title) + .font(.headline) + Text(subtitle) + .font(.subheadline) + } + .frame(maxWidth: .infinity, alignment: .leading) + } +} + +private struct DefaultExampleView: View { + @State + private var isVisible = false + + var body: some View { + VStack(spacing: 16) { + TitleSubtitleView(title: "Default example", + subtitle: "Example using the default configuration.") + + GradientLoadingBarView() + .frame(maxWidth: .infinity, maxHeight: 3) + .cornerRadius(1.5) + .opacity(isVisible ? 1 : 0) + + HStack(spacing: 16) { + Button("Show") { + withAnimation(.easeInOut) { + isVisible = true + } + } + .buttonStyle(RoundedRectangleButtonStyle()) + + Button("Hide") { + withAnimation(.easeInOut) { + isVisible = false + } + } + .buttonStyle(RoundedRectangleButtonStyle()) + } + } + .padding(.horizontal, 8) + .padding(.vertical, 16) + } +} + +private struct CustomColorsExampleView: View { + private enum Config { + /// The custom gradient colors we use. + /// Source: https://color.adobe.com/Pink-Flamingo-color-theme-10343714/ + static let gradientColors = [ + #colorLiteral(red: 0.9490196078, green: 0.3215686275, blue: 0.431372549, alpha: 1), #colorLiteral(red: 0.9450980392, green: 0.4784313725, blue: 0.5921568627, alpha: 1), #colorLiteral(red: 0.9529411765, green: 0.737254902, blue: 0.7843137255, alpha: 1), #colorLiteral(red: 0.4274509804, green: 0.8666666667, blue: 0.9490196078, alpha: 1), #colorLiteral(red: 0.7568627451, green: 0.9411764706, blue: 0.9568627451, alpha: 1), + ].map(Color.init) + } + + @State + private var isVisible = false + + var body: some View { + VStack(spacing: 16) { + TitleSubtitleView(title: "Custom colors", + subtitle: "Example showing how to provide custom gradient colors.") + + GradientLoadingBarView(gradientColors: Config.gradientColors) + .frame(maxWidth: .infinity, maxHeight: 3) + .cornerRadius(1.5) + .opacity(isVisible ? 1 : 0) + + HStack(spacing: 16) { + Button("Show") { + withAnimation(.easeInOut) { + isVisible = true + } + } + .buttonStyle(RoundedRectangleButtonStyle()) + + Button("Hide") { + withAnimation(.easeInOut) { + isVisible = false + } + } + .buttonStyle(RoundedRectangleButtonStyle()) + } + } + .padding(.horizontal, 8) + .padding(.vertical, 16) + } +} + +private struct CustomProgressDurationExampleView: View { + private enum Config { + /// + static let progressDuration: TimeInterval = 10 + } + + @State + private var isVisible = false + + var body: some View { + VStack(spacing: 16) { + TitleSubtitleView(title: "Custom animation duration", + subtitle: "Example showing how to provide a custom progress animation duration.") + + GradientLoadingBarView(progressDuration: Config.progressDuration) + .frame(maxWidth: .infinity, maxHeight: 3) + .cornerRadius(1.5) + .opacity(isVisible ? 1 : 0) + + HStack(spacing: 16) { + Button("Show") { + withAnimation(.easeInOut) { + isVisible = true + } + } + .buttonStyle(RoundedRectangleButtonStyle()) + + Button("Hide") { + withAnimation(.easeInOut) { + isVisible = false + } + } + .buttonStyle(RoundedRectangleButtonStyle()) + } + } + .padding(.horizontal, 8) + .padding(.vertical, 16) + } +} + +// MARK: - Helper + +private struct RoundedRectangleButtonStyle: ButtonStyle { + func makeBody(configuration: Configuration) -> some View { + configuration.label + .padding() + .frame(maxWidth: .infinity) + .foregroundColor(.white) + .background(Color.blue.cornerRadius(8)) + .scaleEffect(configuration.isPressed ? 0.95 : 1) + } +} + +// MARK: - Preview + struct SwiftUIExampleView_Previews: PreviewProvider { static var previews: some View { SwiftUIExampleView()