Horizontal Scrolling List in Adobe AIR for Mobile... Sorta.
by Nathan D. on December 22nd, 2011

Recently, I began working on a new application which has a horizontal scrolling list of images (as clickable buttons). I looked into the new ScrollingList components in Flex 4.6 thinking, sweet! A simple parameter change to say "horizontal" instead of "vertical" and I'm good! Not so much... As anyone who's attempted something similar has come to realize, there is no such property in existance. However, after some simple hacking and a lot of head tilting, I've discovered a rather simple, yet complicated, workaround. Check it out below...
TestMobileProject.mxml (to simply render the view):
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.TestMobileProjectHomeView" applicationDPI="160">
<fx:Style source="main.css" />
<!-- Place non-visual elements (e.g., services, value objects) here -->
TestMobileProjectHomeView.mxml (as Referenced by the main app above):
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Home">

<s:SpinnerListContainer width="100%" chromeColor="#FF0000" horizontalCenter="0" rotation="90" skinClass="skins.HorizontalSpinnerListSkin">
<s:SpinnerList height="100%" fontFamily="test" itemRenderer="TestItemRenderer"
labelField="data" selectedIndex="1" wrapElements="true">
<fx:Object data="image1.png"></fx:Object>
<fx:Object data="image2.png"></fx:Object>
<fx:Object data="image3.png"></fx:Object>
<fx:Object data="image4.png"></fx:Object>
<fx:Object data="image5.png"></fx:Object>
<fx:Object data="image6.png"></fx:Object>
Now - the first thing of note in SpinnerListContainer: rotation="90". Thus, rendering our vertical scroller in a horizontal manner. I also created a skinClass to remove the default skin (which will also be displayed rotated 90 degrees as well.
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">

<s:State name="normal" />
<s:State name="disabled" />

Note: setting the minimum size to 0 here so that changes to the host component's
size will not be thwarted by this skin part's minimum size. This is a compromise,
more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
<!--- @copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">

Now- the more complicated part of this "hack"- the item renderers.
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
width="150" height="250">
<s:Image width="96" height="96" horizontalCenter="0" rotation="-90" smooth="true"
source="{data.data}" verticalCenter="0"/>
<s:Label right="4" fontFamily="Verdana" rotation="-90" text="{data.data}" verticalCenter="0"/>
It's pretty plain and simple actually. All my elements are rotated -90 degrees, effectively negating our earlier 90 degree rotation of the entire compontent. And what we end up with: a horizontally swipable scrolling container. You just have to swap the horizontal and vertical concepts in your item renderer (the complicated part). For instance, I put my label centered at the bottom of my item renderer. In order to put it in the correct position, I have to set horizontalCenter="0" and right="4". If I weren't rotating -90, I'd be adjusting different properties (verticalCenter and bottom respectively).

Posted in Flex, Flash, Adobe AIR, Components    Tagged with no tags


Leave a Comment