ccui.layout 横 竖方向布局,简单实现

var LayoutView = cc.Layer.extend({
    ctor : function(){
        this._super();
        var colorList = [cc.color(255, 255, 255), cc.color(255, 0, 0), cc.color(0, 255, 0), cc.color(0, 0, 255), cc.color(255, 255, 0), cc.color(255, 255, 255), cc.color(255, 0, 0), cc.color(0, 255, 0), cc.color(0, 0, 255), cc.color(255, 255, 0)];
        var lo = new ccui.Layout();
        lo.setLayoutType(ccui.Layout.LINEAR_VERTICAL);  // ccui.Layout.LINEAR_HORIZONTAL
        lo.setContentSize(cc.size(500, 400));
        this.addChild(lo);

        this.btn1 = ccui.Button();
        this.btn1.setTouchEnabled(true);
        this.btn1.loadTextures(res.CloseNormal_png, res.CloseSelected_png, "");
        lo.addChild(this.btn1);

        this.btn2 = ccui.Button();
        this.btn2.setTouchEnabled(true);
        this.btn2.loadTextures(res.CloseSelected_png, res.CloseNormal_png, "");
        this.btn2.addTouchEventListener(function(){
            this.btn2.removeFromParent(true);
        }, this);
        lo.addChild(this.btn2);

        this.btn3 = ccui.Button();
        this.btn3.setTouchEnabled(true);
        this.btn3.loadTextures(res.CloseNormal_png, res.CloseSelected_png, "");
        this.btn3.addTouchEventListener(function(){
//          this.btn3.setVisible(false);
        }, this)
        lo.addChild(this.btn3);

        this.setLayoutParameter();

        return true;
    },

    close : function(){

    },

    setLayoutParameter : function(){
        var lp1 = new ccui.LinearLayoutParameter();
        this.btn1.setLayoutParameter(lp1);
        lp1.setGravity(ccui.LinearLayoutParameter.CENTER_HORIZONTAL); // ccui.LinearLayoutParameter.CENTER_VERTICAL
        lp1.setMargin(new ccui.Margin(0, 5, 0, 10));

        var lp2 = new ccui.LinearLayoutParameter();
        this.btn2.setLayoutParameter(lp2);
        lp2.setGravity(ccui.LinearLayoutParameter.CENTER_HORIZONTAL);// ccui.LinearLayoutParameter.CENTER_VERTICAL
        lp2.setMargin(new ccui.Margin(0, 5, 0, 10));

        var lp3 = new ccui.LinearLayoutParameter();
        this.btn3.setLayoutParameter(lp3);
        lp3.setGravity(ccui.LinearLayoutParameter.CENTER_HORIZONTAL);// ccui.LinearLayoutParameter.CENTER_VERTICAL
        lp3.setMargin(new ccui.Margin(0, 5, 0, 10));
    }
});

ccui.layout 横 竖方向布局,简单实现_第1张图片

你可能感兴趣的:(cocos2d-js,cocos2d-js,layout)