SwiftUI library to implement first-party app-like onboarding
This library allows you to implement onboarding designs as implemented in first-party apps in your own apps. Since the library is made by SwiftUI, you can implement onboarding with fewer lines. It is ideal for introducing new features or displaying at first launch.
The following environment is required to use this library.
※ We do not support watchOS. This is because the screen size is small for watchOS and we believe that onboarding will negatively impact the user experience.
※ Support for tvOS is ongoing. Reproducibility is low due to the lack of onboarding documentation for stock tvOS apps and the SwiftUI's unique behavior.
Supported languages are as follows In regions with languages other than these, English should be displayed. If you would like to add more supported languages, please edit Localizable.xcstrings and do the translation work.
- English
- Japanese
To verify the operation of this library, we created a sample application in the library. Please refer to it.
This framework has two methods: a method that can easily implement the entire onboarding process and a method that can easily implement a portion of it.
This is the easiest code to onboard.
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
}
}and
struct SimpleImplementationView: View {
@Environment(\.appVersionManager) private var appVersionManager
var body: some View {
@Bindable var appVersionManager = appVersionManager
SomeView()
.onboardingSheet(isPresented: $appVersionManager.isTheFirstLaunch, WelcomeOnboarding())
}
}
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)
}
}
}and
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
})
}
}
}
Swift-DocC is currently being implemented.
Xcode is required to use this library. However, it is currently under development and cannot be installed. We will let you know as soon as possible.
See CONTRIBUTING.md if you want to make a contribution.
If you would like to make a donation to this project, please click here. The money you give will be used to improve my programming skills and maintain the application.
Pay by PayPal