【CocosCreator入门】CocosCreator组件 | Layout（布局）组件

       Cocos Creator 是一款流行的游戏开发引擎，具有丰富的组件和工具，其中的Layout组件是一种用于实现节点自适应布局的重要组件。它可以根据不同的布局方式，自动调整子节点的位置和大小，从而实现节点的自适应布局。

---

目录

一、组件介绍

二、组件属性

三、布局类型

四、脚本示例

---

一、组件介绍

       Layout组件是Cocos Creator提供的一种自适应布局组件，主要用于实现节点的自适应布局和排列。通过设置Layout组件的属性和布局方式，可以实现各种不同的布局效果，例如水平布局、垂直布局和网格布局等。 

二、组件属性

属性	功能说明
Type	布局类型，支持 NONE、HORIZONTAL、VERTICAL 和 GRID。
Resize Mode	缩放模式，支持 NONE，CHILDREN 和 CONTAINER。
Padding Left	排版时，子物体相对于容器左边框的距离。
Padding Right	排版时，子物体相对于容器右边框的距离。
Padding Top	排版时，子物体相对于容器上边框的距离。
Padding Bottom	排版时，子物体相对于容器下边框的距离。
Spacing X	水平排版时，子物体与子物体在水平方向上的间距。NONE 模式无此属性。
Spacing Y	垂直排版时，子物体与子物体在垂直方向上的间距。NONE 模式无此属性。
Horizontal Direction	指定水平排版时，第一个子节点从容器的左边还是右边开始布局。当容器为 Grid 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始水平排列方向。
Vertical Direction	指定垂直排版时，第一个子节点从容器的上面还是下面开始布局。当容器为 Grid 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始垂直排列方向。
Cell Size	此属性只在 Grid 布局、Children 缩放模式时存在，指定网格容器里面排版元素的大小。
Start Axis	此属性只在 Grid 布局时存在，指定网格容器里面元素排版指定的起始方向轴。
Affected By Scale	子节点的缩放是否影响布局。

三、布局类型

       Layout组件是Cocos Creator中非常重要的一个组件，它可以帮助开发者更加方便地布局游戏场景中的UI元素。Layout组件支持多种布局类型，包括水平布局、垂直布局、网格布局等等。本文将介绍Layout组件的几种布局类型及其使用方法。

• 水平布局

       水平布局是一种将UI元素水平排列的布局方式。在Cocos Creator中，可以通过将Layout组件的布局类型设置为Horizontal来实现水平布局。在水平布局中，可以通过设置各个UI元素的间距、对齐方式等属性来控制UI元素的排列方式。

• 垂直布局

       垂直布局是一种将UI元素垂直排列的布局方式。在Cocos Creator中，可以通过将Layout组件的布局类型设置为Vertical来实现垂直布局。在垂直布局中，可以通过设置各个UI元素的间距、对齐方式等属性来控制UI元素的排列方式。

• 网格布局

       网格布局是一种将UI元素排列成网格状的布局方式。在Cocos Creator中，可以通过将Layout组件的布局类型设置为Grid来实现网格布局。在网格布局中，可以通过设置每行或每列的元素数量、各个UI元素的间距、对齐方式等属性来控制UI元素的排列方式。

• 绝对布局

       绝对布局是一种将UI元素按照固定位置进行排列的布局方式。在Cocos Creator中，可以通过将Layout组件的布局类型设置为Absolute来实现绝对布局。在绝对布局中，可以通过设置各个UI元素的位置、大小等属性来控制UI元素的排列方式。

四、脚本示例

       下面是一个使用Layout组件实现自适应布局的示例代码：

cc.Class({
    extends: cc.Component,
    properties: {
        layoutNode: cc.Node, // 布局节点
        childNodes: [cc.Node], // 子节点列表
        layoutType: cc.Layout.Type.HORIZONTAL, // 布局方式
        resizeMode: cc.Layout.ResizeMode.CONTAINER, // 自适应方式
        padding: cc.Vec4(10, 10, 10, 10), // 间距
        horizontalAlign: cc.Layout.HorizontalAlign.CENTER, // 水平对齐方式
        verticalAlign: cc.Layout.VerticalAlign.CENTER, // 垂直对齐方式
    },
    onLoad () {
        let layout = this.layoutNode.getComponent(cc.Layout);
        layout.type = this.layoutType;
        layout.resizeMode = this.resizeMode;
        layout.padding = this.padding;
        layout.horizontalAlign = this.horizontalAlign;
        layout.verticalAlign = this.verticalAlign;
        this.childNodes.forEach((childNode) => {
            let childLayout = childNode.getComponent(cc.Layout);
            if (childLayout) {
                childLayout.enabled = true;
                childLayout.horizontalAlign = this.horizontalAlign;
                childLayout.verticalAlign = this.verticalAlign;
            }
        });
    },
    // update (dt) {},
});

       通过以上代码，我们可以动态地创建一个布局节点，并添加Layout组件和子节点。在实际开发中，可以根据需要修改和扩展代码。

---

       总之，使用Cocos Creator的Layout组件可以帮助我们快速实现节点的自适应布局。通过设置布局方式、自适应方式和子节点属性，可以让节点在不同的屏幕尺寸和分辨率下都能够自适应排布。