Unity UGUI的GridLayoutGroup（網(wǎng)格布局）組件的介紹及使用

1. 什么是GridLayoutGroup組件？

GridLayoutGroup是Unity UGUI中的一種布局組件，用于在UI界面中創(chuàng)建網(wǎng)格布局。它可以根據(jù)指定的行數(shù)、列數(shù)和間距自動排列子物體，使它們按照網(wǎng)格的形式排列。

2. GridLayoutGroup的工作原理

GridLayoutGroup組件會根據(jù)指定的行數(shù)和列數(shù)，將子物體按照從左到右、從上到下的順序排列。它還可以設(shè)置間距，控制子物體之間的間隔。當(dāng)子物體的數(shù)量超過網(wǎng)格的容量時，GridLayoutGroup會自動創(chuàng)建新的行或列來容納多余的子物體。

3. GridLayoutGroup的常用屬性

• Cell Size：指定每個單元格的大小。
• Spacing：指定子物體之間的間距。
• Start Corner：指定網(wǎng)格的起始角落。
• Start Axis：指定網(wǎng)格的起始軸線。
• Constraint：指定網(wǎng)格的約束方式，可以是按行約束或按列約束。
• Constraint Count：指定每行或每列的最大子物體數(shù)量。

4. GridLayoutGroup的常用函數(shù)

• CalculateLayoutInputHorizontal()：計算水平方向上的布局。
• CalculateLayoutInputVertical()：計算垂直方向上的布局。
• SetLayoutHorizontal()：設(shè)置水平方向上的布局。
• SetLayoutVertical()：設(shè)置垂直方向上的布局。

5. 示例代碼

示例1：創(chuàng)建一個2x2的網(wǎng)格布局

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. 創(chuàng)建一個空的GameObject，并將GridLayoutExample腳本掛載上去。
2. 在Inspector面板中，將GridLayoutGroup組件拖拽到gridLayout變量上。
3. 創(chuàng)建一個預(yù)制體，將其拖拽到prefab變量上。
4. 運行游戲，可以看到預(yù)制體按照2x2的網(wǎng)格布局排列。

注意事項：

• 需要提前創(chuàng)建好預(yù)制體，并將其拖拽到prefab變量上。

示例2：創(chuàng)建一個3x3的網(wǎng)格布局，并設(shè)置間距

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. 創(chuàng)建一個空的GameObject，并將GridLayoutExample腳本掛載上去。
2. 在Inspector面板中，將GridLayoutGroup組件拖拽到gridLayout變量上。
3. 創(chuàng)建一個預(yù)制體，將其拖拽到prefab變量上。
4. 運行游戲，可以看到預(yù)制體按照3x3的網(wǎng)格布局排列，并且有間距。

注意事項：

• 需要提前創(chuàng)建好預(yù)制體，并將其拖拽到prefab變量上。

示例3：創(chuàng)建一個自適應(yīng)的網(wǎng)格布局

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. 創(chuàng)建一個空的GameObject，并將GridLayoutExample腳本掛載上去。
2. 在Inspector面板中，將GridLayoutGroup組件拖拽到gridLayout變量上。
3. 創(chuàng)建一個預(yù)制體，將其拖拽到prefab變量上。
4. 運行游戲，可以看到預(yù)制體按照自適應(yīng)的網(wǎng)格布局排列，并且有間距。

注意事項：

• 需要提前創(chuàng)建好預(yù)制體，并將其拖拽到prefab變量上。

示例4：動態(tài)改變網(wǎng)格布局的行數(shù)和列數(shù)

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. 創(chuàng)建一個空的GameObject，并將GridLayoutExample腳本掛載上去。
2. 在Inspector面板中，將GridLayoutGroup組件拖拽到gridLayout變量上。
3. 創(chuàng)建一個預(yù)制體，將其拖拽到prefab變量上。
4. 運行游戲，可以看到預(yù)制體按照2x2的網(wǎng)格布局排列。
5. 3秒后，網(wǎng)格布局的列數(shù)會變?yōu)?，預(yù)制體會按照3x2的網(wǎng)格布局排列。

注意事項：

• 需要提前創(chuàng)建好預(yù)制體，并將其拖拽到prefab變量上。

示例5：動態(tài)改變網(wǎng)格布局的間距

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. 創(chuàng)建一個空的GameObject，并將GridLayoutExample腳本掛載上去。
2. 在Inspector面板中，將GridLayoutGroup組件拖拽到gridLayout變量上。
3. 創(chuàng)建一個預(yù)制體，將其拖拽到prefab變量上。
4. 運行游戲，可以看到預(yù)制體按照2x2的網(wǎng)格布局排列，并且有間距。
5. 3秒后，網(wǎng)格布局的間距會變?yōu)?20, 20)，預(yù)制體會按照2x2的網(wǎng)格布局排列，并且間距變大。

注意事項：

• 需要提前創(chuàng)建好預(yù)制體，并將其拖拽到prefab變量上。

參考資料

• Unity Documentation - GridLayoutGroup
• Unity Manual - UI GridLayoutGroup