Page View in SwiftUI

Creating a Page View in SwiftUI.

Nowadays, most applications have an onboarding flow to showcase their features and grab user attention. Implementing this in the past required a significant amount of time and often involved integrating third-party libraries. However, with SwiftUI, creating a page view has become incredibly easy and convenient. Let’s explore how to accomplish this in our article.

Introduction

Let me demonstrate how straightforward it is to create a page view in SwiftUI. In many cases, we want to present an onboarding flow to introduce our application’s offerings. Previously, this would have been a time-consuming task using Swift or relying on third-party solutions. Thankfully, SwiftUI makes it a breeze to create a page view. Let’s dive into it in this article.

struct OnboardView: View {
    let systemImageName: String
    let title: String
    let description: String
    
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: systemImageName)
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                .foregroundColor(.teal)
            
            Text(title)
                .font(.title).bold()
            
            Text(description)
                .multilineTextAlignment(.center)
                .foregroundColor(.secondary)
        }
        .padding(.horizontal, 40)
    }
}

The OnboardView struct represents a single screen within our onboarding flow. It consists of an image (using a system image in this case, but you can use a regular image), a title, and a description. It's a simple and straightforward view.

struct ContentView: View {
    var body: some View {
        TabView {
            OnboardView(systemImageName: "figure.run", title: "First Intro", description: "Great for health and sport")
            OnboardView(systemImageName: "figure.walk.motion", title: "Second Intro", description: "Great for health and sport")
            OnboardView(systemImageName: "figure.open.water.swim", title: "Third Intro", description: "Great for health and sport")
        }
        .tabViewStyle(.page(indexDisplayMode: .always))
        .indexViewStyle(.page(backgroundDisplayMode: .always))
    }
}

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

This is how you can use the OnboardView. Simply call it and provide the required properties. You can, of course, create a separate file for these constant strings, but for simplicity and clarity, I have used them directly.

The TabView contains multiple instances of the OnboardView, each representing a different screen in the onboarding flow. The .tabViewStyle(.page(indexDisplayMode: .always)) configuration sets the tab view style to .page, ensuring that the tabs are displayed as page-style indicators.
The .indexViewStyle(.page(backgroundDisplayMode: .always)) modifier determines the appearance of the index view, which typically appears at the bottom of the TabView and presents small indicators for each tab. When this modifier is used with the backgroundDisplayMode set to .always, it provides a gray background for the index view. If this modifier is omitted, the index view will be visible in dark mode but not in light mode.

Conclusion

SwiftUI provides a straightforward approach to creating a page view, making it convenient to implement an onboarding flow in your application. With its simplicity and flexibility, SwiftUI enables you to create engaging and visually appealing user experiences.