PageTabViewStyle in SwiftUI

Change tabs in your app with style

Kelvin Tan
Oct 29 · 3 min read
Two phone screens
Two phone screens
Photo by Charles Deluvio on Unsplash.

At the recent WWDC 2020, Apple introduced an additional style for TabView called PageTabViewStyle. This is equivalent to Horizontal Paging Scroll, which is commonly used for the onboarding screen.

“A TabViewStyle that implements a paged scrolling TabView.” — Apple Documentation

Prerequisites

To follow along with this tutorial, you’ll need some basic knowledge in:

  • Swift
  • 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:

Default first tab
Default first tab

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 TabView:

TabView() {
..
..
}.tabViewStyle(PageTabViewStyle())

Your tab should be able to scroll horizontally now.

Tab scrolling horizontally
Tab scrolling horizontally

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.

Green background reveals white page indicator
Green background reveals white 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:

Default page indicator
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:

.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
White background with grey page indicators
White background with grey page indicators

Who would have thought the process would be made a lot easier and simpler with SwiftUI? This is definitely worth celebrating.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store