Unity UGUI的自动布局-LayoutGroup（水平布局）组件

本文介绍: i < 3;i++)创建一个空物体，并添加Horizon t alLayoutGroup 组件。创建一个子物体预制体，包含一个Te x t 组件。将子物体预制体拖拽到layoutGroup的Child Pref a b 属性中。将layoutGroup的Child Ali gnm ent 属性设置为Mid dle Cent er。运行游戏，可以看到子物体在水平方向上居中对齐。

Horizontal Layout Group | Unity UI | 1.0.0

1. 什么是Horizon t alLayoutGroup 组件？

Horizon t alLayoutGroup是Unity UGUI中的一种布局组件，用于在水平方向上对子物体进行排列和布局。它可以根据一定的规则自动调整子物体的位置和大小，使它们在水平方向上均匀分布。

Property:	Function:
Pad d in g	The padding ins ide the edg es of the layout group.
Sp acing	The sp acing between the layout elements.
Child Ali gnment	The alignment to use for the child layout elements if they don‘t fill out all the av ailable 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 conside rs 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 Ex pand	Whether to force the child layout elements to expand to fill additional av ailable sp ace.

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

操作步骤：

创建一个空物体，并添加HorizontalLayoutGroup组件。
创建一个子物体预制体，包含一个Text组件。
将子物体预制体拖拽到layoutGroup的Child Prefab属性中。
运行游戏，可以看到三个子物体在水平方向上均匀分布。

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

操作步骤：

创建一个空物体，并添加HorizontalLayoutGroup组件。
创建一个子物体预制体，包含一个Text组件。
将子物体预制体拖拽到layoutGroup的Child Prefab属性中。
将layoutGroup的Spacing属性设置为20。
运行游戏，可以看到子物体之间的间距变为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);
        }
    }
}

操作步骤：

创建一个空物体，并添加HorizontalLayoutGroup组件。
创建一个子物体预制体，包含一个Text组件。
将子物体预制体拖拽到layoutGroup的Child Pre fab属性中。
将layoutGroup的Child Force Expand Width属性设置为true。
运行游戏，可以看到子物体的宽度被扩展以填充整个水平布局。

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

操作步骤：

创建一个空物体，并添加HorizontalLayoutGroup组件。
创建一个子物体预制体，包含一个Text组件。
将子物体预制体拖拽到layoutGroup的Child Prefab属性中。
将layoutGroup的Child Control Width和Child Control Height属性都设置为false。
运行游戏，可以看到子物体的宽度和高度不受控制，保持原始大小。

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