A container view that manages navigation between related views.

Pages are navigated directly by the user with a gesture, or programmatically through either the selection binding or the environment’s navigation action.

Creating a PageView

There are two ways to initialise a PageView. The simplest is with a ForEach data source:

@State private var selection: Int = 1

var body: some View {
    PageView(selection: $selection) {
        ForEach(1...10, id: \.self) { id in
            Text("Page \(value)")
        }
    }
    .pageViewStyle(.scroll)
}

Alternatively you can you can use the next and previous closure to return a value relative to another value:

@State private var selection: Int = 1

var body: some View {
    PageView(selection: $selection) { value in
        value + 1
    } previous: { value in
        value > 1 ? value - 1 : nil
    } content: { value in
        Text("Page \(value)")
    }
}

Styles and Transitions

The exact navigation gesture or transition depends on the chosen style. By default a page view has no transitions or gestures.

You set a style with the view modifier:

PageView(selection: $selection) {
    ...
}
.pageViewStyle(.bookStack)

Page Orientation

Styles that support support vertical and horizontal navigation (scroll and book) can be configured with the orientation view modifier:

.pageViewOrientation(.vertical)

Controls such as PageViewNavigationButton also respond to this modifier adapting the chevron direction as appropriate.

Custom Styles

You can create your own completely custom page view transitions and interactions. To create a custom style declare a type that conforms to the PageViewStyle protocol and implement the required makeBody(configuration:) method. For example, here’s how the plain style is implemented:

public struct PlainPageViewStyle: PageViewStyle {

   public init() { }

   public func makeBody(configuration: Configuration) -> some View {
       ZStack {
           configuration.content(configuration.selection.wrappedValue)
       }
   }
}

You use the PageViewStyleConfiguration structure to get access to content, next, previous and currently selected page.

Navigation

In addition to controlling the current page with the selection binding, you can also use the environment’s PageViewNavigateAction action to navigate the page view backwards and forwards.

@Environment(\.navigatePageView) private var navigate
@Environment(\.canNavigatePageView) private var canNavigate
    
var body: some View {
    Button {
        navigate(.forwards)
    } label: {
        Text("Next")
    }
    .disabled(!canNavigate.contains(.forwards))
}

Included is also PageViewNavigationButton which provides standardised forwards and backwards controls:

PageView {
    ...
}
.toolbar {
    ToolbarItem {
        PageViewNavigationButton()
            .pageViewOrientation(.vertical)
    }
}
.pageViewEnvironment()

PageIndicator

A control that displays a horizontal series of dots, each of which corresponds to a page.

You create a page indicator by setting the total number of pages and passing a binding to some selection state:

@State private var selection = 1

var body: some View {
    PageIndicator(selection: $selection, total: 5)
}

This control bridges directly to UIPageControl on iOS.

Indicator Appearance

You can control the indicator’s appearance with a number of style modifiers:

/// The tint color to apply to the page indicator.
.pageIndicatorColor(.purple)

/// The tint color to apply to the current page indicator.
.pageIndicatorCurrentColor(.pink)

/// A Boolean value that determines whether the page control allows continuous interaction.
.allowsContinuousInteraction(true)

/// The preferred background style.
.pageIndicatorBackgroundStyle(.prominent)

/// Controls whether the page indicator is hidden when there is only one page.
.singlePageVisibility(.hidden)

Page Progress

A page indicator can automatically advance to the next page after a set duration.

PageIndicator...
    .pageIndicatorDuration(3.0)

This can also be used to drive a PageView if the selection binding is shared between the two views.

Indicator Icons

You can customise an indicator’s icon to denote special pages, such as how the Weather app uses the first page to represent the user’s current location:

Icon customisations are provided in the form of a view builder. The first parameter represents the page index and the second the selected state.

// Vary icons depending on page
PageIndicator(selection: $selection, total: total) { (page, selected) in
    if page == 0 {
        Image(systemName: "location.fill")
    }
}

// Vary icons depending on selection state
PageIndicator(selection: $selection, total: total) { (page, selected) in
    if selected {
        Image(systemName: "folder.fill")
    } else {
        Image(systemName: "folder")
    }
}

Installation

BigUIPaging is available as a Swift Package. Just add this repository to your Package.swift file:

.package(url: "https://github.com/notsobigcompany/BigUIPaging.git", from: "0.0.1")

If you’re adding to an Xcode project go to File -> Add Packages, then link the package to your required target.

Requirements

• iOS 16.0
• macOS 13.0

Sample Code

Take a look at the Examples folder inside the package and open the Xcode Preview Canvas.

You can also find sample code in the documentation.

BigUIPaging on GitHub: https://github.com/notsobigcompany/BigUIPaging
Platform: iOS
⭐️: 118