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

1. 什麼是VerticalLayoutGroup組件？

VerticalLayoutGroup是Unity UGUI中的一種佈局組件，用於在垂直方向上自動排列子對象。它可以根據子對象的大小和佈局設置，自動調整子對象的位置和大小，實現垂直佈局效果。

2. VerticalLayoutGroup組件的工作原理

VerticalLayoutGroup組件通過以下步驟實現垂直佈局：

• 獲取所有子對象的RectTransform組件。
• 根據子對象的大小和佈局設置，計運算元對象的位置和大小。
• 調整子對象的位置和大小，使其按照垂直方向上的佈局要求進行排列。

3. VerticalLayoutGroup組件的常用屬性

• Padding：內邊距，控制子對象與VerticalLayoutGroup之間的間距。
• Spacing：子對象之間的間距。
• Child Force Expand：子對象是否自動擴展以填充VerticalLayoutGroup的寬度。
• Child Control Height：子對象是否自動調整高度以適應VerticalLayoutGroup的高度。
• Child Alignment：子對象的對齊方式。

4. VerticalLayoutGroup組件的常用函數

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

5. 例子代碼

例子1：創建一個垂直佈局的面板

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

操作步驟：

1. 創建一個空物體，並將VerticalLayoutGroup組件添加到該物體上。
2. 將需要進行垂直佈局的子對象添加到VerticalLayoutGroup物體下。
3. 將VerticalLayoutExample腳本添加到VerticalLayoutGroup物體上。
4. 在Inspector面板中，將VerticalLayoutGroup的spacing設置為10，childForceExpandWidth和childForceExpandHeight設置為false，childControlHeight設置為true，childAlignment設置為UpperCenter。

例子2：動態添加子對象

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

操作步驟：

1. 創建一個空物體，並將VerticalLayoutGroup組件添加到該物體上。
2. 創建一個子對象的預製體，並將其賦值給AddChildExample腳本的childPrefab變數。
3. 將AddChildExample腳本添加到空物體上。
4. 在Inspector面板中，將VerticalLayoutGroup的spacing和其他佈局設置進行適當調整。

例子3：動態刪除子對象

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

操作步驟：

1. 創建一個空物體，並將VerticalLayoutGroup組件添加到該物體上。
2. 將RemoveChildExample腳本添加到空物體上。
3. 在Inspector面板中，將VerticalLayoutGroup的spacing和其他佈局設置進行適當調整。
4. 運行游戲，所有子對象將被刪除。

例子4：動態調整子對象的大小

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

操作步驟：

1. 創建一個空物體，並將VerticalLayoutGroup組件添加到該物體上。
2. 將ResizeChildExample腳本添加到空物體上。
3. 在Inspector面板中，將VerticalLayoutGroup的spacing和其他佈局設置進行適當調整。
4. 運行游戲，所有子對象的高度將被調整為100。

例子5：動態調整子對象的對齊方式

using UnityEngine;
using UnityEngine.UI;

public class AlignChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;

    private void Start()
    {
        verticalLayoutGroup.childAlignment = TextAnchor.MiddleCenter;
    }
}

操作步驟：

1. 創建一個空物體，並將VerticalLayoutGroup組件添加到該物體上。
2. 將AlignChildExample腳本添加到空物體上。
3. 在Inspector面板中，將VerticalLayoutGroup的spacing和其他佈局設置進行適當調整。
4. 運行游戲，所有子對象的對齊方式將被調整為MiddleCenter。

註意事項

• VerticalLayoutGroup組件只能用於垂直佈局，如果需要水平佈局，請使用HorizontalLayoutGroup組件。
• 在使用VerticalLayoutGroup組件時，確保子對象的RectTransform組件的錨點和位置設置正確，以便正確計運算元對象的位置和大小。

參考資料

• Unity官方文檔：VerticalLayoutGroup
• Unity官方教程：Layout Groups

__EOF__