Question

I am trying to simulate the interface of mobile (ios / android)…

1. Drag the menu and you will see the part of previous or next page content
2. Release the menu and if you have dragged over 30% of page content. It will do the transition between current page and target page.

I am just wondering is there any library or Flex component have already provided the above features? I have google it but got nothing related to these features (wrong keyword?..). I can code it by hand but I would like to check whether my approach is the best way to do so…

Thank you in advanced.

Answer 1

Using the Flex Mobile SDK, you’ll note a similar interface, user experience, and functionality as found within native iOS applications.

The List component appears similar to iOS, such as how the scroll bar renders and the ability to spring before the list.

I would take a look at Jason’s Flex Blog from Adobe, Mobile List Paging with Page Indicator Skin:

http://blogs.adobe.com/jasonsj/2011/11/mobile-list-paging-with-page-indicator-skin.html

<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>

There is a FXP of the project there.