封装一个选项卡的UI,用来应付游戏中各种需要选项卡的界面。

例如背包,背包界面的选项卡可以切换装备、物品、符文、宝箱。

下图方法的实现参考:EUI ViewStack实现选项卡组件

假如在主页HomeScene中有一个选项卡UI,如下图:

TabView简单实现代码

  1. /**
  2. * 选项卡UI
  3. * @author chenkai 2018/8/3
  4. */
  5. class TabView{
  6. private radioGroup:eui.Group; //单选按钮
  7. private viewStack:eui.ViewStack; //层叠容器
  8.  
  9. public constructor() {
  10.  
  11. }
  12.  
  13. public init(radioGroup:eui.Group, viewStack:eui.ViewStack){
  14. //保存
  15. this.radioGroup = radioGroup;
  16. this.viewStack = viewStack;
  17.  
  18. //判断是否存在按钮
  19. let radioBtn:eui.RadioButton = radioGroup.getChildAt(0) as eui.RadioButton;
  20. if(radioBtn){
  21. //给radioBtn赋值
  22. let len = radioGroup.numChildren;
  23. for(let i=0;i<len;i++){
  24. (radioGroup.getChildAt(i) as eui.RadioButton).value = i;
  25. }
  26. //监听radioBtn切换
  27. radioBtn.group.addEventListener(eui.UIEvent.CHANGE, this.onChange ,this);
  28. //默认选择第一项
  29. radioBtn.selected = true;
  30. }
  31. }
  32.  
  33. //radioBtn切换时,切换viewStack
  34. private onChange(e:eui.UIEvent){
  35. let radioGroup:eui.RadioButtonGroup = e.target;
  36. this.viewStack.selectedIndex = radioGroup.selectedValue;
  37. }
  38. }

  

在HomeScene里,创建TabView。

  1. class HomeScene extends eui.Component{
  2. private radioGroup:eui.Group;
  3. private viewStack:eui.ViewStack;
  4.  
  5. private tabView:TabView;
  6.  
  7. public constructor() {
  8. super();
  9. this.skinName = "HomeSceneSkin";
  10. }
  11.  
  12. protected childrenCreated(){
             //创建TabView
  13. this.tabView = new TabView();
    //将HomeScene里的单选按钮和层叠容器,赋值给TabView进行初始化
  14. this.tabView.init(this.radioGroup, this.viewStack);
  15. }
  16.  
  17. }

  

选项卡完成

EUI ViewStack实现选项卡组件 (封装了一个UI类)的更多相关文章

  1. EUI ViewStack实现选项卡组件

    一  TabBar+ViewStack实现 这个教程确实没看懂...贼麻烦... 二 RadioButton+ViewStack 在exml中拖动组件RadioButton和ViewStack 设置e ...

  2. SpringMVC 中,当前台传入多个参数时,可将参数封装成一个bean类

    在实际业务场景中,当前台通过 url 向后台传送多个参数时,可以将参数封装成一个bean类,在bean类中对各个参数进行非空,默认值等的设置. 前台 url ,想后台传送两个参数,userName 和 ...

  3. 个人封装的一个Camera类

    好久不写博客了,代码写了不少,但大多数都是拿来主义,要不是网上,要不就是自己曾经的代码拼装. 新工作是搞Android开发的,近期任务要求我封装一个Carmera类,自己也认为还是封装以后方便使用,弄 ...

  4. 将CRUD封装到一个工具类中

    package org.zln.hibernate.utils; import org.hibernate.Session; import org.hibernate.SessionFactory; ...

  5. Directx11学习笔记【二十一】 封装键盘鼠标响应类

    原文:Directx11学习笔记[二十一] 封装键盘鼠标响应类 摘要: 本文由zhangbaochong原创,转载请注明出处:http://www.cnblogs.com/zhangbaochong/ ...

  6. 自己封装的一个LoadRes组件

    这两周一直太忙,没有好好处理上上上周遇到的一个让我加班到凌晨的问题,这个问题是判断flash的加载. 之前的思路是让flash的人在制作flash的时候,加入了一个回调方法,该方法再会回调我页面的方法 ...

  7. 自己封装的一个JS分享组件

    因为工作的需求之前也封装过一个JS分享插件,集成了我们公司常用的几个分享平台. 但是总感觉之前的结构上很不理想,样式,行为揉成一起,心里想的做的完美,实际上总是很多的偏差,所以这次我对其进行了改版. ...

  8. Linux组件封装(五)一个生产者消费者问题示例

    生产者消费者问题是计算机中一类重要的模型,主要描述的是:生产者往缓冲区中放入产品.消费者取走产品.生产者和消费者指的可以是线程也可以是进程. 生产者消费者问题的难点在于: 为了缓冲区数据的安全性,一次 ...

  9. 看JQ时代过来的前端,如何转换思路用Vue打造选项卡组件

    前言 在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来, ...

随机推荐

  1. 【玩转Golang】slice切片的操作——切片的追加、删除、插入等

    一.一般操作 1,声明变量,go自动初始化为nil,长度:0,地址:0,nil func main(){ var ss []string; fmt.Printf("length:%v \ta ...

  2. 小企业是否能用得上"ITIL"?

    在小型IT部门中,明显存在着迫切的IT管理需求.但目前主流ITSM解决方案的价格.实施周期.复杂程度.对人力资源的占用等使他们难以承受.     浦发机械公司的计算机部经理老张带着十几个员工,经过数年 ...

  3. springboot+elasticsearch配置实现

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. springboot+jps+druid项目搭建

    pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  5. docker开启api端口,docker启用加速

    此篇是针对centos6的docker,注意ubantu和centos7的会有区别. 需要在docker配置文件中修改信息 centos中是这个文件 /etc/sysconfig/docker,Ubu ...

  6. 8 -- 深入使用Spring -- 7...3 让Spring管理控制器

    8.7.3 让Spring管理控制器 让Spring容器来管理应用中的控制器,可以充分利用Spring的IoC特性,但需要将配置Struts 2 的控制器部署在Spring容器中,因此导致配置文件冗余 ...

  7. 18个不常见的C#关键字,您使用过几个?

    转自:http://www.cnblogs.com/zhuqil/archive/2010/04/09/UnCommon-Csharp-keywords-A-Look.html 1.__arglist ...

  8. RFC文件

    RFC(Request For Comments)-意即“请求评议”,包含了关于Internet的几乎所有重要的文字资料.如果你想成为网络方面的专家,那么RFC无疑是最重要也是最经常需要用到的资料之一 ...

  9. 【GIS】WGS84与Web墨卡托理解(转)

    坐标系 · WGS84,地理坐标系,单位度,在三维上可以很好的展示全球的数据,但在二维上显示时在高纬度地区变形较大,另由于WGS84坐标系与CGCS2000坐标系差异很小,所以WGS84坐标系在Web ...

  10. python virtualenv安装说明

    环境说明: virtualenv安装: 第一步,创建目录code: 第二步,创建一个独立的Python运行环境,命名为venv: 新建的Python环境被放到当前目录下的venv目录. 第三步,有了v ...