actionscript-3 - DefaultComplexItemRenderer の背景アルファを 0 に設定する方法

Question

画像の tileLayout を持つ単純なリストがあります。私が見た例から、私は DefaultComplexItemRenderer を使用することになっているようです。それは機能し、画像の配列は正常に読み込まれますが、各アイテムの背景はしっかりしています。各画像の背後にある背景のアルファを 0 にする必要があります。どうすれば設定できますか?

過去に、カスタム itemRenderer を作成し、itemRenderers の drawBackground 関数をオーバーライドしましたが、DefaultComplexRenderer にはオーバーライドする drawBackground 関数がありません。

フレックスコードに別の簡単な解決策はありますか? または、誰かがカスタムの DefaultComplexRenderer を作成する方法を教えてくれたら最高です。

注: これは Flex MOBILE プロジェクトです。一部の itemRenderer がモバイルに対応していないことは知っています。Adobe は、「常に mxml ではなく AS3 でアイテムレンダラーを実行する」ように指示しているため、そのことを覚えておいてください。

ありがとう！

これが私のコードです：

    <fx:Declarations>
        <s:ArrayList id="arrList">
            <s:BitmapImage source="assets/images/one.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
            <s:BitmapImage source="assets/images/two.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
            <s:BitmapImage source="assets/images/three.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
            <s:BitmapImage source="assets/images/four.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
        </s:ArrayList>
    </fx:Declarations>



<s:List id="extrasList_list" width="100%" height="100%"
                        dataProvider="{arrList}"
                        itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
                        horizontalCenter="0"
                        verticalCenter="0">
                    <s:layout>
                        <s:TileLayout requestedColumnCount="-1"
                                      requestedRowCount="-1"
                                      horizontalGap="10"
                                      verticalGap="10"
                                      orientation="rows"
                                      columnAlign="justifyUsingWidth" 
                                      />
                    </s:layout>
                </s:List>

私が試したこと：

これは私のメインのcssファイルにあります...

s|DefaultComplexItemRenderer {
    contentBackgroundAlpha:0;
}

しかし、この警告が表示され、機能しません...

-Cannot resolve namespace qualified type 'DefaultComplexItemRenderer' in CSS selector 'DefaultComplexItemRenderer'

score 0 · Accepted Answer

[編集] Flex のcontentBackgroundAlphaとcontentBackgroundColorスタイルListはやや誤解を招きやすいです! 通常、アイテムレンダラーのスタイルを設定します。リストのコンテキストでは、これらのスタイルは、リストの周りに表示される小さな「クロム」にのみ影響します。レンダラーのスタイリングの詳細については、以下を参照してください。

画像を表示したいだけなら、IconItemRendererが最適です。モバイルLabelItemRenderer用に最適化されており、2 つのテキストフィールドもあります。

Flex List コンポーネントはアイテムレンダラーを効率的に再利用し、現在表示されているものを表示するために必要な数のレンダラーのみを作成します。これを行うために、リストはレンダラーのdataプロパティを設定します。dataしたがって、このプロパティを使用してアイテムレンダラーを構成する必要があります。

これを行う効率的な方法は、のセッター関数をオーバーライドすることですdata。拡張する新しい Actionscript クラスを作成し、IconItemRendererこれを追加します。

override public function set data(value:Object):void
{
    super.data = value;
    // IconItemRenderer already has a BitmapImage component, it's property name is iconDisplay
    // your ArrayList should therefore only contain Strings representing the image sources
    // note how I've changed your ArrayList in the declarations tag below
    iconDisplay.source = data.imageSource;
}

iconDisplayそのBitmapImage を構成して、希望どおりに表示することをお勧めします。上記のメソッドは頻繁に呼び出される可能性があるため、次のような Flex コンポーネントのライフサイクルメソッドをオーバーライドすることで、一度だけ実行する必要があるコードを別の場所に置くことができますcreateChildren()。

override protected function createChildren():void
{
    super.createChildren();
    iconDisplay.scaleMode="letterbox";
    iconDisplay.smooth=true;
}

List次に、次のような構文でレンダラーを使用するように指示します。

<s:List itemRenderer="com.yourdomain.or.whatever.MyIconItemRendererClass" />

レンダラーのスタイリング:

<s:List alternatingItemColors="[0xFFFFFF, 0xFFFFFF]" selectionColor="#FF0000" />

もう 1 つの方法は、モバイルアイテムレンダラーのdrawBackground()および/またはdrawBorder()保護されたメソッドをオーバーライドし、グラフィック API を使用して独自のものを描画する (またはまったく描画しない) ことです。

データの提供:

リストにコンポーネントの配列を与える代わりにBitmapImage、データを含むオブジェクトの配列を与えます。厳密に型指定されたオブジェクトを使用することをお勧めしますが、これも機能します。

<fx:Declarations>
        <s:ArrayList id="arrList">
            <fx:Object imageSource="assets/images/one.png" />
            <fx:Object imageSource="assets/images/two.png" />
            <fx:Object imageSource="assets/images/three.png" />
        </s:ArrayList>
</fx:Declarations>

Actionscript でレンダラーを作成するのが好きですがIconItemRenderer、上部のドキュメントへのリンクに MXML の例もあります。また、このレンダラーで 2 つのテキスト領域の値を設定する方法も示します ( とlabelFieldを使用messageField)。ラベル/メッセージ/アイコンの値を返す関数を指定することもできます ( labelFunction、messageFunction、およびを使用iconFunction)。

score -1 · Accepted Answer

setStyle('contentBackgroundAlpha', 0);DefaultComplexItemRendererで使用できるはずです。

100% これはあなたが探しているものではなく、このクラスにあまり詳しくありません。LabelItemRenderer を拡張してこれを使用している理由はありますか?

編集

IconItemRendererを拡張したいと思うかもしれません

このチュートリアルをチェックしてください

http://www.youtube.com/watch?v=EOpsDZaQrOI

score -1 · Accepted Answer

みんなを助けてくれてありがとう、しかし、SDKからDefaultComplexItemRenderをカスタムのものにコピーし、この1行のコードを変更するのと同じくらい簡単であることが最も迅速で簡単な解決策であることがわかりました

autoDrawBackground="false"

それは簡単で、うまくいきました。

actionscript-3 - DefaultComplexItemRenderer の背景アルファを 0 に設定する方法

3 に答える 3

Related

Reference