Flash Builder FXP (for SDK 4.5.1): StyledIconItemRendererDemo.fxp
Creating mobile-optimized item renderers based on LabelItemRenderer or IconItemRenderer is pretty straightforward. If all you want to change is the appearance and layout, override drawBackground() and layoutContents() respectively.
drawBackground() implements the backgroundColor of each item and separators between items. layoutContents() positions and sizes each part of the skin (labelDisplay, messageDisplay, and iconDisplay).
To achieve the rounded corner look in the screenshot above, I’ve done the following:
- Created a custom List skin that adds padding to the VerticalLayout
- Created a subclass of IconItemRenderer that adds styles for cornerRadius and a handful of border-related styles. The styles are implemented in drawBackground().