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)