iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🕳️

UIPageControl Is Not an Indicator

に公開

UIKit includes a component called UIPageControl, which displays the total number of pages and the current page as dots.
A well-known example is its use at the bottom of the iPhone Home Screen.

https://developer.apple.com/documentation/uikit/uipagecontrol

By the way, if its only purpose were to display page information, a name like UIPageIndicator—similar to UIActivityIndicator—should have been sufficient. Why is it named UIPageControl?

To explore the reason, looking at the class declaration reveals that UIPageControl is a subclass inheriting from UIControl.

UIControl is a class that handles user interactions (controls), and it is inherited by classes such as UIButton and UISlider, as well as UIPageControl.

This means that UIPageControl is also a class that directly accepts user interaction.
So, what kind of interactions does UIPageControl accept?

One is the "scrub" interaction, where you grab and drag the UIPageControl left or right to scroll quickly.

The second is tapping the left or right margins of the UIPageControl to navigate between pages.

As you can see, UIPageControl is not just for displaying the current page position but is also a control for page navigation.
Especially when used with carousel content, you need two-way synchronization: not only updating the UIPageControl as the carousel scrolls but also scrolling the carousel in response to UIPageControl interactions.

Additionally, while UIPageControl has a visual height of about 9px, it is recommended to ensure a height of around 26–44px from the perspective of accepting interaction.
Regarding the width, it is also a good idea to size it with enough margin to ensure tap areas on both the left and right sides.
In the world of iOS, this is considered the standard behavior. You should avoid disabling these interactions, as it can be a factor in lowering accessibility.

For other rules, the HIG is a helpful reference.
https://developer.apple.com/design/human-interface-guidelines/components/presentation/page-controls/

Discussion