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.