CODEWITHSUNDEEP
actionscript-3apache-flexflex4.5itemrendererflex-mobile
ilbesculpi
ilbesculpi

Reputation: 328

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.

Upvotes: 0

Views: 717

Answers (2)

Mikhail Nitsenko
Mikhail Nitsenko

Reputation: 26

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"

Upvotes: 0

Yozef
Yozef

Reputation: 829

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>

Upvotes: 0

Related Questions