• PageTabViewStyle in SwiftUI
  • Originally written by Kelvin Tan
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Franz Wang
  • Proofread by zenblo Github nuggets

The PageTabViewStyle SwiftUI

At the recent WWDC 2020 conference, Apple added a new “TabView” style called “PageTabViewStyle,” which is similar to a horizontal page-scrolling effect and is often used to guide pages.

“One is realizedTabViewpagingTabViewStyle.” -Apple Official Documentation

Preliminary knowledge

To follow this tutorial, you need to know the basics:

  • Swift
  • Xcode 12+

Note: Only iOS 14+ is supported

Introduction to PageTabViewStyle

Let’s quickly implement a TabView that displays different ICONS at the bottom and fills the image when selected or not.

You need a state to check whether it is selected:

@State private var selected = 0
Copy the code

The default check state is 0, you can change it in Settings:

TabView() {
    Text("First Tab").tabItem {
        Image(systemName: (selected = = 0 ? "house.fill" : "house"))
        Text("Home")}Text("Second Tab").tabItem {
        Image(systemName: (selected = = 1 ? "plus.circle.fill" : "plus.circle"))
        Text("Add")}Text("Third Tab").tabItem {
        Image(systemName: (selected = = 2 ? "heart.fill" : "heart"))
        Text("Favorite")}Text("Fourth Tab").tabItem {
        Image(systemName: (selected = = 3 ? "person.fill" : "person"))
        Text("Profile")}}Copy the code

Once you’ve done that, you can scroll horizontally with a simple modifier. Add.tabviewStyle (PageTabViewStyle()) after TabView:

TabView() { .. . }.tabViewStyle(PageTabViewStyle())Copy the code

Your TAB page can now scroll.

You’ll also need a Page indicator. It’s actually already there, but the color is white like the background color, so you can’t see it.

There are several ways to solve this problem, you can change the background color, or you can change the page indicator parameters.

Set the background to green, and you can see the page indicator, which shows the image of the TAB.

You can also use the default page indicator instead. Just comment out the TAB icon (image).

If you still want to use a white background color, you can add another modifier to TabView:

.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
Copy the code

With SwiftUI, implementing a horizontal scrolling view is so easy. This is definitely worth celebrating.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.