How it works
IndexViewStyle is the protocol that controls how a paged TabView draws its index indicator — the row of dots that signals how many pages exist and which one is showing. SwiftUI gives a view this look through the indexViewStyle(_:) modifier, which accepts any conforming style; rather than constructing a conformer yourself, you select one of the built-in styles. Reach for it whenever you display content in a paging TabView and need to show, hide, or restyle that page-dot indicator.
Adopt a style with the indexViewStyle(_:) modifier
The entry point is the
indexViewStyle(_:)view modifier, which takes a value conforming toIndexViewStyleand applies it to the paged container beneath it. In the example,.indexViewStyle(.page(backgroundDisplayMode: .always))attaches the style to theTabViewso its index dots adopt the page appearance.Pair it with the page tab view style
An index indicator only exists when the view actually pages, so
IndexViewStyleis meaningful alongside.tabViewStyle(.page). ThetabViewStylemodifier turns theTabViewinto a swipeable carousel that draws the dots, andindexViewStylethen governs how those dots look.Select the page style member
The built-in conformer is reached through the static member
.page, which resolves to SwiftUI'sPageIndexViewStyle. This is the standard dot indicator; you write.page(...)directly insideindexViewStyle(_:)instead of naming the concrete type, mirroring how.pageis used fortabViewStyle.Tune the indicator with backgroundDisplayMode
The
.pagestyle accepts abackgroundDisplayMode:argument that decides when a contrasting backdrop sits behind the dots so they stay legible over varied content. Passing.always, as in.page(backgroundDisplayMode: .always), keeps that background visible at all times;.automaticand.interactiveare the other choices.
.page(backgroundDisplayMode: .always) to .page(backgroundDisplayMode: .never) and watch the pill-shaped backdrop behind the dots disappear, leaving them to blend straight into the colored pages.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 IndexViewStyleDemo: View {
let colors: [Color] = [.red, .green, .blue]
var body: some View {
TabView {
ForEach(colors, id: \.self) { color in
color
.overlay(Text("Page").foregroundColor(.white))
}
}
.tabViewStyle(.page)
.indexViewStyle(.page(backgroundDisplayMode: .always))
.frame(height: 200)
.padding()
}
}