Extending LabelItemRenderer to look like iTunes on the iPad
The native iTunes application on iPad has a nice two column item renderer to display song titles and artist names. This post demonstrates how to extend the spark LabelItemRenderer component to achieve this functionality in Flex.
This was my general approach:
- override set data to decide whether a renderer is a heading or not
- override createLabelDisplay() to create a new artistDisplay element
- override measure() to consider the artistDisplay size
- override layoutContents() to position the labelDisplay and artistDisplay
- override drawBackground() to draw a different background for headings or non-headings
For more details on this approach check out the comments in the MusicLabelItemRenderer class in this sample project: MusicLabelItemRenderer.zip
If you’re looking for a little more information on how to extend LabelItemRenderer you might find these resources useful:
- Create an ActionScript item renderer as a subclass of the LabelItemRenderer class
- Override the LabelItemRenderer.layoutComponents() method in an item renderer
- A 5-part series on writing item renderers for mobile
Note: This sample requires Flash Builder 4.5 and the final release build of Flex 4.5.
Nice, you’d probably want to exclude teh headers from being selectable as well.
http://www.tink.ws/blog/flex-4-excludeselectionlist/
@Tink – Good call, thanks for pointing that out.
Thank you, Shongy. Good post.
Rows do not provide th right height if the lbaltextdisplay is changed to “wordwrap” = true (to show long text)
@Hugo – This renderer is currently designed for single line text only. If you are looking at adding multi-line text support you might find this post useful: http://flexponential.com/2011/08/21/adding-multiline-text-support-to-labelitemrenderer/
Good one indeed, but it’s still missing a very nice feature: on iOS, the header “persists” at the top of the list. So for example, as long as there will still be titles beginning with an “A”, the “A” header stays on top of the list.
I know it’s definitely a tricky one to implement with the list component as it is but just saying that’s all
(that’s actually one feature I’ve always promised myself to develop at some point but that point has not come yet…)
@Gilles Guillemin – I agree that would be a nice feature to add. I have also thought about developing it a few times, but just haven’t got around to it yet.
Has anyone gotten around to coding the ability to persist the header at the top of the list?
I saw this feature in the Adobe MAX companion app (header for the group stayed present at the top of the list) and i think it was done with flex. Just with they would have opensourced that code.
I’m just starting out on LabelItemRenderers and have trawled many sites before I’d found this comprehensive (yet relatively simple) explanation. I’d like to extend the renderer to include an icon (on the left) and a decorator (to the right). I’ve spent a good while trying to implement this but all I’ve found with regards adding decorators to a list is with the mxml component – not ideal for a mobile application.
I’d really appreciate any hints/guides how this can be achieved within this item renderer class.
Thanks in advance…
W
@Will – Take a look at the spark.components.IconItemRenderer class as it supports an icon and decorator out of the box. From there you will probably want to override its measure()/layoutContents()/drawBackground() methods like shown above.