置きスパークにTabBar（+下向きの角を丸めた）

Question

<s:VGroup horizontalAlign="center" horizontalCenter="0" verticalCenter="0" gap="0"> 
    <mx:ViewStack id="view" width="450" height="300" /> 
    <!-- NavigatorContent dynamically gets added to view on appComplete--> 
    <s:TabBar dataProvider="{view}" skinClass="skins.CustomSparkTabBarSkin" /> 
</s:VGroup> 

カスタムスキン：

<s:Skin 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"  
alpha.disabled="0.5"><fx:Metadata> 
    <![CDATA[ 
    [HostComponent("spark.components.TabBar")] 
    ]]> 
</fx:Metadata> 

<fx:Script fb:purpose="styling" > 
    <![CDATA[ 

    import mx.core.UIComponent; 

    /** Push the cornerRadius style to the item renderers.*/ 
    override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void { 
     const numElements:int = dataGroup.numElements; 
     const cornerRadius:int = hostComponent.getStyle("cornerRadius"); 

     for (var i:int = 0; i < numElements; i++) { 
      var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent; 
      if (elt) 
       elt.setStyle("cornerRadius", cornerRadius); 
     } 
     super.updateDisplayList(unscaledWidth, unscaledHeight); 
    } 

    ]]>    
</fx:Script> 
<s:states> 
    <s:State name="normal" /> 
    <s:State name="disabled" /> 
</s:states> 
<!--- @copy spark.components.SkinnableDataContainer#dataGroup --> 
<s:DataGroup id="dataGroup" width="100%" height="100%"> 

のようなものに出てきますso：http://yozef.com/files/tabExample.png

私はそのTabBarをビューストラップの底に置きたいと思います。丸みを帯びたコーナーは外向きです。

Answer 1

デザインモード中... アウトラインビューのTabBarをクリックし、プロパティビューでスキンの横にあるドロップダウンをクリックし、スキンの作成を選択します。ソースビューに切り替えて見つけますButtonBarButtonを追加し、rotation = "180"を追加します（これはほとんど何でもできますが、テキストは逆さまになります）。デザインビュー（TabBarカスタムスキンで）に戻り、アウトラインビューのButtonBarButtonをクリックし、プロパティビューでSkinの横にあるドロップダウンをクリックし、Create Skin ...を選択します。アウトラインビューでlabelDisplayを見つけ、rotation = "180"を追加します。

これは、探している場合は、カスタムButtonBarButtonスキンの他の値を調整する必要があるかもしれませんテキストが正確にあなたが好きな場所でない場合...