SwiftUI で初回起動時のスライドチュートリアルを実装する
自作で作成する時を考える
完成系はここを目指します!
初回起動時を探知する
Enum&Structs.swift
struct CurrentUserDefaults{
// 初回起動時判定
static let isFirstVisit = "is_first_visit"
}
構造体として参照できるようにしておく
ContentView.swift
import SwiftUI
struct sample: View {
@State var isShowTutorialView: Bool = false
var body: some View {
Button(action: {
self.isShowTutorialView.toggle()
}, label: {
Text("Hello Button")
.font(.title)
})
.onAppear(){
firstVisitSetup()
}
.fullScreenCover(isPresented: $isShowTutorialView, content: {
TutorialHomeView()
})
}
//MARK: FUNCTIONS
func firstVisitSetup(){
let visit = UserDefaults.standard.bool(forKey: CurrentUserDefaults.isFirstVisit)
if visit{
print("Access More Than Once")
UserDefaults.standard.set(false, forKey: CurrentUserDefaults.isFirstVisit)
}else{
print("First Access")
self.isShowTutorialView.toggle()
UserDefaults.standard.set(true, forKey: CurrentUserDefaults.isFirstVisit)
}
}
}
struct sample_Previews: PreviewProvider {
static var previews: some View {
sample()
}
}
if visitの
UserDefaults.standard.set(false, forKey: CurrentUserDefaults.isFirstVisit)
は意図的にデバック用に行っているものですので、削除してください
スライドViewを実装していく
TutorialView.swift
// Slide Tutorial View
TabView(selection: $selection,
content: {
Image("tutorial_image_1")
.resizable()
.scaledToFit()
.tag(1)
Image("tutorial_image_1")
.resizable()
.scaledToFit()
.tag(2)
Image("tutorial_image_1")
.resizable()
.scaledToFit()
.tag(3)
Button(action: {
print("BUTTON CLICKED")
presentaionMode.wrappedValue.dismiss()
}, label: {
Text("Let's Start".uppercased())
.font(.title3)
.fontWeight(.bold)
.foregroundColor(.white)
.padding(.all, 30)
.background(Color.MyTheme.blueColor)
.cornerRadius(10)
.shadow(radius: 20)
})
.tag(4)
})
.tabViewStyle(PageTabViewStyle())
.frame(height: 500)
最後に
Swiftで簡単にスライドチュートリアルを作ることができました!
誰かのためになれば幸いです!
Twitter(https://twitter.com/Ryosuke_Kamimur)
Github(https://github.com/Ryosukekamimura)