TabNavigator自定义Tab

最新推荐文章于 2020-06-21 23:12:59 发布

原创最新推荐文章于 2020-06-21 23:12:59 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layer #encoding #library #border #c

本文介绍如何使用自定义样式改变TabNavigator的外观，并提供了具体的SCC代码实现，包括未选中和选中状态的皮肤设计。

通过自定义TabNavigator 样式 tabStyleName 来改变Tab的外观。

样式的SCC代码：

.myTab

{

up-skin:ClassReference("skins.TabNavigatorTabSkin");

down-skin:ClassReference("skins.TabNavigatorTabSkin");

over-skin:ClassReference("skins.TabNavigatorTabSkin");

disabled-skin:ClassReference("skins.TabNavigatorTabSkin");

selected-up-skin:ClassReference("skins.TabNavigatorTabSelectedSkin");

selected-down-skin:ClassReference("skins.TabNavigatorTabSelectedSkin");

selected-over-skin:ClassReference("skins.TabNavigatorTabSelectedSkin");

selected-disabled-skin:ClassReference("skins.TabNavigatorTabSelectedSkin");

}

其中的TabNavigatorTabSkin和TabNavigatorTabSelectedSkin为两个自定义的皮肤，可以定义如下：

1.TabNavigatorTabSkin

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

minWidth="21" minHeight="21">

<s:Rect left="1" right="1" top="1" bottom="0" >

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0xf3f8fb" alpha="1" />

<s:GradientEntry color="0xd3eaf8" alpha="1" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<s:Rect left="1" right="1" top="1" bottom="1" alpha=".22" >

<s:stroke>

<s:LinearGradientStroke rotation="90">

<s:GradientEntry color="0xFFFFFF" alpha="1" />

<s:GradientEntry color="0xD8D8D8" alpha="1" />

</s:LinearGradientStroke>

</s:stroke>

</s:Rect>

<s:Rect left="1" right="1" top="1" bottom="1" >

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0xFFFFFF"

ratio="0.0"

alpha="0.12"/>

<s:GradientEntry color="0xFFFFFF"

ratio="0.48"

alpha="0.12" />

<s:GradientEntry color="0xFFFFFF"

ratio="0.48001"

alpha="0" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<s:Rect left="0" right="0" top="0" bottom="0">

<s:stroke>

<s:SolidColorStroke color="0xbed1d7" alpha="1" />

</s:stroke>

</s:Rect>

</s:SparkSkin>

2.TabNavigatorTabSelectedSkin：

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

minWidth="21" minHeight="21">

<s:Rect left="1" right="1" top="1" bottom="0" >

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry

color="0xd3f0fe"

alpha="1" />

<s:GradientEntry

color="0x67c4ed"

alpha="1" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<s:Rect left="1" right="1" top="1" bottom="1" alpha=".22" >

<s:stroke>

<s:LinearGradientStroke rotation="90">

<s:GradientEntry color="0xFFFFFF" alpha="1" />

<s:GradientEntry color="0xD8D8D8" alpha="1" />

</s:LinearGradientStroke>

</s:stroke>

</s:Rect>

<s:Rect left="1" right="1" top="1" bottom="1" >

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0xFFFFFF"

ratio="0.0"

alpha="0.12"/>

<s:GradientEntry color="0xFFFFFF"

ratio="0.48"

alpha="0.12" />

<s:GradientEntry color="0xFFFFFF"

ratio="0.48001"

alpha="0" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<s:Rect left="0" width="1" top="0" bottom="0" >

<s:fill>

<s:SolidColor color="0x66a8c2" alpha="1" />

</s:fill>

</s:Rect>

<s:Rect left="1" right="1" top="0" height="1" >

<s:fill>

<s:SolidColor color="0x66a8c2" alpha="1" />

</s:fill>

</s:Rect>

<s:Rect width="1" right="0" top="0" bottom="0" >

<s:fill>

<s:SolidColor color="0x66a8c2" alpha="1" />

</s:fill>

</s:Rect>

</s:SparkSkin>