您的位置：首页 > 其它

【Flex4.6】TabBar组件运用【华丽篇】

2015-09-06 00:14 239 查看

第一步呢还是先建立个项目说起,如图1所示：

图1项目

2.接下来在我们应用程序里从组件库拖入一个tabBar组件,如图2所示

图2

3.查看属性面板，在面板里外观选项里单击箭头如图3所示:

图2

4.查看属性面板，在面板里外观选项里单击箭头如图3所示:

5.大家看下，下面代码重点就在项目项呈器里的组件，我们如果要修改导航按钮就要修改导航内置按钮组件外观方可达到效果：



<s:DataGroup id="dataGroup" width="100%" height="100%">

      <s:layout>

         <s:ButtonBarHorizontalLayout gap="-1"/>

      </s:layout>

      <s:itemRenderer>

         <fx:Component>

            <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />

         </fx:Component>

      </s:itemRenderer>

</s:DataGroup>

复制代码
6.那这样我们继续开始建立状态按钮组件，大家要记清楚不是普通按钮是状态按钮，点击下，就陷下去，在按下就弹上来，

就酱紫。我们选中ButtonBarButton改组件去设计面板看下属性，如图5所示：

7.改按钮继承了ToggleButton 状态按钮组件，并继承了 IItemRenderer 项呈器接口，所以我们重写改组件按钮方可，继续点

击外观右侧的箭头创建外观，如图6所示：

8.我们从状态标签</states>开始删除按钮的绘制的标签一直删除到<s:label>标签前停止。

9.在把代码报错找不到元素的相关函数删除方可。

10.我们在</states><s:label>这两个标签中间开始绘制我们的外观，请看下面代码：

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

<s:fill>

<s:SolidColor color="0xffffff" color.overAndSelected="0xe86c08"

         color.upAndSelected="0xe86c08"/>

</s:fill>

<s:filters>

&
4000
lt;s:DropShadowFilter angle="1" includeIn="overAndSelected,upAndSelected"/>

      </s:filters>

</s:Rect>

复制代码
我们绘制了个矩形以各个间距为0开始全部填出，初始状态为白色，当鼠标选择和鼠标离开状态变为橘黄色，以及添加了个滤镜，只在鼠标选择对象和鼠标离开状态则显示。

11.下面我们回到TabBarSkin文件里，在ButtonBarButton外观进行更换，代码如下：

<s:itemRenderer>

         <fx:Component>

            <s:ButtonBarButton skinClass="skin.ButtonBarButtonSkin" />

         </fx:Component>

      </s:itemRenderer>

复制代码
12.好了我们回到我们主应用程序里给我们组件添加些数据，然后导航才能显示，代码如下：

<s:TabBar x="214" y="125" fontFamily="微软雅黑" fontWeight="bold" labelField="name"

   skinClass="skin.TabBarSkin">

<s:ArrayCollection>

<fx:Object uid="1" name="刻意"/>

<fx:Object uid="2" name="dlamwz"/>

<fx:Object uid="3" name="大佬"/>

<fx:Object uid="4" name="凌乱"/>

<fx:Object uid="5" name="奶茶"/>

</s:ArrayCollection>

</s:TabBar>

复制代码
13.效果如图7所示：

14.导航外观基本是写完了具体怎么配好看大家可以随便用外观的颜色进行搭配比如下图所示：

好了本节就到这里，本教程主要是一个朋友催我几天了，我就特意给他做了个，既然杜乐乐不如众乐乐。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Flex flex4.6 Flex从浅入深组件

相关文章推荐

新的分享

章节导航