SwiftUI 2 introduced a new TabView style called PageTabViewStyle that enables developers to easily create horizontal Pagers (aka Paging) with dots at the bottom to show users where they are. This is the equivalent of UIPageViewController from UIKit.

Today, we will cover how to use the new style for TabView and how to create a custom IndexView component.

Getting Started

Using the new API is as simple as setting the new PageTabViewStyle:

struct ContentView: View {

	  // MARK: - Private Properties

	  @State private var currentIndex = 0
	  private let colors: [Color] = [.red, .blue, .green, .yellow]

	  // MARK: - Body

	  var body: some View {
	    TabView(selection: $currentIndex) {
	      ForEach(0..<colors.count, id: \.self) { index in
	        colors[index]
	          .tag(index)
	      }
	    }
	    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
	  }
	}

#swift #programming #swiftui #ios #mobile