Grouping items in a Flex mobile List

Mobile applications often have lists that group items in some way. For example, a contact list might group names by the first letter of the contact’s first name. This post demonstrates how to write a Spark ItemRenderer to simulate this behavior.

One way of implementing grouped items is by using the Spark List’s itemRendererFunction feature to have different renderers for normal item renderers and group headings.

This approach works well on the desktop, but isn’t fast enough for mobile devices because specifying an itemRendererFunction on your List prevents item renderer recycling. See this post for more information.

On a mobile device, performance is very important so instead of using an itemRendererFunction, you should use a single item renderer and adjust its look depending on the data it receives.

Here is a sample Flex Mobile Project that demonstrates how to do this: GroupedList.fxp

In my experience, this renderer performs pretty well even though it uses MXML. This is because it has been optimized to minimize the number of DisplayObjects and to not have any nested Groups. In a mobile project, it is recommended that you write item renderers in ActionScript by extending spark.components.LabelItemRenderer in order to get the best performance. To learn more about improving performance in your Flex applications, check out Ryan Frishberg’s talk from MAX 2010.

If you want an example of extending LabelItemRenderer to do something similar see this post.

Note: This sample requires Flash Builder “Burrito” and the latest Flex SDK “Hero”. You can download these builds from SDK builds from Adobe Labs.

9 thoughts on “Grouping items in a Flex mobile List”

  1. Very cool to see this demo. Looking at it, though, I can’t figure out how the items that have the group headers are not selectable but the the others are. Any insight here? Is it because the headerBG rectangle is blocking the click from the item renderer below?

  2. @Brian Genisio – They actually are selectable they just don’t show any visual indication of being selected. This is accomplished by drawing the headerBG Rect on top of the renderer’s background which hides what autoDrawBackground=”true” is doing on the background of the renderer.

  3. How to make an application for “detecting” the group and passed on the List, not the Detail view?

    for example xml:

    group 1

    1
    James
    King
    james_king.jpg

    2
    Julie
    Taylor
    julie_taylor.jpg

    3
    Eugene
    Lee
    eugene_lee.jpg

    I will be very grateful for your advice!

  4. @Daniel – Glad it’s useful, be sure to also check out this post for an example of doing this with a performant ActionScript item renderer that extends LabelItemRenderer.

  5. thanks for example. i have a small question. i m using tile layout inside list view to layout items in 4 columns each 5 pixels offset, small colored box sprite. items (xml data) has a property “catagory” i.e

    3
    Cream
    1002
    fffcd4

    Q. Is it possible to group items so when catagory changes in data provider, that would then
    a- use a different item renderer, create a group (catagory) item… ( i can see that approach in link you mentioned )
    b- how to skip row in tile layout so new item (group / catagory name) can appear in complete row
    c- any other ideas, may be some accordian control, which gives flexibility of opening multiple / all panels at once??
    thanks for your time..

  6. @lala
    a – You might be looking for itemRendererFunction, but it isn’t currently recommended for mobile since it doesn’t recycle renderers and can perform very poorly in scrolling
    b – The only way to do this in a TileLayout would be to add dummy values into your data
    c – Depends if you have many items and support scrolling, if you need to do that then an Accordion based component might not perform very well.

Comments are closed.