Rounded Corners on Highlight and Selection Indicators for TileList

The TileList class has to be extended, and the following methods in the the TileList class need to be overridden:

• drawSelectionIndicator
• drawHighlightIndicator

TileList inherits from ListBase, and the source functions to override can be viewed here.

Example of how to extend the TileList class can be viewed in this very helpful post by Charlie Key.

The code below adds rounded corners to the selection and highlight indicators of the tilelist.

Rounded Corners TileList Items

override protected function drawSelectionIndicator(indicator:Sprite, x:Number,
    y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
 {
    var g:Graphics = Sprite(indicator).graphics;
    g.clear();
    g.beginFill(color);
    g.drawRoundRect(0,0,width, height,20,20);
    g.endFill();

    indicator.x = x;
    indicator.y = y;
 }

 override protected function drawHighlightIndicator(indicator:Sprite, x:Number,
    y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void{

    var g:Graphics = Sprite(indicator).graphics;
    g.clear();
    g.beginFill(color);
    g.drawRoundRect(0,0,width, height,20,20);
    g.endFill();

    indicator.x = x;
    indicator.y = y;
 }

Tags: Customising, Flex, Highlight, Rounded Corners, Selection Indicator, Selection Indicators, TileList