PageTabViewStyle in SwiftUI
Change tabs in your app with style
At the recent WWDC 2020, Apple introduced an additional style for
PageTabViewStyle. This is equivalent to Horizontal Paging Scroll, which is commonly used for the onboarding screen.
TabViewStylethat implements a paged scrolling
TabView.” — Apple Documentation
To follow along with this tutorial, you’ll need some basic knowledge in:
- At least Xcode 12+
Note: This only supports iOS 14+.
Getting Started With PageTabViewStyle
Let’s quickly set up four tabs on the
TabView with the capabilities of showing a filled image when selected and an unfilled image when unselected.
To have that, you will need to have a state to know what is being selected:
@State private var selected = 0
With this, the default selected tab is always
0 and you can change this to your preference:
Once you have all these set up, you are ready to implement Horizontal Page Scrolling with just a simple additional modifier. Add
.tabViewStyle(PageTabViewStyle()) at the end of
Your tab should be able to scroll horizontally now.
A Horizontal Page Scrolling is not complete without the page indicator. As a matter of fact, the page indicator is visible, but it’s white. Since the background color is also white, that’s why it’s not visible.
There are multiple ways to address that — either set a different background color or use an additional parameter.
By setting the background color as green, you now can see the tab image as the page indicator.
You may opt for the default page indicator. Simply comment out the tab’s image and it will show a default page indicator:
The other way is to use an additional modifier for the
TabView. With this, you will be able to still use a white background:
Who would have thought the process would be made a lot easier and simpler with SwiftUI? This is definitely worth celebrating.