Horizontal Layout Group | Unity UI | 1.0.0?

1. 什么是HorizontalLayoutGroup組件？

HorizontalLayoutGroup是Unity UGUI中的一種布局組件，用于在水平方向上對子物體進行排列和布局。它可以根據一定的規則自動調整子物體的位置和大小，使它們在水平方向上均勻分布。

Property:	Function:
Padding	The padding inside the edges of the layout group.
Spacing	The spacing between the layout elements.
Child Alignment	The alignment to use for the child layout elements if they don't fill out all the available space.
Control Child Size	Whether the Layout Group controls the width and height of its child layout elements.
Use Child Scale	Whether the Layout Group considers the scale of its child layout elements when sizing and laying out elements. Width?and?Height?correspond to the?Scale > X?and?Scale > Y?values in each child layout element's?Rect Transform?component. You cannot animate the Scale values using the?Animator Controller
Child Force Expand	Whether to force the child layout elements to expand to fill additional available space.

2. HorizontalLayoutGroup的工作原理

HorizontalLayoutGroup組件通過以下步驟實現水平布局：

• 獲取所有子物體的RectTransform組件。
• 根據子物體的大小和布局規則，計算出每個子物體的位置和大小。
• 調整子物體的位置和大小，使它們在水平方向上均勻分布。

3. HorizontalLayoutGroup的常用屬性

• Spacing：子物體之間的間距。
• ChildForceExpandWidth：是否強制子物體擴展寬度以填充整個水平布局。
• ChildForceExpandHeight：是否強制子物體擴展高度以填充整個水平布局。
• ChildControlWidth：是否控制子物體的寬度。
• ChildControlHeight：是否控制子物體的高度。

4. HorizontalLayoutGroup的常用函數

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

5. 例子代碼

例子1：創建一個水平布局，并添加三個子物體

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

操作步驟：

1. 創建一個空物體，并添加HorizontalLayoutGroup組件。
2. 創建一個子物體預制體，包含一個Text組件。
3. 將子物體預制體拖拽到layoutGroup的Child Prefab屬性中。
4. 運行游戲，可以看到三個子物體在水平方向上均勻分布。

例子2：設置子物體之間的間距

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

操作步驟：

1. 創建一個空物體，并添加HorizontalLayoutGroup組件。
2. 創建一個子物體預制體，包含一個Text組件。
3. 將子物體預制體拖拽到layoutGroup的Child Prefab屬性中。
4. 將layoutGroup的Spacing屬性設置為20。
5. 運行游戲，可以看到子物體之間的間距變為20。

例子3：強制子物體擴展寬度以填充整個水平布局

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

操作步驟：

1. 創建一個空物體，并添加HorizontalLayoutGroup組件。
2. 創建一個子物體預制體，包含一個Text組件。
3. 將子物體預制體拖拽到layoutGroup的Child Prefab屬性中。
4. 將layoutGroup的Child Force Expand Width屬性設置為true。
5. 運行游戲，可以看到子物體的寬度被擴展以填充整個水平布局。

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

操作步驟：

1. 創建一個空物體，并添加HorizontalLayoutGroup組件。
2. 創建一個子物體預制體，包含一個Text組件。
3. 將子物體預制體拖拽到layoutGroup的Child Prefab屬性中。
4. 將layoutGroup的Child Control Width和Child Control Height屬性都設置為false。
5. 運行游戲，可以看到子物體的寬度和高度不受控制，保持原始大小。

例子5：自定義布局規則

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

操作步驟：

1. 創建一個空物體，并添加HorizontalLayoutGroup組件。
2. 創建一個子物體預制體，包含一個Text組件。
3. 將子物體預制體拖拽到layoutGroup的Child Prefab屬性中。
4. 將layoutGroup的Child Alignment屬性設置為Middle Center。
5. 運行游戲，可以看到子物體在水平方向上居中對齊。

注意事項

• HorizontalLayoutGroup組件只能用于水平布局，如果需要垂直布局，可以使用VerticalLayoutGroup組件。
• 子物體的RectTransform組件的錨點和位置會影響布局效果，需要根據實際需求進行調整。

參考資料

• Unity官方文檔 - HorizontalLayoutGroup

作者：AlianBlank
鏈接：https://www.jianshu.com/p/c5cdb16a7562
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。