码迷,mamicode.com
首页 > 其他好文 > 详细

eui按钮式分类菜单栏实现步骤

时间:2017-10-20 13:19:50      阅读:546      评论:0      收藏:0      [点我收藏+]

标签:cal   provider   默认   pac   nta   选中   大小   创建   item   

完成图:

技术分享

 

一、创建按钮的ItemRenderer皮肤

1.根据设计图设置好舞台大小,添加一个image图片控件和一个label文本控件 并设置id

技术分享

2.设置label居中(约束)

技术分享

皮肤源码内属性为 verticalCenter="0" (垂直中心=0)horizontalCenter="0" (水平中心=0)

3.创建弹起和按下状态

技术分享

4.分别在两个状态下设置对应图片和文本设置 或 在源码中进行操作

技术分享

通过“属性名.状态名称”设置不同状态的图片 如上 source.up设置弹起状态图片 source.down设置按下状态图片 并根据需要设置九宫格 scale9Grid

技术分享

跟上面同理通过 “属性名.状态名称” 的方法设置 textColor.up设置弹起状态的文本颜色 textColor.down设置按下状态的文本颜色  设置文本内容为{data.text}

5.在皮肤对应ts文件中定义继承于eui.ItemRenderer 据说不用创建ts文件也可以

技术分享

 

二、显示在主界面上

1.在主界面的皮肤里创建一个Group放在要放的位置,在皮肤源码里把List写进这个Group中 并给List设置皮肤

技术分享

技术分享

再List里添加属性itemRenderer来设置List需要显示的皮肤 如上填写为ui.ill.illustratedSelectItemRenderer 其中ui.ill为namespace 后面为皮肤class类名 高度不设置让它根据内容撑开

由List包含的layout来包含设置的布局属性 如上为水平布局 间隙为4 也就是4个平均分布 如以下图内设置

技术分享

 

2.定义与设置用来显示itemRender皮肤的List数据源

技术分享

定义参数 let list =  [{text:"全部"},{text:"坦克"},{text:"输出"},{text:"辅助"}] 其中一个键值对 对应一个ItemRenderer皮肤用来显示在List中

最后给该List的dataProvider(数据源) 实例化一个用来装数据源的数据集合 eui.ArrayCollection(list) 传入上面定义的数据源list给ArrayCollection 这样在最终的List中就会显示出4个按钮而完成该按钮菜单栏

用List的selectedIndex来设置List的默认选中项 如上图设置为第一个也就是下标为0的项为默认选中

 

eui按钮式分类菜单栏实现步骤

标签:cal   provider   默认   pac   nta   选中   大小   创建   item   

原文地址:http://www.cnblogs.com/alwaysnear/p/7698671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!