Today I will show you how to use TabView's tabViewStyle to implement paging effects.

Steps:

• First, create a ScrollView as a container for multiple pages

• Then create a TabView.

• Add a Text as the content of the first Tab of the TabView.

• Set the font size, display area, and background color of the first Text.

• Add an Image and a Text as the first tab in the bottom list.

Text("The first page")
    .font(.system(size: 50))
    .frame(width: UIScreen.main.bounds.width,
           height: UIScreen.main.bounds.height)
    .background(.blue)
    .tabItem {
        Image(systemName: "house.fill")
        Text("First")
    }

• Continue to add another Text as the content of the second Tab.

• Likewise, Set the font size, display area, and background color of the Text.

• Add the second tab in the bottom list in the same way.

Text("The second page")
    .font(.system(size: 50))
    .frame(width: UIScreen.main.bounds.width,
           height: UIScreen.main.bounds.height)
    .background(.yellow)
    .tabItem {
        Image(systemName: "magnifyingglass.circle.fill")
        Text("Second")
    }

• Set the display area of the TabView according to the screen size.

• Set the TabView's tabViewStyle to PageTabViewStyle, which will display all the pages in the TabView view in pagination.

.frame(width: UIScreen.main.bounds.width,
       height: UIScreen.main.bounds.height)
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))

• Finally, ignore the screen's safe area restrictions and display the paging effect with the fullscreen.

.edgesIgnoringSafeArea(.all)

Source Code:

struct ContentView: View {
    
    var body: some View {
        ScrollView {
            TabView {
                Text("The first page")
                    .font(.system(size: 50))
                    .frame(width: UIScreen.main.bounds.width,
                           height: UIScreen.main.bounds.height)
                    .background(.blue)
                    .tabItem {
                        Image(systemName: "house.fill")
                        Text("First")
                    }
                
                Text("The second page")
                    .font(.system(size: 50))
                    .frame(width: UIScreen.main.bounds.width,
                           height: UIScreen.main.bounds.height)
                    .background(.yellow)
                    .tabItem {
                        Image(systemName: "magnifyingglass.circle.fill")
                        Text("Second")
                    }
            }
            .frame(width: UIScreen.main.bounds.width,
                   height: UIScreen.main.bounds.height)
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
        }
        .edgesIgnoringSafeArea(.all)
    }
}

Follow me on:

(Foks) Hui Wang's LinkedIn