Mobile List Paging with Page Indicator Skin

Flex 4.6 introduced major enhancements to List and Scroller including paging and item snapping. For more details, read the spec or documentation.

With list paging, you can now push/pull, swipe or throw horizontally and vertically to scroll through items in a list. The code below shows how to configure a List for horizontal paging and force all items in the List to match the List’s size. When matching the List’s size, this essentially forces only one item to be viewed at a time.

<s:List id="pagedList"
        width="100%" height="100%"
        verticalScrollPolicy="off" horizontalScrollPolicy="on"
        pageScrollingEnabled="true"
        itemRenderer="renderers.BackgroundColorRenderer"
        skinClass="skins.PagedListSkin">
    <s:layout>
        <s:TileLayout orientation="rows" requestedRowCount="1" 
                      columnWidth="{pagedList.width}" rowHeight="{pagedList.height}" 
                      verticalGap="0" horizontalGap="0"/>
    </s:layout>
    <s:ArrayCollection id="colorData">
        <fx:Number>0xFF0000</fx:Number>
        <fx:Number>0xFF9900</fx:Number>
        <fx:Number>0xFFFF00</fx:Number>
        <fx:Number>0x00FF00</fx:Number>
        <fx:Number>0x0000FF</fx:Number>
        <fx:Number>0x9900FF</fx:Number>
    </s:ArrayCollection>
</s:List>

I’ve put together an example PageIndicator.fxp project that shows horizontal, vertical and grid paging. Please note that grid paging isn’t supported by default. The example project uses nested Lists to accomplish the same effect.

In addition to paging, the example project uses a custom skin with page indicators that replace the traditional mobile scrollbars. The PagedListSkin.as skin shows dots for each item in the list and highlights the dot for the currently visible item. For a demo, watch the video above.

Share on Facebook