Egret EUI Tab + ViewStack

reference:

Egret Tutorial - Tab

 

Many games tab UI.

Tutorials official website said is not clear. Used to be written in itself. Here achieve the look with Eui Tab + ViewStack.

 

 

 

1. Create a new entry in the skin Tab

The first is the display button up Image

The second is the display button to select Image

Label Label third set of {data}, ViewStack for displaying the content name

 

Exml into the source code, set up the first picture visible.down = "false", set up the second picture visible.disabled = "false", visible.up = "false"

 

2. Drag a Tab component to the Stage

To set the ID tab, the entry for the skin TabBarSkin, the layout is arranged horizontally HorizontalLayout.

 

Exml source into the provided data source dataProvider = "viewStack", the first to set the default selection selectedIndex = "0"

 

 

 3 Drag a ViewStack to the Stage

Provided Viewstack ID for viewstack

Drag three buttons (or custom UI) to the lower viewstack, three button switch is equivalent to three pages.

 

 

Exml source enters, set button name, this name will be mapped to the {data} Labe on TabBarSkin.

 

 

4 code operating tab + viewstack

tab listening ITEM_TAP event

/**
 * Home
 * @author chenkai 2020.2.16
 */
class HomeScene extends eui.Component{
	public tab:eui.TabBar;
	public viewStack:eui.ViewStack;

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

	protected childrenCreated(){
		this.tab.addEventListener(eui.ItemTapEvent.ITEM_TAP, this.itemTap, this);
	}

	private itemTap(e:eui.ItemTapEvent){
		                                           //当点击第一个选项卡按钮时，下面输出为
		console.log(e.itemIndex, e.itemRenderer);  //0
		console.log(e.itemRenderer);               //第一个选项按钮实例
		console.log(this.viewStack.selectedIndex); //0 
		console.log(this.viewStack.selectedChild); //viewstack下的第一个Button实例
	}
}

　　

 实际效果：

 

问题：

1. 当按钮样式不同时，怎么整？

因为Tab用的条目皮肤是TabBarSkin是一个皮肤，当3个按钮，每个按钮外观不同时，就用不了了。

Laya的Tab+Viewstack使用方便，支持使用统一皮肤和特有皮肤，Egret如果要实现，得自己写自定义组件了。