Egret之Tabbar通用页签

目标 ： 实现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 = 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 = 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 = null;        private _cur_index2TabBar : number = 0;        private _all_channel : Array = 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);        }    }}

六 ： 效果

2.0版优化 - 对eui.ArrayCollection 数据进行更新也可以实行页签的状态切换

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 = null;        private _cur_index2TabBar : number = 0;        private _all_channel : Array = 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);        }    }}