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;
 }

Advertisements

Tags: , , , , , ,

One Response to “Rounded Corners on Highlight and Selection Indicators for TileList”

  1. Torax Says:

    Thank you – exactly what I needed.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: