Egret eui学习-状态切换按钮,进度条

状态切换按钮ToggleButton

其中ToggleSwich使用的默认皮肤是ToggleSwichSkin.exml皮肤,而ToggleButton使用的是ButtonSkin.exml

protected createGameScene(): void {

        //状态切换按钮
        let tbtn: eui.ToggleSwitch = new eui.ToggleSwitch();
        tbtn.label = "this is a toggleButton! ";
        tbtn.addEventListener(eui.UIEvent.CHANGE,(evt:eui.UIEvent) => {egret.log(evt.target.selected)},this);
        this.addChild(tbtn);
        
        //调用toggleButton实现tabbar的方法
        this.initToggleBar();
}

    //用多个togglebutton实现tabBar
        private toggleButtons:Array = [];
        private initToggleBar():void{
            for(var i:number = 0;i<4;i++){
                egret.log(1);
            var btn:eui.ToggleButton = new eui.ToggleButton();
            btn.label = i + 1+ "";
            btn.width = 80;
            btn.height = 60;
            btn.y = 100;
            btn.x = i*80 + 20;
            btn.addEventListener(eui.UIEvent.CHANGE,(evt:eui.UIEvent)=>{
                for (var j:number = 0;j < this.toggleButtons.length; j++){
                    var btn: eui.ToggleButton = this.toggleButtons[j];
                    btn.selected = (btn == evt.target);
                }
            },this);
            this.toggleButtons.push(btn);
            this.addChild(btn);
        }
        }

进度条ProgressBar

egret默认皮肤进度条
 private pBar:eui.ProgressBar;
        private initProgressBar():void{
            this.pBar = new eui.ProgressBar();
            //1-默认加载方向从左到右;
            //2-设置加载进度从下到上;
            this.pBar.direction = eui.Direction.BTT;
            this.pBar.maximum = 200;
            this.pBar.minimum = 0;
            //1-
            // this.pBar.width = 200;
            // this.pBar.height = 40;
            //2-
            this.pBar.width = 40;
            this.pBar.height = 200;
            this.pBar.value = 10;
            this.addChild(this.pBar);
            //用timer来加载进度
            var timer:egret.Timer = new egret.Timer(10,0);
            timer.addEventListener(egret.TimerEvent.TIMER,this.timestart,this);
            timer.start();
        }

        private timestart():void{
            this.pBar.value += 1;
                if(this.pBar.value >= this.pBar.maximum){
                    this.pBar.value = 0;
                }
        }

你可能感兴趣的:(Egret eui学习-状态切换按钮,进度条)