Flex for mobile: Is it possible to make list items transparents?
Is it possible in Flex (for mobile apps) to render list items with transparent background?
My app design includes a background that should remain visible.
I've tried setting the contentBackgroundAlpha to 0, but that doesn't affect the item renderers. Also, I've tried alternatingItemColors="[0xffffffff, 0xffffffff]", but they're still opaque.
Are there any other workaround? Is that even possible?
Thanks.
I think you are looking for the property: contentBackgroundAlpha="0"
and then in your ItemRenderer:
override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
{
// transparent background for hit detection
graphics.beginFill(0xFFFFFF, 0);
graphics.lineStyle();
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
// turn off opaqueBackground since this renderer has some transparency
opaqueBackground = null;
if (selected || hovered) {
this.setStyle('color', 0x94734D);
}
}
]]>
</fx:Script>
Here's my implementation:
1) Add this to your custom IconItemRenderer for List:
override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
{
if (itemIndex % 2 == 0)
{
graphics.beginFill(0xFFFFFF, 0);
graphics.lineStyle();
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
else
{
// transparent background for hit detection
graphics.beginFill(0x004f94, 0.1);
graphics.lineStyle();
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
opaqueBackground = null;
if (selected)
{
// transparent background for hit detection
graphics.beginFill(0x004f94, 0.2);
graphics.lineStyle();
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
}
2) Add this to your List properties:
contentBackgroundAlpha="0.5"
alpha="0.5"