目标 ： 实现Tabbar也签的通用。
一 ： 美术资源的准备（自己做的 ， 很挫 ， 勿喷 ）如下
二 ： 通用页签ItemRenderer的皮肤 如下
三 ：tabbar的测试UI皮肤 如下
四 ：ItemRenderer的实现
module common{
/**
* 通用的页签CELL
* @author Husz
*/
export class common_TabBarCell extends eui.ItemRenderer{
private img_yes : eui.Image = null;
private img_no : eui.Image = null;
private img_txt : eui.Image = null;
public constructor(){
super();
this.skinName = "resource/common_skins/common_TabBarCell.exml";
}
protected createChildren():void{
super.createChildren();
}
protected dataChanged() : void{
let $dataModel : common_TabBarCell_Data = <common_TabBarCell_Data>this.data;
this.handlerBackGround( $dataModel );
this.handlerTxt( $dataModel );
}
/**
* 处理背景
* @param {common.common_TabBarCell_Data} $dataModel
*/
private handlerBackGround( $dataModel : common_TabBarCell_Data ) : void{
let $selected : boolean = $dataModel._selected;
this.img_yes.visible = $selected;
this.img_no.visible = !$selected;
}
/**
* 处理文本
* @param {common.common_TabBarCell_Data} $dataModel
*/
private handlerTxt( $dataModel : common_TabBarCell_Data ) : void{
let $textPathRes : string = "";
if($dataModel._selected == true){
$textPathRes = $dataModel._yes_txt_res;
}else{
$textPathRes = $dataModel._no_txt_res;
}
this.img_txt.source = RES.getRes($textPathRes);
}
/**
* 是否已经处于选择的状态（只读。。。。。。）
* @returns {boolean}
* @constructor
*/
public get IsSelected() : boolean{
let $dataModel : common_TabBarCell_Data = <common_TabBarCell_Data>this.data;
return $dataModel._selected;
}
}
/**
* 通用的页签CELL的数据模型
* @author Husz
*/
export interface common_TabBarCell_Data{
/**数据的下标*/
_index : number;
/**是否处于选择状态*/
_selected : boolean;
/**选择状态下的美术文本资源*/
_yes_txt_res : string;
/**未选择状态下的美术文本资源*/
_no_txt_res : string;
}
}五 ： TabBarDemoView UIDemo实现
module app{
import common_TabBarCell = common.common_TabBarCell;
import common_TabBarCell_Data = common.common_TabBarCell_Data;
/**
* 此UI面板测试通用的Tabbar页签Cell
* @author Husz
*/
export class TabBarDemoView extends eui.Component implements eui.UIComponent{
private bar_target : eui.TabBar = null;
private con_0 : eui.Group = null;
private con_1 : eui.Group = null;
private _data2TabBar_arr : Array<common_TabBarCell_Data> = null;
private _cur_index2TabBar : number = 0;
private _all_channel : Array<eui.Group> = null;
public constructor(){
super();
this.skinName = "resource/eui_skins/TabBarDemoSkin.exml";
}
protected childrenCreated():void{
super.childrenCreated();
this._all_channel = [
this.con_0,
this.con_1
];
this.handlerListener2Tabber( true );
this.initView2Tabbar();
}
private handlerListener2Tabber( $isAdd : boolean ) : void{
if( $isAdd ){
if( !this.bar_target.hasEventListener(eui.ItemTapEvent.ITEM_TAP) )
this.bar_target.addEventListener( eui.ItemTapEvent.ITEM_TAP , this.onTabbarItemClick , this );
}else{
if( this.bar_target.hasEventListener(eui.ItemTapEvent.ITEM_TAP) )
this.bar_target.removeEventListener( eui.ItemTapEvent.ITEM_TAP , this.onTabbarItemClick , this );
}
}
/**
* 处理页签切换
* @param {eui.ItemTapEvent} $e
*/
private onTabbarItemClick( $e : eui.ItemTapEvent ) : void{
if( this._cur_index2TabBar != $e.itemIndex ){
this._cur_index2TabBar = $e.itemIndex;
let $dataCell : common_TabBarCell_Data = null;
let $count : number = 0;
for( let $i : number = 0 , $j :number = this._data2TabBar_arr.length ; $i < $j ; $i ++ ){
$dataCell = this._data2TabBar_arr[$i];
if( $dataCell._index == this._cur_index2TabBar ){
$dataCell._selected = true;
$count ++;
}else{
if( $dataCell._selected != false ){
$dataCell._selected = false;
$count ++;
}
}
if($count >= 2){
break;
}
}
//切换频道
this.channelChange();
this.bar_target.dataProvider = new eui.ArrayCollection( this._data2TabBar_arr );
}
}
/**
* 初始化页签数据
*/
private initData2Tabbar() : void{
this._data2TabBar_arr = [
{
_index : 0,
_selected : true,
_yes_txt_res : "A_1_png",
_no_txt_res : "A_0_png"
},
{
_index : 1,
_selected : false,
_yes_txt_res : "B_1_png",
_no_txt_res : "B_0_png"
}
];
this._cur_index2TabBar = 0;
}
/**
* 初始化页签
*/
private initView2Tabbar() : void{
this.initData2Tabbar();
this.bar_target.itemRenderer = common_TabBarCell;
this.bar_target.dataProvider = new eui.ArrayCollection( this._data2TabBar_arr );
this.channelChange();
}
/**
* 频道切换(显隐)
*/
private channelChange() : void{
let $cell : eui.Group = null;
for( let $i : number = 0 , $j : number = this._all_channel.length ; $i < $j ; $i ++ ){
$cell = this._all_channel[$i];
$cell.visible = $i == this._cur_index2TabBar;
}
}
/**
* 销毁
*/
public destory() : void{
this.handlerListener2Tabber(false);
}
}
}六 ： 效果
module app{
import common_TabBarCell = common.common_TabBarCell;
import common_TabBarCell_Data = common.common_TabBarCell_Data;
/**
* 此UI面板测试通用的Tabbar页签Cell
* @author Husz
*/
export class TabBarDemoView extends eui.Component implements eui.UIComponent{
private bar_target : eui.TabBar = null;
private con_0 : eui.Group = null;
private con_1 : eui.Group = null;
private _data2TabBar_arr : Array<common_TabBarCell_Data> = null;
private _cur_index2TabBar : number = 0;
private _all_channel : Array<eui.Group> = null;
private _arrayCollection : eui.ArrayCollection = null;
public constructor(){
super();
this.skinName = "resource/eui_skins/TabBarDemoSkin.exml";
}
protected childrenCreated():void{
super.childrenCreated();
this._all_channel = [
this.con_0,
this.con_1
];
this.handlerListener2Tabber( true );
this.initView2Tabbar();
}
private handlerListener2Tabber( $isAdd : boolean ) : void{
if( $isAdd ){
if( !this.bar_target.hasEventListener(eui.ItemTapEvent.ITEM_TAP) )
this.bar_target.addEventListener( eui.ItemTapEvent.ITEM_TAP , this.onTabbarItemClick , this );
}else{
if( this.bar_target.hasEventListener(eui.ItemTapEvent.ITEM_TAP) )
this.bar_target.removeEventListener( eui.ItemTapEvent.ITEM_TAP , this.onTabbarItemClick , this );
}
}
/**
* 处理页签切换
* @param {eui.ItemTapEvent} $e
*/
private onTabbarItemClick( $e : eui.ItemTapEvent ) : void{
if( this._cur_index2TabBar != $e.itemIndex ){
this._cur_index2TabBar = $e.itemIndex;
let $dataCell : common_TabBarCell_Data = null;
let $count : number = 0;
for( let $i : number = 0 , $j :number = this._data2TabBar_arr.length ; $i < $j ; $i ++ ){
$dataCell = this._data2TabBar_arr[$i];
if( $dataCell._index == this._cur_index2TabBar ){
$dataCell._selected = true;
this._arrayCollection.replaceItemAt( $dataCell , $i );
$count ++;
}else{
if( $dataCell._selected != false ){
$dataCell._selected = false;
this._arrayCollection.replaceItemAt( $dataCell , $i );
$count ++;
}
}
if($count >= 2){
break;
}
}
//切换频道
this.channelChange();
// this.bar_target.dataProvider = new eui.ArrayCollection( this._data2TabBar_arr );
}
}
/**
* 初始化页签数据
*/
private initData2Tabbar() : void{
this._data2TabBar_arr = [
{
_index : 0,
_selected : true,
_yes_txt_res : "A_1_png",
_no_txt_res : "A_0_png"
},
{
_index : 1,
_selected : false,
_yes_txt_res : "B_1_png",
_no_txt_res : "B_0_png"
}
];
this._arrayCollection = new eui.ArrayCollection( this._data2TabBar_arr );
this._cur_index2TabBar = 0;
}
/**
* 初始化页签
*/
private initView2Tabbar() : void{
this.initData2Tabbar();
this.bar_target.itemRenderer = common_TabBarCell;
this.bar_target.dataProvider = this._arrayCollection;
this.channelChange();
}
/**
* 频道切换(显隐)
*/
private channelChange() : void{
let $cell : eui.Group = null;
for( let $i : number = 0 , $j : number = this._all_channel.length ; $i < $j ; $i ++ ){
$cell = this._all_channel[$i];
$cell.visible = $i == this._cur_index2TabBar;
}
}
/**
* 销毁
*/
public destory() : void{
this.handlerListener2Tabber(false);
}
}
}
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
