How to use the PageIndicator component

The PageIndicator class displays a series of buttons, with one being selected, to show the user which index among a limited set is selected. Typically, it is paired with a component like ListView or PageNavigator that supports scrolling or paging.

Live preview of the PageIndicator component

The Basics

Start by creating a PageIndicator control, give it the maximum number of pages, and add it to the display list.

var pages = new PageIndicator();
pages.maxSelectedIndex = 5;
addChild(pages);

The number of buttons that a page indicator displays is controlled by the maxSelectedIndex 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.

The currently selected page may be changed programmatically by setting the selectedIndex property.

pages.selectedIndex = 2;

Add an event listener for Event.CHANGE to perform an action when the selected index changes.

pages.addEventListener(Event.CHANGE, pageIndicator_changeHandler);

Listeners for Event.CHANGE have the following function signature.

function pageIndicator_changeHandler(event:Event):Void {
    var pages = cast(event.currentTarget, PageIndicator);
    trace("pages.selectedIndex change: " + pages.selectedIndex);
}

Styles

A number of styles may be customized on the toggle buttons displayed in a PageIndicator component.

Toggle Buttons

The toggle buttons in a PageIndicator component is of type ToggleButton. Its appearance may be customized globally in a theme, or it may be customized outside of a theme on an specific, individual PageIndicator.

See How to use the ToggleButton component for complete details about which styles are available for the toggle button.

Style toggle buttons globally

Use the PageIndicator.CHILD_VARIANT_TOGGLE_BUTTON constant in a theme to provide a function that globally styles the toggle buttons in all PageIndicator components.

styleProvider.setStyleFunction(
    ToggleButton,
    PageIndicator.CHILD_VARIANT_TOGGLE_BUTTON,
    setPageIndicator_ToggleButton_Styles);

The function should use the following signature.

function setPageIndicator_ToggleButton_Styles(button:ToggleButton):Void {
    // ... set styles here
}

Style the toggle buttons in a specific `PageIndicator`

The toggleButtonRecycler property may be used to customize the creation of the toggle buttons.

pages.toggleButtonRecycler = DisplayObjectRecycler.withFunction(() -> {
    var button = new ToggleButton();
    // ... set styles here
    return button;
});