Skip to content

Instantly share code, notes, and snippets.

@Sangsom

Sangsom/OnboardingData.swift Secret

Last active Apr 19, 2021
Embed
What would you like to do?
Code for SwiftUI Onboarding View article
struct ContentView: View {
@State private var currentTab = 0
var body: some View {
TabView(selection: $currentTab,
content: {
Text("First View")
.tag(0)
Text("Second View")
.tag(1)
Text("Third View")
.tag(2)
})
}
}
struct ContentView: View {
@State private var currentTab = 0
var body: some View {
TabView(selection: $currentTab,
content: {
Text("First View")
.tag(0)
Text("Second View")
.tag(1)
Text("Third View")
.tag(2)
})
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}
}
struct ContentView: View {
@State private var currentTab = 0
var body: some View {
TabView(selection: $currentTab,
content: {
ForEach(OnboardingData.list) { viewData in
OnboardingView(data: viewData)
.tag(viewData.id)
}
})
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}
}
struct OnboardingData {
let backgroundImage: String
let objectImage: String
let primaryText: String
let secondaryText: String
}
struct OnboardingData: Hashable, Identifiable {
let id: Int
let backgroundImage: String
let objectImage: String
let primaryText: String
let secondaryText: String
static let list: [OnboardingData] = [
OnboardingData(id: 0, backgroundImage: "onboarding-bg-1", objectImage: "onboarding-object-1", primaryText: "Get healthy and live peacfully", secondaryText: "Living a happier, more satisfied life is within reach."),
OnboardingData(id: 1, backgroundImage: "onboarding-bg-2", objectImage: "onboarding-object-2", primaryText: "Predict weather", secondaryText: "Predict weather trends and conditions with current solar activity."),
OnboardingData(id: 2, backgroundImage: "onboarding-bg-3", objectImage: "onboarding-object-3", primaryText: "Get air quality information", secondaryText: "Immediate, accurate air quality data to help you create healthier.")
]
}
import SwiftUI
struct OnboardingView: View {
var data: OnboardingData
var body: some View {
Text("Hello, World!")
}
}
struct OnboardingView_Previews: PreviewProvider {
static var previews: some View {
OnboardingView(data: OnboardingData.list.first!)
}
}
struct OnboardingView: View {
var data: OnboardingData
var body: some View {
VStack(spacing: 20) {
ZStack {
Image(data.backgroundImage)
.resizable()
.scaledToFit()
Image(data.objectImage)
.resizable()
.scaledToFit()
.offset(x: 0, y: 150)
}
Spacer()
Spacer()
Text(data.primaryText)
.font(.title2)
.bold()
.foregroundColor(Color(red: 41 / 255, green: 52 / 255, blue: 73 / 255))
Text(data.secondaryText)
.font(.headline)
.multilineTextAlignment(.center)
.frame(maxWidth: 250)
.foregroundColor(Color(red: 237 / 255, green: 203 / 255, blue: 150 / 255))
.shadow(color: Color.black.opacity(0.1), radius: 1, x: 2, y: 2)
Spacer()
Button(action: {
// Add action for button
}, label: {
Text("Get Started")
.font(.headline)
.foregroundColor(.white)
.padding(.horizontal, 50)
.padding(.vertical, 16)
.background(
RoundedRectangle(cornerRadius: 20)
.foregroundColor(
Color(
red: 255 / 255,
green: 115 / 255,
blue: 115 / 255
)
)
)
})
.shadow(radius: 10)
Spacer()
}
}
}
struct OnboardingView: View {
var data: OnboardingData
@State private var isAnimating: Bool = false
var body: some View {
VStack(spacing: 20) {
ZStack {
Image(data.backgroundImage)
.resizable()
.scaledToFit()
Image(data.objectImage)
.resizable()
.scaledToFit()
.offset(x: 0, y: 150)
.scaleEffect(isAnimating ? 1 : 0.9)
}
Spacer()
Spacer()
Text(data.primaryText)
.font(.title2)
.bold()
.foregroundColor(Color(red: 41 / 255, green: 52 / 255, blue: 73 / 255))
Text(data.secondaryText)
.font(.headline)
.multilineTextAlignment(.center)
.frame(maxWidth: 250)
.foregroundColor(Color(red: 237 / 255, green: 203 / 255, blue: 150 / 255))
.shadow(color: Color.black.opacity(0.1), radius: 1, x: 2, y: 2)
Spacer()
Button(action: {
// Add action for button
}, label: {
Text("Get Started")
.font(.headline)
.foregroundColor(.white)
.padding(.horizontal, 50)
.padding(.vertical, 16)
.background(
RoundedRectangle(cornerRadius: 20)
.foregroundColor(
Color(
red: 255 / 255,
green: 115 / 255,
blue: 115 / 255
)
)
)
})
.shadow(radius: 10)
Spacer()
}
.onAppear(perform: {
isAnimating = false
withAnimation(.easeOut(duration: 0.5)) {
self.isAnimating = true
}
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment