OnboardingUI

SwiftUI 库，用于实现类似第一方应用的引导界面

描述

此库允许你在自己的应用程序中实现与第一方应用程序类似的引导设计。由于该库由 SwiftUI 构建，因此你可以用更少的代码实现引导。它非常适合介绍新功能或在首次启动时显示。

要求

使用此库需要以下环境。

※ 我们不支持 watchOS。这是因为 watchOS 的屏幕尺寸太小，我们认为引导会对用户体验产生负面影响。
※ 对 tvOS 的支持正在进行中。由于缺乏适用于原生 tvOS 应用的引导文档以及 SwiftUI 的独特行为，因此重现性较低。

语言

支持的语言如下。在使用这些语言以外的地区的语言，应显示英语。如果你想添加更多支持的语言，请编辑 Localizable.xcstrings 并完成翻译工作。

英语
日语

演示

为了验证此库的运行情况，我们在库中创建了一个示例应用程序。请参考它。

用法

该框架有两种方法：一种可以轻松实现整个引导过程的方法，以及一种可以轻松实现其中一部分的方法。

简单实现

这是最简单的引导代码。

struct WelcomeOnboarding: Onboarding {
    var title: Text {
        Text("Welcome to\nOnboardingUI")
    }
    
    var features: Array<Feature> {
        Feature(
            "Easy to Make" ,
            imageName: "applescript",
            message: "Onboarding screens like Apple's stock apps can be easily created with SwiftUI."
        )
        
        Feature(
            "Not only for iPhone, but also for Mac, iPad, Vision Pro" ,
            imageName: "apple.logo",
            message: "It supports not only iPhone, but also Mac, iPad, and Vision Pro. Therefore, there is no need to rewrite the code for each device."
        )
#if os(iOS)
        .image(systemName: "ipad.and.iphone")
#elseif os(macOS)
        .image(systemName: "macbook")
#elseif os(tvOS)
        .image(systemName: "appletv")
#elseif os(visionOS)
        .image(systemName: "visionpro")
#endif
        
        Feature(
            "Customize SF Symbols" ,
            imageName: "circle.badge.checkmark",
            message: "When using a highly customizable implementation method, multi-color and SF symbol hierarchies are supported and can be freely customized. However, this feature is not supported in visionOS."
        )
        
#if os(tvOS)
        Feature(
            "Many other benefits" ,
            imageName: "ellipsis",
            message: "Now, tvOS is also supported, making it easy to create onboarding. Now you can create onboarding for all platforms except watchOS."
        )
#endif
    }
}

和

struct SimpleImplementationView: View {
    @Environment(\.appVersionManager) private var appVersionManager
    
    var body: some View {
        @Bindable var appVersionManager = appVersionManager
        SomeView()
            .onboardingSheet(isPresented: $appVersionManager.isTheFirstLaunch, WelcomeOnboarding())
    }
}

iOS

iPadOS

macOS

tvOS

visionOS

可定制的实现

struct WelcomeOnboardingSheetView: View {
    var action: () -> Void
    
    init(action: @escaping () -> Void) {
        self.action = action
    }
    
    var body: some View {
        OnboardingSheetView {
            OnboardingTitle("Welcome to\nOnboardingUI")
        } content: {
            OnboardingItem(systemName: "applescript",shape: .red) {
                OnboardingSubtitle("Easy to Make")
                OnboardingContent("Onboarding screens like Apple's stock apps can be easily created with SwiftUI.")
            }
            
            OnboardingItem(systemName: "apple.logo") {
                OnboardingSubtitle("Not only for iPhone, but also for Mac, iPad, Vision Pro")
                OnboardingContent("It supports not only iPhone, but also Mac, iPad, and Vision Pro. Therefore, there is no need to rewrite the code for each device.")
            }
            
            OnboardingItem(systemName: "circle.badge.checkmark",mode: .palette,primary: .primary,secondary: .blue) {
                OnboardingSubtitle("Customize SF Symbols")
                OnboardingContent("When using a highly customizable implementation method, multi-color and SF symbol hierarchies are supported and can be freely customized.")
            }
            
#if os(tvOS)
            OnboardingItem(systemName: "ellipsis",shape: .white) {
                OnboardingSubtitle("Many other benefits")
                OnboardingContent("Now, tvOS is also supported, making it easy to create onboarding. Now you can create onboarding for all platforms except watchOS.")
            }
#endif
        } link: {
            Link("Check our Privacy Policy…", destination: URL(string: "https://kc-2001ms.github.io/en/privacy.html")!)
        } button: {
            ContinueButton(color: .accentColor, action: action)
        }
    }
}

和

struct SimpleImplementationView: View {
    @Environment(\.appVersionManager) private var appVersionManager
    
    var body: some View {
        @Bindable var appVersionManager = appVersionManager
        SomeView()
            .sheet(isPresented: $appVersionManager.isTheFirstLaunch) {
                WelcomeOnboardingSheetView(action: {
                    appVersionManager.isTheFirstLaunch = false
                })
            }
    }
}