美文网首页
Egret eui学习-状态切换按钮,进度条

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

作者: 彬少灬 | 来源:发表于2018-02-11 00:05 被阅读953次

    状态切换按钮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<eui.ToggleButton> = [];
            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学习-状态切换按钮,进度条

          本文链接:https://www.haomeiwen.com/subject/ysahtftx.html