How it works
PageIndexViewStyle is an index view style that draws the familiar row of paging dots, one per page, with the current page highlighted. Apply it when a view presents content as a sequence of full-width pages and you want a compact, standard affordance that shows how many pages exist and where the reader currently is. It is the style behind the page-dot indicator you see in a paged TabView, and it conforms to IndexViewStyle so it can be handed to the indexViewStyle(_:) modifier.
Adopt it through the indexViewStyle(_:) modifier
PageIndexViewStyle takes effect only when you pass an instance of it to indexViewStyle(_:) on the container that owns the index. In the example,
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))installs the dot indicator on the TabView.Pair it with a paging container
The style describes the index for a paged presentation, so it expects an enclosing view that pages its content. Here the TabView is switched into paging mode with
.tabViewStyle(.page), which is what produces the swipeable pages the dots track.Control the dot backdrop with backgroundDisplayMode
The initializer's backgroundDisplayMode parameter sets when a contrasting capsule is drawn behind the dots so they stay legible over arbitrary content. The example passes
backgroundDisplayMode: .alwaysto keep that backdrop visible at all times; the other cases are.automatic,.interactive, and.never.Rely on its IndexViewStyle conformance
Because PageIndexViewStyle conforms to IndexViewStyle, indexViewStyle(_:) accepts it as a peer of any other index style, letting you swap styles without touching the surrounding view. The single
PageIndexViewStyle(backgroundDisplayMode:)initializer is the whole configurable surface.
backgroundDisplayMode: .always to .never and watch the dots render without their contrasting backdrop, blending directly into the page content.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct PageIndexViewStyleDemo: View {
let colors: [Color] = [.red, .green, .blue]
var body: some View {
TabView {
ForEach(colors.indices, id: \.self) { i in
colors[i]
.overlay(Text("Page \(i + 1)").font(.title).foregroundColor(.white))
}
}
.tabViewStyle(.page)
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
.frame(height: 200)
.padding()
}
}