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

EUI ViewStack实现选项卡组件 (封装了一个UI类)

时间:2018-08-03 19:49:36      阅读:318      评论:0      收藏:0      [点我收藏+]

标签:保存   组件   radio   cto   index   new   代码   listener   初始化   

 

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

技术分享图片

 

 

TabView简单实现代码

/**
 * 选项卡UI
 * @author chenkai 2018/8/3
 */
class TabView{
	private radioGroup:eui.Group;    //单选按钮
	private viewStack:eui.ViewStack; //层叠容器

	public constructor() {

	}

	public init(radioGroup:eui.Group, viewStack:eui.ViewStack){
		//保存
		this.radioGroup = radioGroup;
		this.viewStack = viewStack;

		//判断是否存在按钮
		let radioBtn:eui.RadioButton = radioGroup.getChildAt(0) as eui.RadioButton;
		if(radioBtn){
			//给radioBtn赋值
			let len = radioGroup.numChildren;
			for(let i=0;i<len;i++){
				(radioGroup.getChildAt(i) as eui.RadioButton).value = i;
			}
			//监听radioBtn切换
			radioBtn.group.addEventListener(eui.UIEvent.CHANGE, this.onChange ,this);
			//默认选择第一项
			radioBtn.selected = true;
		}
	}	

	//radioBtn切换时,切换viewStack
	private onChange(e:eui.UIEvent){
		let radioGroup:eui.RadioButtonGroup = e.target;
        this.viewStack.selectedIndex = radioGroup.selectedValue;
	}
}

  

在HomeScene里,创建TabView。

class HomeScene extends eui.Component{
	private radioGroup:eui.Group;
	private viewStack:eui.ViewStack;

	private tabView:TabView;

	public constructor() {
		super();
		this.skinName = "HomeSceneSkin";
	}

	protected childrenCreated(){
         //创建TabView this.tabView = new TabView();
//将HomeScene里的单选按钮和层叠容器,赋值给TabView进行初始化 this.tabView.init(this.radioGroup, this.viewStack); } }

  

 选项卡完成

技术分享图片

 

EUI ViewStack实现选项卡组件 (封装了一个UI类)

标签:保存   组件   radio   cto   index   new   代码   listener   初始化   

原文地址:https://www.cnblogs.com/gamedaybyday/p/9415790.html

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