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. 创立一个空的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. 创立一个空的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. 创立一个空的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. 创立一个空的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. 创立一个空的GameObject,并将GridLayoutExample脚本挂载下来。
  2. 在Inspector面板中,将GridLayoutGroup组件拖拽到gridLayout变量上。
  3. 创立一个预制体,将其拖拽到prefab变量上。
  4. 运行游戏,能够看到预制体依照2x2的网格布局排列,并且有间距。
  5. 3秒后,网格布局的间距会变为(20, 20),预制领会依照2x2的网格布局排列,并且间距变大。

注意事项:

  • 须要提前创立好预制体,并将其拖拽到prefab变量上。

参考资料

  • Unity Documentation - GridLayoutGroup
  • Unity Manual - UI GridLayoutGroup