How to create Onboarding View with PageControl in SwiftUI?

SwiftUI came with very easy implementations in many type of areas in development. We can create onboarding view easily in few minutes far better than storyboard and UICollectionView.

So, I have created sample code for this.

Let’s Code!

First of all create card view for show sample image and title text.

	//
	// CardView.swift
	// AKPageView
	//
	// Created by Ashish Kakkad on 31/08/23.
	//

	import SwiftUI

	struct CardView: View {

	var image = Image("Onboarding_1")
	var title = "It's best place to work!"

	var body: some View {
	VStack {
	image
	.resizable()
	.aspectRatio(contentMode: .fit)
	Text(title)
	}
	}
	}

	struct CardView_Previews: PreviewProvider {
	static var previews: some View {
	CardView()
	}
	}

view raw CardView.swift hosted with ❤ by GitHub

Now add above CardView in the TabView and to give support of page view we can use modifier .tabViewStyle(.page)

For display page control we can use modifier .indexViewStyle(.page(backgroundDisplayMode: .always))

	//
	// AKPageView.swift
	// AKPageView
	//
	// Created by Ashish Kakkad on 31/08/23.
	//

	import SwiftUI

	struct AKPageView: View {
	var body: some View {
	TabView() {
	CardView(image: Image("Onboarding_1"), title: "It's best place to work!")
	CardView(image: Image("Onboarding_2"), title: "Work mode on!")
	}
	.tabViewStyle(.page)
	.indexViewStyle(.page(backgroundDisplayMode: .always))
	}
	}

	struct ContentView_Previews: PreviewProvider {
	static var previews: some View {
	AKPageView()
	}
	}

Conclusion

Share this: