Page Controls

A page control displays a row of indicator images, each of which represents a page in a flat list. The scrolling row of indicators helps people navigate the list to find the page they want; page controls don't help people visualize or navigate pages in a hierarchy or nonlinear arrangement. Page controls can handle any number of pages, making them particularly useful in situations where people can create custom lists.

Partial screenshot of the Weather app highlighted to show a page control at the bottom edge of the screen. From the left, the page control displays the location glyph followed by 4 solid dots. The second dot from the left is bright white, indicating the location of the current page in the list.

A page control can adjust the appearance of indicators to provide more information about the list. For example, the control highlights the indicator of the current page so people can estimate the page's relative position in the list. When there are more indicators than fit in the space, the control can shrink indicators at both sides to suggest that more pages are available.

Partial screenshot of the Weather app highlighted to show a page control at the bottom edge of the screen. The page control displays a total of 10 dots. The center 6 dots use the default size; the second and ninth dots are about half the default size and the first and tenth dots are about one quarter the default size. The third dot from the left is bright white, indicating the location of the current page in the list.

People interact with page controls by tapping or scrubbing (to scrub, people touch the control and drag left or right). Tapping on the leading or trailing side of the current-page indicator reveals the next or previous page; in iPadOS, people can also use the pointer to target a specific indicator. Scrubbing opens pages in sequence, and scrubbing past the leading or trailing edge of the control helps people quickly reach the first or last page.

DEVELOPER NOTE In the API, tapping is a discrete interaction, whereas scrubbing is a continuous interaction; for guidance, see UIPageControl.InteractionState.

Consider offering a list view in addition to a page control, especially for long lists. To view a list of pages, people typically swipe to view the next or previous page, but this gesture can become tiring when the list is long. Although scrubbing a page control can be faster and easier than swiping each page, people might not realize it's an option. When you include a list view, you give people an alternative way to find the page they want and you can also let them reorder the list.

Page controls provide different visual feedback for tapping and scrubbing. When people tap to reveal the next or previous page, the control uses the page-scrolling animation people see when they swipe the pages. When people scrub, the control instantly displays new pages without animating the transitions.

Play

Don't animate page transitions during scrubbing. People can scrub very quickly, and using the scrolling animation for every transition can make your app lag and cause distracting visual flashes. Use the animated scrolling transition only for tapping.

A page control can include a translucent, rounded-rectangle background appearance that provides visual contrast for the indicators. You can choose one of the following background styles:

  • Automatic — Displays the background only when people interact with the control. Use this style when the page control isn't the primary navigational element in the UI.
  • Prominent — Always displays the background. Use this style only when the control is the primary navigational control in the screen.
  • Minimal — Never displays the background. Use this style when you just want to show the position of the current page in the list and you don't need to provide visual feedback during scrubbing.

For developer guidance, see backgroundStyle.

Don't support scrubbing when you use the minimal background style. The minimal style doesn't provide visual feedback during scrubbing. If you want to let people scrub a list of pages in your app, use the automatic or prominent background styles.

Center a page control at the bottom of the screen. To ensure people always know where to find a page control, center it horizontally and position it near the bottom of the screen.

Customizing Indicator Images

By default, a page control uses the system-provided dot glyph for all indicators, but it can also display a unique image to help people identify a specific page. For example, Weather uses the location.fill symbol to distinguish the current location's page.

If it enhances your app, you can provide a custom image to use as the default image for all indicators and you can also supply a different image for a specific page. For developer guidance, see preferredIndicatorImage and setIndicatorImage(_:forPage:).

Make sure custom indicator images are simple and clear. Avoid complex shapes, and don't include negative space, text, or inner lines, because these details can make a glyph muddy and indecipherable at very small sizes. Consider using simple SF symbols as indicators or design your own glyphs (for guidance, see Glyphs).

Customize the default indicator image only when it enhances the page control's overall meaning. For example, if every page you list contains bookmarks, you might use the bookmark.fill symbol as the default indicator image.

Avoid using more than two different indicator images in a page control. If your list contains one page with special meaning — like the current-location page in Weather — you can make the page easy to find by giving it a unique indicator image. In contrast, a page control that uses several unique images to mark several important pages is hard to use because people must memorize the meaning of each image. A page control that displays more than two types of indicator images tends to look messy and haphazard, even when each image is clear.

Partial screenshot of a custom weather app highlighted to show a page control at the bottom edge of the screen. The page control displays the location glyph on the left followed by nine dots.

White check in a green circle to indicate a correct example.

Using only two different indicators looks well-organized and provides a consistent experience.

Partial screenshot of a custom weather app highlighted to show a page control at the bottom of the screen. From the left, the page control displays the following 10 glyphs: star, weak sun, cloud, cloud with sun, weak sun, cloud with drizzle, strong sun, weak sun, cloud, and cloud with moon and rain.

White X in a gray circle to indicate an incorrect example.

Using several different indicators can make a page control look busy and difficult to use.

Avoid coloring indicator images. Custom colors can reduce the contrast that differentiates the current-page indicator and makes the page control visible on the screen. To ensure that your page control is easy to use and looks good in different contexts, let the system automatically color the indicators.