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));
    }
});

在竖直方向上布局,点击第二个之后,会删除第二个按钮,且其余的按钮会自动对齐

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值