UGUI 自动布局组件扫盲：水平、垂直、元素自动布局

闲谈

2023-05-29 19:27:22

UGUI 自动布局组件：助力 Unity 游戏 UI 设计

在 Unity 游戏开发中，UI 布局是影响游戏视觉效果和用户体验的重要因素。UGUI（Unity GUI）提供了丰富的自动布局组件，让开发者轻松实现 UI 元素的自动布局，无需手动调整位置和大小。

Layout Element 元素自动布局组件

Layout Element 元素自动布局组件是 UGUI 中最基础的自动布局组件，它适用于任何 UI 元素，提供自动布局属性。其主要属性包括：

Preferred Width： 元素的理想宽度，可设为数值或百分比。
Preferred Height： 元素的理想高度，可设为数值或百分比。
Flexible Width： 元素宽度是否随父元素调整，可设为 true/false。
Flexible Height： 元素高度是否随父元素调整，可设为 true/false。

Horizontal Layout Group 水平布局组件

Horizontal Layout Group 水平布局组件可水平排列子元素，支持均匀分布或根据理想大小排列。其主要属性包括：

Spacing： 子元素间的间距，可设为数值或百分比。
Child Alignment： 子元素水平排列方式，可设为 Left、Center、Right。
Child Force Expand： 子元素是否随父元素扩展，可设为 true/false。

Vertical Layout Group 垂直布局组件

Vertical Layout Group 垂直布局组件可垂直排列子元素，同样支持均匀分布或理想大小排列。其主要属性包括：

Spacing： 子元素间的间距，可设为数值或百分比。
Child Alignment： 子元素垂直排列方式，可设为 Top、Center、Bottom。
Child Force Expand： 子元素是否随父元素扩展，可设为 true/false。

自动布局组件如何助力游戏 UI 设计？

UGUI 自动布局组件通过以下优势助力游戏 UI 设计：

简化布局过程： 无需手动调整元素，布局组件自动计算元素位置和大小。
适应性强： 布局组件可随着父元素或屏幕尺寸调整，确保 UI 元素始终合理排列。
优化用户体验： 自动布局组件根据设备屏幕和用户的交互行为优化 UI 布局，提升游戏体验。
代码示例： 以下代码演示了如何使用 Horizontal Layout Group 布局一组按钮：

using UnityEngine;
using UnityEngine.UI;

public class ButtonLayout : MonoBehaviour
{
    [SerializeField] private HorizontalLayoutGroup buttonGroup;

    private void Start()
    {
        // 获取按钮组中所有按钮
        Button[] buttons = buttonGroup.GetComponentsInChildren<Button>();

        // 设置按钮的理想宽度
        float buttonWidth = 100f;
        for (int i = 0; i < buttons.Length; i++)
        {
            buttons[i].GetComponent<LayoutElement>().preferredWidth = buttonWidth;
        }

        // 设置按钮组的间距
        buttonGroup.spacing = 10f;
    }
}