How to use Create a List with Custom Layout Using DataGroup and itemRenderer (IDataRenderer implementation)

In Adobe Flex 4.5 Mobile Spark Components, the DataGroup with Custom itemRenderer (IDataRenderer implementation) allows you to layout items in a list with additional formatting & styling.

If you wrap the DataGroup inside the Scroller Spark component, the list of items can then be touch scrolled by swiping your finger on the screen.

To develop Adobe AIR applications on Android smartphones easily, I highly recommend Developing Android Applications with Adobe AIR (Adobe Developer Library).

Sample code for the View that contains the DataGroup:

<?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" show="view1_showHandler(event)">
    
    <fx:Script>
        <![CDATA[
            import model.Article;
            import model.Persistence;
            
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;
            
            [Bindable] private var articles:ArrayList = new ArrayList;
            protected function manualPostBtn_clickHandler(event:MouseEvent):void
            {
                navigator.pushView(ManualPost);
            }
            
            protected function view1_showHandler(event:FlexEvent):void
            {
                var articles:Array = Persistence.instance.article.findAll();
                this.articles.source = articles;
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Scroller top="0" bottom="0" left="0" right="0">
        <s:DataGroup width="100%" itemRenderer="renderer.ArticleRenderer" dataProvider="{articles}">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
    <s:navigationContent>
        <s:Button x="39" y="22" label="Manual" click="manualPostBtn_clickHandler(event)"/>    
    </s:navigationContent>
    
</s:View>

Sample code for the itemRenderer (IDataRenderer implementation):

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    width="100%" height="120" implements="mx.core.IDataRenderer">
    <fx:Script>
        <![CDATA[
             private var _data:Object;

            [Bindable]
            public function get data():Object
            {
                return _data;
            }

            public function set data(value:Object):void
            {
                _data = value;
            }

        ]]>
    </fx:Script>
    <s:Label x="98" y="10" width="331" text="{data.title}"/>
    <s:Label left="98" right="10" top="36" bottom="36" fontSize="16"
             text="{data.summary}"/>
    <s:Label right="180" bottom="10" styleName="miniLink" text="Like"/>
    <s:Label right="80" bottom="10" styleName="miniLink" text="Comment"/>
    <s:Label right="10" bottom="10" styleName="miniLink" text="Share"/>
    <s:Image x="10" y="10" width="80" height="80" backgroundColor="#ff6666" />
</s:Group>

Learn more about Mobile Flex Development in Developing Android Applications with Adobe AIR (Adobe Developer Library).