Поместите искры TabBar на нижней части ViewStacks (+ закругленные углы, направленные вниз) - PullRequest
Новая
       14

Поместите искры TabBar на нижней части ViewStacks (+ закругленные углы, направленные вниз)

0 голосов
/ 22 ноября 2010 
<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%">


Получается что-то вроде этого: http://yozef.com/files/tabExample.png

Я хотел бы разместить этот TabBar в нижней части стека просмотра, закругленные углы направлены наружу.

1 Ответ

0 голосов
/ 22 ноября 2010

Начиная с нуля ... В режиме дизайна ... Нажмите TabBar в представлении Outline, в представлении свойств щелкните раскрывающийся список рядом с Skin и выберите Create Skin ... Переключитесь в исходное представление и найдите ButtonBarButton и добавьте в него вращение = "180" ... (Это почти что вам нужно, но текст будет перевернутым) Вернитесь в представление дизайна (в вашей пользовательской обложке TabBar) и нажмите кнопку ButtonBarButton в представлении структуры, а в представлении свойств щелкните раскрывающийся список рядом с обложкой и выберите «Создать обложку» ... в представлении Outline найдите labelDisplay и добавьте вращение = "180"

это самый быстрый способ, который я могу придумать для достижения того, что вы ищете, вы можете обнаружить, что хотите настроить другие значения в пользовательском скине ButtonBarButton, если текст не совсем там, где вам это нравится .. .

...