Unity UGUI的HorizontalLayoutGroup（水平布局）組件的介紹及使用

1. 什么是HorizontalLayoutGroup組件？

HorizontalLayoutGroup是Unity UGUI中的一種布局組件，用于在水平方向上對(duì)子物體進(jìn)行排列和布局。它可以根據(jù)一定的規(guī)則自動(dòng)調(diào)整子物體的位置和大小，使它們?cè)谒椒较蛏暇鶆蚍植肌?/p>

2. HorizontalLayoutGroup的工作原理

HorizontalLayoutGroup組件通過(guò)以下步驟實(shí)現(xiàn)水平布局：

• 獲取所有子物體的RectTransform組件。
• 根據(jù)子物體的大小和布局規(guī)則，計(jì)算出每個(gè)子物體的位置和大小。
• 調(diào)整子物體的位置和大小，使它們?cè)谒椒较蛏暇鶆蚍植肌?/li>

3. HorizontalLayoutGroup的常用屬性

• Spacing：子物體之間的間距。
• ChildForceExpandWidth：是否強(qiáng)制子物體擴(kuò)展寬度以填充整個(gè)水平布局。
• ChildForceExpandHeight：是否強(qiáng)制子物體擴(kuò)展高度以填充整個(gè)水平布局。
• ChildControlWidth：是否控制子物體的寬度。
• ChildControlHeight：是否控制子物體的高度。

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

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

5. 例子代碼

例子1：創(chuàng)建一個(gè)水平布局，并添加三個(gè)子物體

using UnityEngine;
using UnityEngine.UI;
public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;
    void Start()
    {
        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并添加HorizontalLayoutGroup組件。
• 創(chuàng)建一個(gè)子物體預(yù)制體，包含一個(gè)Text組件。
• 將子物體預(yù)制體拖拽到layoutGroup的Child Prefab屬性中。
• 運(yùn)行游戲，可以看到三個(gè)子物體在水平方向上均勻分布。

例子2：設(shè)置子物體之間的間距

using UnityEngine;
using UnityEngine.UI;
public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;
    void Start()
    {
        layoutGroup.spacing = 20f;
        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并添加HorizontalLayoutGroup組件。
• 創(chuàng)建一個(gè)子物體預(yù)制體，包含一個(gè)Text組件。
• 將子物體預(yù)制體拖拽到layoutGroup的Child Prefab屬性中。
• 將layoutGroup的Spacing屬性設(shè)置為20。
• 運(yùn)行游戲，可以看到子物體之間的間距變?yōu)?0。

例子3：強(qiáng)制子物體擴(kuò)展寬度以填充整個(gè)水平布局

using UnityEngine;
using UnityEngine.UI;
public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;
    void Start()
    {
        layoutGroup.childForceExpandWidth = true;
        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并添加HorizontalLayoutGroup組件。
• 創(chuàng)建一個(gè)子物體預(yù)制體，包含一個(gè)Text組件。
• 將子物體預(yù)制體拖拽到layoutGroup的Child Prefab屬性中。
• 將layoutGroup的Child Force Expand Width屬性設(shè)置為true。
• 運(yùn)行游戲，可以看到子物體的寬度被擴(kuò)展以填充整個(gè)水平布局。

例子4：控制子物體的寬度和高度

using UnityEngine;
using UnityEngine.UI;
public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;
    void Start()
    {
        layoutGroup.childControlWidth = false;
        layoutGroup.childControlHeight = false;
        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并添加HorizontalLayoutGroup組件。
• 創(chuàng)建一個(gè)子物體預(yù)制體，包含一個(gè)Text組件。
• 將子物體預(yù)制體拖拽到layoutGroup的Child Prefab屬性中。
• 將layoutGroup的Child Control Width和Child Control Height屬性都設(shè)置為false。
• 運(yùn)行游戲，可以看到子物體的寬度和高度不受控制，保持原始大小。

例子5：自定義布局規(guī)則

using UnityEngine;
using UnityEngine.UI;
public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;
    void Start()
    {
        layoutGroup.childAlignment = TextAnchor.MiddleCenter;
        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并添加HorizontalLayoutGroup組件。
• 創(chuàng)建一個(gè)子物體預(yù)制體，包含一個(gè)Text組件。
• 將子物體預(yù)制體拖拽到layoutGroup的Child Prefab屬性中。
• 將layoutGroup的Child Alignment屬性設(shè)置為Middle Center。
• 運(yùn)行游戲，可以看到子物體在水平方向上居中對(duì)齊。

注意事項(xiàng)

• HorizontalLayoutGroup組件只能用于水平布局，如果需要垂直布局，可以使用VerticalLayoutGroup組件。
• 子物體的RectTransform組件的錨點(diǎn)和位置會(huì)影響布局效果，需要根據(jù)實(shí)際需求進(jìn)行調(diào)整。

參考資料

Unity官方文檔 - HorizontalLayoutGroup

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

最新評(píng)論