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：创立一个2×2的网格布局
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);
}
}
}操作步骤：
- 创立一个空的GameObject，并将GridLayoutExample脚本挂载下来。
- 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
- 创立一个预制体，将其拖拽到prefab变量上。
- 运行游戏，能够看到预制体依照2×2的网格布局排列。
注意事项：
- 须要提前创立好预制体，并将其拖拽到prefab变量上。
示例2：创立一个3×3的网格布局，并设置间距
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);
}
}
}操作步骤：
- 创立一个空的GameObject，并将GridLayoutExample脚本挂载下来。
- 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
- 创立一个预制体，将其拖拽到prefab变量上。
- 运行游戏，能够看到预制体依照3×3的网格布局排列，并且有间距。
注意事项：
- 须要提前创立好预制体，并将其拖拽到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);
}
}
}操作步骤：
- 创立一个空的GameObject，并将GridLayoutExample脚本挂载下来。
- 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
- 创立一个预制体，将其拖拽到prefab变量上。
- 运行游戏，能够看到预制体依照自适应的网格布局排列，并且有间距。
注意事项：
- 须要提前创立好预制体，并将其拖拽到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;
}
}操作步骤：
- 创立一个空的GameObject，并将GridLayoutExample脚本挂载下来。
- 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
- 创立一个预制体，将其拖拽到prefab变量上。
- 运行游戏，能够看到预制体依照2×2的网格布局排列。
- 3秒后，网格布局的列数会变为3，预制领会依照3×2的网格布局排列。
注意事项：
- 须要提前创立好预制体，并将其拖拽到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);
}
}操作步骤：
- 创立一个空的GameObject，并将GridLayoutExample脚本挂载下来。
- 在Inspector面板中，将GridLayoutGroup组件拖拽到gridLayout变量上。
- 创立一个预制体，将其拖拽到prefab变量上。
- 运行游戏，能够看到预制体依照2×2的网格布局排列，并且有间距。
- 3秒后，网格布局的间距会变为(20, 20)，预制领会依照2×2的网格布局排列，并且间距变大。
注意事项：
- 须要提前创立好预制体，并将其拖拽到prefab变量上。
参考资料
- Unity Documentation – GridLayoutGroup
- Unity Manual – UI GridLayoutGroup
发表回复