Removing the theme color from the Flex TileList

There have been a number of occasions when the designs for a UI implements some kind of grid layout to display its items. This is fairly simple to implement in flex by utilising the Flex TileList component. However more often than not the List’s item renderers are required to look after their own states. In this case the TileLists Indicators are no longer required.

I have found the easiest way to remove the TileLists indicators is to set the ThemeColor to the background color of whatever the List is being displayed on. But what happens if the background contains an image or has a transparency value?

To do this you need to override the TileLists drawSelectionIndicator and drawHighlightIndicator methods.


override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
/* we don't need to do anything in here*/
}
override protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
/* we don't need to do anything in here*/
}


Notice that the body to the above methods are empty. This is because we don’t want the indicators to draw anything behind the renderers when the state changes.

Now just don’t forget to cater for this inside your TileList’s item renderer else the user will get confused as to which item is selected and which item their mouse is over. We wouldn’t want that would we 🙂