乐趣区

关于c#:Unity-UGUI的GridLayoutGroup网格布局组件的介绍及使用

jiezi

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);
        }
    }
}

操作步骤：

  1. 创立一个空的 GameObject，并将 GridLayoutExample 脚本挂载下来。
  2. 在 Inspector 面板中，将 GridLayoutGroup 组件拖拽到 gridLayout 变量上。
  3. 创立一个预制体，将其拖拽到 prefab 变量上。
  4. 运行游戏，能够看到预制体依照 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);
        }
    }
}

操作步骤：

  1. 创立一个空的 GameObject，并将 GridLayoutExample 脚本挂载下来。
  2. 在 Inspector 面板中，将 GridLayoutGroup 组件拖拽到 gridLayout 变量上。
  3. 创立一个预制体，将其拖拽到 prefab 变量上。
  4. 运行游戏，能够看到预制体依照 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);
        }
    }
}

操作步骤：

  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. 运行游戏，能够看到预制体依照 2 ×2 的网格布局排列。
  5. 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);
    }
}

操作步骤：

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

注意事项：

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

参考资料

  • Unity Documentation – GridLayoutGroup
  • Unity Manual – UI GridLayoutGroup
退出移动版