- Notifications
You must be signed in to change notification settings - Fork0
Apple-esque animated welcome screen for iOS and iPadOS. Configurable.
License
slawaDnC/UIOnboarding
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
UIOnboarding is an animated, configurable welcome screen in a Swift Package – inspired by Apple'sStocks app.
It supports iPhone, iPad and iPod touch running iOS and iPadOS 13 or higher, including core accessibility features such as Dynamic Type, Reduce Motion and VoiceOver for all devices – Split View and Slide Over for iPad.
Developed and designed byLukman Aščić.
| Default 6.5" | Default 4" |
|---|---|
 |  |
| 12.9" Portrait | 12.9" Landscape |
|---|---|
 |  |
| 1/3 iPad Landscape | 1/2 iPad Landscape | 2/3 iPad Landscape |
|---|---|---|
 |  |  |
| 1/3 iPad Portrait | 2/3 iPad Portrait |
|---|---|
 |  |
| iPad Portrait | iPad Landscape |
|---|---|
 |  |
| Dynamic Type | VoiceOver | Reduce Motion |
|---|---|---|
 |  |  |
Addhttps://github.com/lascic/UIOnboarding.git in the package manager in Xcode underFile > Add Packages. Select the version from2.0.0 or themain branch.
.package(url:"https://github.com/lascic/UIOnboarding.git", from:"2.0.0")// or.package(url:"https://github.com/lascic/UIOnboarding.git", branch:"main")
Three demo projects can be found in the/Demo directory, including an example for utilizing UIOnboarding in a SwiftUI app.
Clone the repo or download the demo projects as a .zip file to open and run them on a physical device or simulator in Xcode.
Before building and running the projects, make sure to set them up with your own provisioning profile.
UIOnboardingViewControllertakes aUIOnboardingViewConfiguration parameter for setup.
Make sure the view controller you're presenting from is embedded in aUINavigationController.OnboardingViewController has been set up to be presented as a full screen view.
// In the view controller you're presentingimport UIKitimport UIOnboardingletonboardingController:UIOnboardingViewController=.init(withConfiguration:.setUp())onboardingController.delegate=selfnavigationController?.present(onboardingController, animated:false)
Dismiss the onboarding view with the provided delegate method.
extensionViewController:UIOnboardingViewControllerDelegate{func didFinishOnboarding(onboardingViewController:UIOnboardingViewController){ onboardingViewController.modalTransitionStyle=.crossDissolve onboardingViewController.dismiss(animated:true, completion:nil)}}
SwiftUI'sUIViewControllerRepresentable protocol makes the UIKitUIOnboardingViewController behave as a SwfitUIView.
Create anOnboardingView struct implementing the protocol and use the.fullScreenCover() modifier introduced in iOS and iPadOS 14 to show it in the SwiftUI view you're presenting from.
.fullScreenCover(isPresented: $showingOnboarding, content:{OnboardingView.init().edgesIgnoringSafeArea(.all)}
Note that we assign SwiftUI's coordinator as the delegate object for our onboarding view controller.
onboardingController.delegate= context.coordinator
// In OnboardingView.swiftimport SwiftUIimport UIOnboardingstructOnboardingView:UIViewControllerRepresentable{typealiasUIViewControllerType=UIOnboardingViewControllerfunc makeUIViewController(context:Context)->UIOnboardingViewController{letonboardingController:UIOnboardingViewController=.init(withConfiguration:.setUp()) onboardingController.delegate= context.coordinatorreturn onboardingController}func updateUIViewController(_ uiViewController:UIOnboardingViewController, context:Context){}classCoordinator:NSObject,UIOnboardingViewControllerDelegate{func didFinishOnboarding(onboardingViewController:UIOnboardingViewController){ onboardingViewController.dismiss(animated:true, completion:nil)}}func makeCoordinator()->Coordinator{return.init()}}
// In ContentView.swiftimport SwiftUIstructContentView:View{@StateprivatevarshowingOnboarding=truevarbody:someView{NavigationView{Text("Hello, UIOnboarding!").toolbar{Button{ showingOnboarding=true} label:{Image(systemName:"repeat")}}.fullScreenCover(isPresented: $showingOnboarding, content:{OnboardingView.init().edgesIgnoringSafeArea(.all)})}}}structContentView_Previews:PreviewProvider{staticvarpreviews:someView{ContentView.init()}}
UIOnboardingViewConfiguration consists of six, non-optional component types.
- App Icon as
UIImage - First Welcome Title Line as
NSMutableAttributedString - Second Welcome Title Line as
NSMutableAttributedString - Core Features as
Array<UIOnboardingFeature> - Notice Text as
UIOnboardingTextViewConfiguration(e.g. Privacy Policy, Terms of Service, Portfolio, Website) - Continuation Title as
UIOnboardingButtonConfiguration
Create a helper structUIOnboardingHelper defining these components and combine them in anextension ofUIOnboardingViewConfiguration.
import UIKitimport UIOnboardingstructUIOnboardingHelper{ // App Iconstaticfunc setUpIcon()->UIImage{returnBundle.main.appIcon??.init(named:"onboarding-icon")!} // First Title Line // Welcome Textstaticfunc setUpFirstTitleLine()->NSMutableAttributedString{.init(string:"Welcome to", attributes:[.foregroundColor:UIColor.label])} // Second Title Line // App Namestaticfunc setUpSecondTitleLine()->NSMutableAttributedString{.init(string:Bundle.main.displayName??"Insignia", attributes:[.foregroundColor:UIColor.init(named:"camou")!])} // Core Featuresstaticfunc setUpFeatures()->Array<UIOnboardingFeature>{return.init([.init(icon:.init(named:"feature-1")!, title:"Search until found", description:"Over a hundred insignia of the Swiss Armed Forces – each redesigned from the ground up."),.init(icon:.init(named:"feature-2")!, title:"Enlist prepared", description:"Practice with the app and pass the rank test on the first run."),.init(icon:.init(named:"feature-3")!, title:"#teamarmee", description:"Add name tags of your comrades or cadre. Insignia automatically keeps every name tag you create in iCloud.")])} // Notice Textstaticfunc setUpNotice()->UIOnboardingTextViewConfiguration{return.init(icon:.init(named:"onboarding-notice-icon")!, text:"Developed and designed for members of the Swiss Armed Forces.", linkTitle:"Learn more...", link:"https://www.lukmanascic.ch/portfolio/insignia", tint:.init(named:"camou"))} // Continuation Titlestaticfunc setUpButton()->UIOnboardingButtonConfiguration{return.init(title:"Continue", titleColor:.white, // Optional, `.white` by default backgroundColor:.init(named:"camou")!)}}
If the welcome title only needs one line (in another language for example), simply provide an emptyNSMutableAttributedString value for either parameter.UIOnboardingTitleLabelStack automatically resizes itself to the corresponding line count, with no additional changes needed.
Below an example in Portuguese, leaving the second title line blank.
// First Title Line// App Namestaticfunc setUpFirstTitleLine()->NSMutableAttributedString{return.init(string:Bundle.main.displayName??"Distintivos", attributes:[.foregroundColor:UIColor.init(named:"camou")!])}// Second Title Line// Emptystaticfunc setUpSecondTitleLine()->NSMutableAttributedString{return.init(string:"")}
import UIOnboardingextensionUIOnboardingViewConfiguration{ // UIOnboardingViewController initstaticfunc setUp()->UIOnboardingViewConfiguration{return.init(appIcon:UIOnboardingHelper.setUpIcon(), firstTitleLine:UIOnboardingHelper.setUpFirstTitleLine(), secondTitleLine:UIOnboardingHelper.setUpSecondTitleLine(), features:UIOnboardingHelper.setUpFeatures(), textViewConfiguration:UIOnboardingHelper.setUpNotice(), buttonConfiguration:UIOnboardingHelper.setUpButton())}}
You may present the weclome screen only once (on first app launch) with the help of aUser Defaults flag. Note that an unspecified UserDefaultsbool(forKey:) key is set tofalse by default.
if !UserDefaults.standard.bool(forKey:"hasCompletedOnboarding"){showOnboarding()}
Toggle onboarding completion in the provided delegate method.
func didFinishOnboarding(onboardingViewController:OnboardingViewController){ onboardingViewController.modalTransitionStyle=.crossDissolve onboardingViewController.dismiss(animated:true){UserDefaults.standard.set(true, forKey:"hasCompletedOnboarding")}}
- Developing Accessible iOS Apps byDaniel Devesa Derksen-Staats
- Dynamic Type in UIKit
- Typography inApple's Human Interface Guidelines
- Text Size and Weight inApple's Human Interface Guidelines
- VoiceOver in UIKit
isReduceMotionEnabledin UIKittraitCollectionDidChange(_:)in UIKitviewWillTransition(to:with:)in UIKitUIViewControllerRepresentablein SwiftUImakeCoordinator()in SwiftUIUserDefaultsin Foundation
UIOnboarding isMIT licensed.
TheInsignia app icon andInsignia feature cell assets are copyright Lukman Aščić. All rights reserved. None of these materials or parts of it may be reproduced or distributed by any means without prior written permission of the copyright owner.
About
Apple-esque animated welcome screen for iOS and iPadOS. Configurable.
Resources
License
Stars
Watchers
Forks
Packages0
Languages
- Swift100.0%