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

7 Responses to Mobile List Paging with Page Indicator Skin

  1. Ramon Helena says:

    Hi Jason,

    That’s really cool feature.

    Thanks for shared it,

    Best

    Ramón

  2. Simon says:

    Hi Jason,

    This is a welcome addition to the List component 🙂

    Is it possible to use the paging for a horizontal list of magazine covers using the scrollSnappingMode=”center” and the viewport set to the width of the each cover, however still reveal the covers to the left and right of the middle one?

    This is done in many iPad magazine apps.

    • Jason San Jose says:

      Hmm, I would think it’s possible by using a smaller rowHeight and columnWidth. When I get a sec, I’ll try it out.

  3. Simon says:

    Hi Jason,

    Let me know if you able to get it working.

    Thanks,
    Simon

  4. Sean says:

    Thanks for this Jason. I’m using this currently on an app I’m putting together. I’m actually using a ClassFactory to switch between ItemRenderers going from a tiled view to your paged view when an item is selected.

    Only thing I’m having trouble with is getting the selected item index from the tiled view to show the same index in the viewport for the paged view.

    Know of a quick way to tell the paged view to move to the corresponding index as selected in my tiled view?

    Thanks again, I really appreciate what you’ve been providing for the flexmo’ community!
    Sean

  5. Mohamad says:

    Hi,
    What I want to achieve is a similar approach but with some buttons. I have a view. In it, I want to have multiple pages. On the top, there should always be a left and a right arrows for moving between the pages. How can this be done?

    Appreciate any help.

    Mohamad

  6. ano says:

    hello, how can i dynamically change the list starting position?
    For example i need that the list would start from second position
    list.selectedIndex doesnt work. Can you help me?