1. 什么是GridLayoutGroup組件？

GridLayoutGroup是Unity UGUI中的一種布局組件，用于在UI界面中創(chuàng)建網(wǎng)格布局。

它可以根據(jù)指定的行數(shù)、列數(shù)和間距自動(dòng)排列子物體，使它們按照網(wǎng)格的形式排列。

2. GridLayoutGroup的工作原理

GridLayoutGroup組件會(huì)根據(jù)指定的行數(shù)和列數(shù)，將子物體按照從左到右、從上到下的順序排列。

它還可以設(shè)置間距，控制子物體之間的間隔。

當(dāng)子物體的數(shù)量超過網(wǎng)格的容量時(shí)，GridLayoutGroup會(huì)自動(dòng)創(chuàng)建新的行或列來容納多余的子物體。

3. GridLayoutGroup的常用屬性

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

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

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

5. 示例代碼

示例1：創(chuàng)建一個(gè)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);
        }
    }
}

操作步驟：

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

注意事項(xiàng)：

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

示例2：創(chuàng)建一個(gè)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);
        }
    }
}

操作步驟：

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

注意事項(xiàng)：

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

示例3：創(chuàng)建一個(gè)自適應(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);
        }
    }
}

操作步驟：

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

注意事項(xiàng)：

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

示例4：動(dòng)態(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;
    }
}

操作步驟：

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

注意事項(xiàng)：

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

示例5：動(dòng)態(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);
    }
}

操作步驟：

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

注意事項(xiàng)：

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

參考資料

• Unity Documentation - GridLayoutGroup
• Unity Manual - UI GridLayoutGroup

以上就是Unity UGUI的GridLayoutGroup網(wǎng)格布局組件使用詳解的詳細(xì)內(nèi)容，更多關(guān)于Unity UGUI GridLayoutGroup的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論