Unity UGUI的VerticalLayoutGroup（垂直布局）組件的介紹及使用

1. 什么是VerticalLayoutGroup組件？

VerticalLayoutGroup是Unity UGUI中的一種布局組件，用于在垂直方向上自動(dòng)排列子對(duì)象。它可以根據(jù)子對(duì)象的大小和布局設(shè)置，自動(dòng)調(diào)整子對(duì)象的位置和大小，實(shí)現(xiàn)垂直布局效果。

2. VerticalLayoutGroup組件的工作原理

VerticalLayoutGroup組件通過(guò)以下步驟實(shí)現(xiàn)垂直布局：

• 獲取所有子對(duì)象的RectTransform組件。
• 根據(jù)子對(duì)象的大小和布局設(shè)置，計(jì)算子對(duì)象的位置和大小。
• 調(diào)整子對(duì)象的位置和大小，使其按照垂直方向上的布局要求進(jìn)行排列。

3. VerticalLayoutGroup組件的常用屬性

• Padding：內(nèi)邊距，控制子對(duì)象與VerticalLayoutGroup之間的間距。
• Spacing：子對(duì)象之間的間距。
• Child Force Expand：子對(duì)象是否自動(dòng)擴(kuò)展以填充VerticalLayoutGroup的寬度。
• Child Control Height：子對(duì)象是否自動(dòng)調(diào)整高度以適應(yīng)VerticalLayoutGroup的高度。
• Child Alignment：子對(duì)象的對(duì)齊方式。

4. VerticalLayoutGroup組件的常用函數(shù)

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

5. 例子代碼

例子1：創(chuàng)建一個(gè)垂直布局的面板

using UnityEngine;
using UnityEngine.UI;
public class VerticalLayoutExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    private void Start()
    {
        verticalLayoutGroup.spacing = 10f;
        verticalLayoutGroup.childForceExpandWidth = false;
        verticalLayoutGroup.childForceExpandHeight = false;
        verticalLayoutGroup.childControlHeight = true;
        verticalLayoutGroup.childAlignment = TextAnchor.UpperCenter;
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并將VerticalLayoutGroup組件添加到該物體上。
• 將需要進(jìn)行垂直布局的子對(duì)象添加到VerticalLayoutGroup物體下。
• 將VerticalLayoutExample腳本添加到VerticalLayoutGroup物體上。
• 在Inspector面板中，將VerticalLayoutGroup的spacing設(shè)置為10，childForceExpandWidth和childForceExpandHeight設(shè)置為false，childControlHeight設(shè)置為true，childAlignment設(shè)置為UpperCenter。

例子2：動(dòng)態(tài)添加子對(duì)象

using UnityEngine;
using UnityEngine.UI;
public class AddChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    public GameObject childPrefab;
    private void Start()
    {
        for (int i = 0; i < 5; i++)
        {
            GameObject child = Instantiate(childPrefab, verticalLayoutGroup.transform);
            child.GetComponentInChildren<Text>().text = "Child " + (i + 1);
        }
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并將VerticalLayoutGroup組件添加到該物體上。
• 創(chuàng)建一個(gè)子對(duì)象的預(yù)制體，并將其賦值給AddChildExample腳本的childPrefab變量。
• 將AddChildExample腳本添加到空物體上。
• 在Inspector面板中，將VerticalLayoutGroup的spacing和其他布局設(shè)置進(jìn)行適當(dāng)調(diào)整。

例子3：動(dòng)態(tài)刪除子對(duì)象

using UnityEngine;
using UnityEngine.UI;
public class RemoveChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    private void Start()
    {
        for (int i = 0; i < verticalLayoutGroup.transform.childCount; i++)
        {
            Destroy(verticalLayoutGroup.transform.GetChild(i).gameObject);
        }
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并將VerticalLayoutGroup組件添加到該物體上。
• 將RemoveChildExample腳本添加到空物體上。
• 在Inspector面板中，將VerticalLayoutGroup的spacing和其他布局設(shè)置進(jìn)行適當(dāng)調(diào)整。
• 運(yùn)行游戲，所有子對(duì)象將被刪除。

例子4：動(dòng)態(tài)調(diào)整子對(duì)象的大小

using UnityEngine;
using UnityEngine.UI;
public class ResizeChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    private void Start()
    {
        for (int i = 0; i < verticalLayoutGroup.transform.childCount; i++)
        {
            RectTransform childRectTransform = verticalLayoutGroup.transform.GetChild(i).GetComponent<RectTransform>();
            childRectTransform.sizeDelta = new Vector2(childRectTransform.sizeDelta.x, 100f);
        }
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并將VerticalLayoutGroup組件添加到該物體上。
• 將ResizeChildExample腳本添加到空物體上。
• 在Inspector面板中，將VerticalLayoutGroup的spacing和其他布局設(shè)置進(jìn)行適當(dāng)調(diào)整。
• 運(yùn)行游戲，所有子對(duì)象的高度將被調(diào)整為100。

例子5：動(dòng)態(tài)調(diào)整子對(duì)象的對(duì)齊方式

using UnityEngine;
using UnityEngine.UI;
public class AlignChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    private void Start()
    {
        verticalLayoutGroup.childAlignment = TextAnchor.MiddleCenter;
    }
}

操作步驟：

• 創(chuàng)建一個(gè)空物體，并將VerticalLayoutGroup組件添加到該物體上。
• 將AlignChildExample腳本添加到空物體上。
• 在Inspector面板中，將VerticalLayoutGroup的spacing和其他布局設(shè)置進(jìn)行適當(dāng)調(diào)整。
• 運(yùn)行游戲，所有子對(duì)象的對(duì)齊方式將被調(diào)整為MiddleCenter。

注意事項(xiàng)

• VerticalLayoutGroup組件只能用于垂直布局，如果需要水平布局，請(qǐng)使用HorizontalLayoutGroup組件。
• 在使用VerticalLayoutGroup組件時(shí)，確保子對(duì)象的RectTransform組件的錨點(diǎn)和位置設(shè)置正確，以便正確計(jì)算子對(duì)象的位置和大小。

參考資料

Unity官方文檔：VerticalLayoutGroup

Unity官方教程：Layout Groups

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

最新評(píng)論