This content originally appeared on HackerNoon and was authored by Vaibhav
Day 4: Welcome them in style! 🎉
\ In the Fifth post of the #30DaysOfSwift series, let's learn how to add an onboarding screen to your SwiftUI (or UIKit) based iOS App.
\ Onboarding is essential to guide new users through the features of your app.
Here's the code for you to copy from:
struct ContentView: View {
@State private var showOnboarding = false
var body: some View {
VStack {
if showOnboarding {
OnboardingView()
} else {
MainView() // Your main app content
}
}
.onAppear {
checkUser() // Check onboarding status
}
}
func checkUser() {
// Logic to check if user is onboarded
let userOnboarded = UserDefaults.standard.bool(forKey: "userOnboarded")
showOnboarding = !userOnboarded
}
}
struct OnboardingView: View {
var body: some View {
VStack {
TabView {
VStack {
Image(systemName: "star.fill")
.resizable()
.frame(width: 100, height: 100)
Text("Welcome to the App")
.font(.largeTitle)
.bold()
.padding()
Text("Discover amazing features")
.font(.subheadline)
.padding()
}
VStack {
Image(systemName: "heart.fill")
.resizable()
.frame(width: 100, height: 100)
Text("Stay Connected")
.font(.largeTitle)
.bold()
.padding()
Text("Connect with friends and family")
.font(.subheadline)
.padding()
}
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
Button("Get Started") {
// Mark user as onboarded
UserDefaults.standard.set(true, forKey: "userOnboarded")
// Navigate to the main content
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
}
}
}
\ How it works:
The ContentView checks if the user has been onboarded via UserDefaults. If not, the onboarding screen is shown.
\
Once the user taps "Get Started," we set a flag in UserDefaults to ensure the onboarding screen doesn’t show up again.
\ Happy Coding!
This content originally appeared on HackerNoon and was authored by Vaibhav
Vaibhav | Sciencx (2024-10-08T00:52:10+00:00) Onboarding Flow in iOS 18 – #30DaysOfSwift. Retrieved from https://www.scien.cx/2024/10/08/onboarding-flow-in-ios-18-30daysofswift/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.