cocos2d-js CSB布局样式_csb界面布局-CSDN博客

本文链接：https://blog.csdn.net/zhenyu5211314/article/details/86655582

本文介绍了一种用于Cocos2d-x游戏引擎的布局管理方法，通过自定义函数实现不同类型的布局，如相对布局、垂直布局和水平布局。通过对子节点的锚点进行分析，自动设置布局参数，使得在不同屏幕尺寸下，UI元素能够保持正确的显示位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var OPCSBFunc = OPCSBFunc || {};
OPCSBFunc.getCSBMainLayer = function(path) {
    var csbLayer = LayoutConfig.createCSBLayer(path, false);
    var layer = csbLayer.getChildByName("Panel_main");
    layer.removeFromParent();

    OPCSBFunc.setLayoutPara(layer);
    return layer;
};

根据layer数据配置布局样式

// 根据参数设置layout的布局样式，对layout设定布局属性无效，因为布局属性是其作为组件时，相对容器的属性！
OPCSBFunc.setLayoutPara = function(layout) {
    if(layout == null){
        return;
    }

    var align = CocosUtility.getCustomProperty(layout).layout;
    if (align) {
        switch(align){
            case "relative":    // 对layout进行相对布局，子节点根据锚点进行布局
                layout.setLayoutType(ccui.Layout.RELATIVE);
                OPCSBFunc.setChildRelativeAlign(layout);
            break;
            case "vertical":    // 对layout进行垂直布局，子节点根据锚点进行布局
                layout.setLayoutType(ccui.Layout.LINEAR_VERTICAL);
                OPCSBFunc.setChildLinearGravityV(layout);
            break;
            case "horizontal":  // 对layout进行水平布局，子节点根据锚点进行布局
                layout.setLayoutType(ccui.Layout.LINEAR_HORIZONTAL);
                OPCSBFunc.setChildLinearGravityH(layout);
            break;
            default:            // 默认绝对布局，子节点可以随意setPosition，其他三种布局方式子节点setPosition无效（子节点只能通过setLayoutParameter改变布局属性）
                layout.setLayoutType(ccui.Layout.ABSOLUTE);
            break;
        }
    }
};

根据child锚点设置相对布局样式

// 设置panel所有的子节点根据锚点设置相对布局属性，针对组件与父节点布局，不包含组件之间相对布局
OPCSBFunc.setChildRelativeAlign = function(target) {
    var children = target.getChildren();
    for (var i = 0; i < children.length; i++) {
        var child = children[i];

        var anchorPoint = child.getAnchorPoint();
        var parentSize = child.getParent().getContentSize();

        var layoutPara = ccui.RelativeLayoutParameter.create();
        if (anchorPoint.x == 0 && anchorPoint.y == 1) {     // 左上，锚点(0,1)
            layoutPara.setAlign(ccui.RelativeLayoutParameter.PARENT_TOP_LEFT);
            layoutPara.setMargin(new ccui.Margin(child.getPositionX(), parentSize.height-child.getPositionY(), 0, 0));
        }
        if (anchorPoint.x == 1 && anchorPoint.y == 1) {     // 右上，锚点(1,1)
            layoutPara.setAlign(ccui.RelativeLayoutParameter.PARENT_TOP_RIGHT);
            layoutPara.setMargin(new ccui.Margin(0, parentSize.height-child.getPositionY(), parentSize.width-child.getPositionX(), 0));
        }
        if (anchorPoint.x == 0 && anchorPoint.y == 0) {     // 左下，锚点(0,0)
            layoutPara.setAlign(ccui.RelativeLayoutParameter.PARENT_LEFT_BOTTOM);
            layoutPara.setMargin(new ccui.Margin(child.getPositionX(), 0, 0, child.getPositionY()));
        }
        if (anchorPoint.x == 1 && anchorPoint.y == 0) {     // 右下，锚点(1,0)
            layoutPara.setAlign(ccui.RelativeLayoutParameter.PARENT_RIGHT_BOTTOM);
            layoutPara.setMargin(new ccui.Margin(0, 0, parentSize.width-child.getPositionX(), child.getPositionY()));
        }
        if (anchorPoint.x == 0.5 && anchorPoint.y == 0.5) { // 中，锚点(0.5,0.5)
            layoutPara.setAlign(ccui.RelativeLayoutParameter.CENTER_IN_PARENT);
            layoutPara.setMargin(new ccui.Margin(0, 0, 0, 0));
        }
        if (anchorPoint.x == 0 && anchorPoint.y == 0.5) {   // 左中，锚点(0,0.5)
            layoutPara.setAlign(ccui.RelativeLayoutParameter.PARENT_LEFT_CENTER_VERTICAL);
            layoutPara.setMargin(new ccui.Margin(child.getPositionX(), 0, 0, 0));
        }
        if (anchorPoint.x == 1 && anchorPoint.y == 0.5) {   // 右中，锚点(1,0.5)
            layoutPara.setAlign(ccui.RelativeLayoutParameter.PARENT_RIGHT_CENTER_VERTICAL);
            layoutPara.setMargin(new ccui.Margin(0, 0, parentSize.width-child.getPositionX(), 0));
        }
        if (anchorPoint.x == 0.5 && anchorPoint.y == 0) {   // 中下，锚点(0.5,0)
            layoutPara.setAlign(ccui.RelativeLayoutParameter.PARENT_BOTTOM_CENTER_HORIZONTAL);
            layoutPara.setMargin(new ccui.Margin(0, 0, 0, child.getPositionY()));
        }
        if (anchorPoint.x == 0.5 && anchorPoint.y == 1) {   // 中上，锚点(0.5,1)
            layoutPara.setAlign(ccui.RelativeLayoutParameter.PARENT_TOP_CENTER_HORIZONTAL);
            layoutPara.setMargin(new ccui.Margin(0, parentSize.height-child.getPositionY(), 0, 0));
        }

        // 以下属性在设置组件之间相对布局时使用，以ccui.RelativeLayoutParameter.LOCATION_ 开头
        // layoutPara.setRelativeToWidgetName("Panel_main");
        // layoutPara.setRelativeName("button2");
        child.setLayoutParameter(layoutPara);
    }
};

根据child锚点设置垂直布局样式

// 设置panel所有的子节点根据锚点设置垂直布局属性，垂直排列布局只能设定上下margin，默认间隔5
OPCSBFunc.setChildLinearGravityV = function(target) {
    var children = target.getChildren();
    for (var i = 0; i < children.length; i++) {
        var child = children[i];

        var anchorPoint = child.getAnchorPoint();

        var layoutPara = ccui.LinearLayoutParameter.create();
        if (anchorPoint.x == 0) {       // 左，锚点(0,)
            layoutPara.setGravity(ccui.LinearLayoutParameter.LEFT);
        }
        if (anchorPoint.x == 0.5) {     // 中，锚点(0.5,)
            layoutPara.setGravity(ccui.LinearLayoutParameter.CENTER_HORIZONTAL);
        }
        if (anchorPoint.x == 1) {       // 右，锚点(1,)
            layoutPara.setGravity(ccui.LinearLayoutParameter.RIGHT);
        }

        layoutPara.setMargin(new ccui.Margin(0, 5, 0, 0));
        child.setLayoutParameter(layoutPara);
    }
};

根据child锚点设置水平布局样式

// 设置panel所有的子节点根据锚点设置水平布局属性，水平排列布局只能设定左右margin，默认间隔5
OPCSBFunc.setChildLinearGravityH = function(target) {
    var children = target.getChildren();
    for (var i = 0; i < children.length; i++) {
        var child = children[i];

        var anchorPoint = child.getAnchorPoint();

        var layoutPara = ccui.LinearLayoutParameter.create();
        if (anchorPoint.y == 0) {       // 下，锚点(,0)
            layoutPara.setGravity(ccui.LinearLayoutParameter.BOTTOM);
        }
        if (anchorPoint.y == 0.5) {     // 中，锚点(,0.5)
            layoutPara.setGravity(ccui.LinearLayoutParameter.CENTER_VERTICAL);
        }
        if (anchorPoint.y == 1) {       // 上，锚点()
            layoutPara.setGravity(ccui.LinearLayoutParameter.TOP);
        }

        layoutPara.setMargin(new ccui.Margin(5, 0, 0, 0));
        child.setLayoutParameter(layoutPara);
    }
};