How to use the Feathers
PageIndicator component displays a series of symbols, with one being highlighted, to show the user which index among a limited set is selected. Typically, it is paired with a
List or a similar component that supports scrolling and paging. The user can tap the
PageIndicator to either side of the selected symbol to navigate forward or backward.
First, let's create a
PageIndicator control, give it a number of pages, and add it to the display list.
The number of symbols that a page indicator displays is controlled by the
pageCount property. You'll see that the first symbol is automatically selected. If you tap the page indicator on the right side, it will advance to the next index.
If we want to react to the selected index changing, we can add a listener for
The listener might look something like this:
You can customize the layout of a page indicator, and you can customize the appearance of a its "normal" and "selected" symbols. For full details about which properties are available, see the
PageIndicator API reference. We'll look at a few of the most common ways of styling a list below.
You may set the
direction of a page indicator to
Direction.VERTICAL. The default layout direction is horizontal. Below, we change it to vertical:
We can set other layout properies, such as the
gap between symbols, the padding around the edges, and the alignment, both
The symbols may be created using the
selectedSymbolFactory for normal and selected symbols, respectively. These functions may return any type of Starling display object. Below, we return Starling Images with different textures for normal and selected states:
The page indicator will automatically reuse symbols if the page count or the selected index changes.