Unity UGUI的GridLayoutGroup（网格布局）组件的介绍及使用_grid layout group

Unity UGUI的GridLayoutGroup（网格布局）组件的介绍及使用

1. 什么是GridLayoutGroup组件？

GridLayoutGroup是Unity UGUI中的一种布局组件，用于在UI界面中创建网格布局。它可以根据指定的行数、列数和间距自动排列子物体，使它们按照网格的形式排列。

2. GridLayoutGroup的工作原理

GridLayoutGroup组件会根据指定的行数和列数，将子物体按照从左到右、从上到下的顺序排列。它还可以设置间距，控制子物体之间的间隔。当子物体的数量超过网格的容量时，GridLayoutGroup会自动创建新的行或列来容纳多余的子物体。

3. GridLayoutGroup的常用属性

• Cell Size：指定每个单元格的大小。
• Spacing：指定子物体之间的间距。
• Start Corner：指定网格的起始角落。
• Start Axis：指定网格的起始轴线。
• Constraint：指定网格的约束方式，可以是按行约束或按列约束。
• Constraint Count：指定每行或每列的最大子物体数量。

4. GridLayoutGroup的常用函数

• CalculateLayoutInputHorizontal()：计算水平方向上的布局。
• CalculateLayoutInputVertical()：计算垂直方向上的布局。
• SetLayoutHorizontal()：设置水平方向上的布局。
• SetLayoutVertical()：设置垂直方向上的布局。

5. 示例代码

示例1：创建一个2x2的网格布局

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayout.constraintCount = 2;

        for (int i = 0; i < 4; i++)
        {
            Instantiate(prefab, transform);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

操作步骤：

1. 创建一个空的GameObject，并将GridLayoutExample脚本挂载上去。
2. 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
3. 创建一个预制体，将其拖拽到prefab变量上。
4. 运行游戏，可以看到预制体按照2x2的网格布局排列。

注意事项：

• 需要提前创建好预制体，并将其拖拽到prefab变量上。

示例2：创建一个3x3的网格布局，并设置间距

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayout.constraintCount = 3;
        gridLayout.spacing = new Vector2(10, 10);

        for (int i = 0; i < 9; i++)
        {
            Instantiate(prefab, transform);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

操作步骤：

1. 创建一个空的GameObject，并将GridLayoutExample脚本挂载上去。
2. 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
3. 创建一个预制体，将其拖拽到prefab变量上。
4. 运行游戏，可以看到预制体按照3x3的网格布局排列，并且有间距。

注意事项：

• 需要提前创建好预制体，并将其拖拽到prefab变量上。

示例3：创建一个自适应的网格布局

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.Flexible;
        gridLayout.spacing = new Vector2(10, 10);

        for (int i = 0; i < 10; i++)
        {
            Instantiate(prefab, transform);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

操作步骤：

1. 创建一个空的GameObject，并将GridLayoutExample脚本挂载上去。
2. 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
3. 创建一个预制体，将其拖拽到prefab变量上。
4. 运行游戏，可以看到预制体按照自适应的网格布局排列，并且有间距。

注意事项：

• 需要提前创建好预制体，并将其拖拽到prefab变量上。

示例4：动态改变网格布局的行数和列数

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedRowCount;
        gridLayout.constraintCount = 2;

        for (int i = 0; i < 4; i++)
        {
            Instantiate(prefab, transform);
        }

        Invoke("ChangeConstraintCount", 3f);
    }

    void ChangeConstraintCount()
    {
        gridLayout.constraintCount = 3;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

操作步骤：

1. 创建一个空的GameObject，并将GridLayoutExample脚本挂载上去。
2. 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
3. 创建一个预制体，将其拖拽到prefab变量上。
4. 运行游戏，可以看到预制体按照2x2的网格布局排列。
5. 3秒后，网格布局的列数会变为3，预制体会按照3x2的网格布局排列。

注意事项：

• 需要提前创建好预制体，并将其拖拽到prefab变量上。

示例5：动态改变网格布局的间距

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayout.constraintCount = 2;
        gridLayout.spacing = new Vector2(10, 10);

        for (int i = 0; i < 4; i++)
        {
            Instantiate(prefab, transform);
        }

        Invoke("ChangeSpacing", 3f);
    }

    void ChangeSpacing()
    {
        gridLayout.spacing = new Vector2(20, 20);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

操作步骤：

1. 创建一个空的GameObject，并将GridLayoutExample脚本挂载上去。
2. 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
3. 创建一个预制体，将其拖拽到prefab变量上。
4. 运行游戏，可以看到预制体按照2x2的网格布局排列，并且有间距。
5. 3秒后，网格布局的间距会变为(20, 20)，预制体会按照2x2的网格布局排列，并且间距变大。

注意事项：

• 需要提前创建好预制体，并将其拖拽到prefab变量上。

参考资料

• Unity Documentation - GridLayoutGroup
• Unity Manual - UI GridLayoutGroup