Adding Rounded Corners and Other Styles to Mobile Lists

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:

  1. Created a custom List skin that adds padding to the VerticalLayout
  2. Created a subclass of IconItemRenderer that adds styles for cornerRadius and a handful of border-related styles. The styles are implemented in drawBackground().
One thing to point out about the custom list skin. I’ve used padding on the layout here instead of constraints to achieve the same look. This lets me do 2 things (1) use 100% width and height on the List in my View and (2) justifies the VScrollBar to the right side of the View.
Share on Facebook