1

現在、Flex Mobile を使用してモバイル アプリケーションを開発しているため、物事を最終決定し、視覚的なレイアウトを微調整するところまで来ました。私のアプリケーションは TabbedViewNavigatorApplication を使用してセクションに組み込まれているため、 TabbedViewNavigator #tabBar タブに表示されるアイコンを追加して微調整したいと考えていました。これは数分かかるように思えるタスクの 1 つで、最終的には Adob​​e API ドキュメントを検索して何時間もグーグルで検索し、最終的には数日で解決策を見つけました。誰かがそれを必要とし、自分の特定の状況でそれを使用することを期待して、私のソリューションを投稿したいと言った.

ここで最初に言及することは、Adobe にはデフォルトで Spark コンポーネントをスキニングするための広範なヘルプ ライブラリがありますが、最終的には、これらの例は特定の状況や実装で必要なものの表面をなぞるだけであることが多いということです。

最初に、私はmxmlスキンの使用を避け、常にClassReferenceを使用して AS3 クラスでスパーク スキニング ジョブを実行すると言いたいと思います。このアプローチは、mxml で過度にスパムを送信するよりもはるかに柔軟で、エレガントで、クリーンであるように思えます。実装が難しい場合もありますが。

したがって、典型的な最小限の TabbedViewNavigator アプリケーションは次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" applicationComplete="onApplicationComplete(event)">

<fx:Style source="MyStyles.css" />

    <fx:Script>
        <![CDATA[
            import spark.components.ViewNavigator;

            private function onApplicationComplete(e:Event):void {
                for each(var vn : ViewNavigator in this.navigators){
                   /// do something with your VN's ...
                   vn.icon = "./assets/myFaboulousIcon.png";
                }
            }           

        ]]>
    </fx:Script>

    <s:ViewNavigator label="one" width="100%" height="100%" firstView="views.oneView"/>
    <s:ViewNavigator label="two" width="100%" height="100%" firstView="views.twoView"/>
    <s:ViewNavigator label="three" width="100%" height="100%" firstView="views.threeView"/>

</s:TabbedViewNavigatorApplication>

この典型的な構成では、ViewNavigatorのアイコン プロパティにアクセスし、mxml または AS3 (上記の for ループなど) から設定することができます。最終的には、switch ステートメントを追加して、各タブの異なるアイコンを選択します ... しかし、それはあなたの物語は終わります。ViewNavigator アイコン プロパティは、特定のViewNavigatorがビジュアル コンポーネントによって表されるときに使用されます。つまり、#tabBar では、ViewNavigatorはナビゲーター スタックの一部として視覚的に表現され、論理的です。この状況では、指定されたアイコンを使用します。

ここで、アルファを変更したり、プログラムでアイコンに色を付けたりしたいとします。つまり、常に 1 つのアイコン セットを使用しますが、さまざまな状況では、さまざまな視覚的プロパティを与えます。これらの状況の 1 つは、アプリケーションでの視覚的な魅力です。 #tabBar.

icon プロパティはアイコン イメージ ファイルへのパスであり、型としては汎用オブジェクトです。したがって、アルファを変更したり、アルファを使用して他のことを行うことはできません。どちらのアイコン プロパティも、アイコン自体を含む表示オブジェクトへの参照や、ジューシーな AS3 ジョングラリー ポーカーに必要なものへの参照を提供しません ...

そのようなタスクのために、(AS3 で) 素敵なスパーク スキニングを行う必要があります ;) ですから、下記の回答をお読みください。

4

1 に答える 1

1

最初のステップは、上記のMyStyles.cssの例から css ファイルを追加することです(私は常に css 内からスキン クラスの参照を行います。必要に応じて簡単に管理および変更できることがわかりました) ...

/* MyStyle.css example */

.
.

s|TabbedViewNavigator #tabBar {
    skinClass: ClassReference("com.myapp.skins.TabBarSkin");
}

.
.

次のようなカスタムTabBarSkinクラスを定義する必要があります。

/* TabBarSkin Class */
package com.myapp.skins
{
    import spark.skins.mobile.TabbedViewNavigatorTabBarSkin;
    import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
    import spark.components.ButtonBarButton;

    public class TabBarSkin extends TabbedViewNavigatorTabBarSkin
    {
        public function TabBarSkin() {
            super();
        }

        override protected function createChildren():void
        {
            if (!firstButton) {
                firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
                firstButton.skinClass = TabBarFirstTabSkin;
            }

            if (!lastButton) {
                lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
                lastButton.skinClass = TabBarLastTabSkin;
            }

            if (!middleButton) {
                middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
                middleButton.skinClass = TabBarLastTabSkin;
            }

            super.createChildren();
        }
    }
}

詳細はあまり説明しませんが、このカスタム クラスTabBarSkinは、#tabBar内の重要なタブ位置 / 最初 / 中間 / 最後 / のそれぞれに対して 3 つのスキン クラスを持つTabbedViewNavigatorTabBarSkinから継承することを知っておく必要があります。最も単純な状況では、/ first / と / last -> の 2 つを実装 (拡張) する必要があります。これは、/ mid / 位置も / last / スキンを使用するためです。この場合、個別に実装する必要はありません。

/* TabBarFirstTabSkin Class */
package com.myapp.skins
{
    import spark.components.Group;
    import spark.skins.mobile.TabbedViewNavigatorTabBarFirstTabSkin;

    public class TabBarFirstTabSkin extends TabbedViewNavigatorTabBarFirstTabSkin
    {   
        private var __iconGroup : Group = null;

        public function TabBarFirstTabSkin() {
            super();
        }

        override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
            super.layoutContents(unscaledWidth, unscaledHeight);    
            if(!__iconGroup) {
                __iconGroup = getIconDisplay() as Group;
            }
        }
    }
}

/ last / one と同じ:

/* TabBarLastTabSkin Class */
package com.myapp.skins
{

    import spark.components.Group;
    import spark.skins.mobile.TabbedViewNavigatorTabBarLastTabSkin;

    public class TabBarLastTabSkin extends TabbedViewNavigatorTabBarLastTabSkin
    {

         private var __iconGroup : Group = null;

         public function TabBarLastTabSkin() {
              super();
         }

        override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
            super.layoutContents(unscaledWidth, unscaledHeight);    
            if(!__iconGroup) {
                __iconGroup = getIconDisplay() as Group;                
            }
        }
    }
}

最後に、__iconGroupメンバーは、アイコンを含む Group ビジュアル コンポーネントへの参照を持つようになります! -> mxml /またはAS3コードを介してViewNavigatorインスタンスで定義したもの。これで、ダーティになることができます ;) たとえば、次のようなことを行います。

.
.
.

var colorTransform : ColorTransform = new ColorTransform();
colorTransform.color = 0xFF3300;
colorTransform.alphaMultiplier = 0.85;
__iconGroup.transform.colorTransform = colorTransform;

.
.
.

これにより、アイコンが赤く色付けされ、アルファ 0.85 が得られます。など ... これは、Flex Mobile で spark #tabBar スキニングを使用して実行できる基本です。希望は誰かを助けるでしょう。乾杯。

于 2012-12-05T15:09:37.580 に答える