【Unity3D】UGUI之布局组件

1 概述

        布局组件主要有：水平布局（HorizontalLayoutGroup）、垂直布局（VerticalLayoutGroup）、网格布局（GridLayoutGroup），用于约束子控件的布局方式，这些布局都有以下共同属性：

• Padding：边距，父控件向内收缩的空间，子控件只能在此收缩空间内布局，避免子控件太贴边
• Spacing：间距，子控件向外延申的空间，避免子控件间挨得太紧凑
• Child Alignment：子控件对齐方式

2 水平布局 HorizontalLayoutGroup

        新建一个 Image 控件，重命名为 Group，调整背景色为蓝色，在其下创建 4 个 Toggle 子控件，重命名为 Toggle1~Toggle4，其 text 内容分别为：One、Two、Three、Four，控件层级结构如下：

         为 Group 控件添加 HorizontalLayoutGroup 组件，如下：

         调整 Group 控件宽高为 350x50，Toggle1~Toggle4 控件宽高为 60x20，显示效果如下：

3 垂直布局 VerticalLayoutGroup

        新建一个 Image 控件，重命名为 Group，调整背景色为蓝色，在其下创建 4 个 Toggle 子控件，重命名为 Toggle1~Toggle4，其 text 内容分别为：One、Two、Three、Four，控件层级结构如下：

         为 Group 控件添加 VerticalLayoutGroup 组件，如下：

         调整 Group 控件宽高为 120x140，Toggle1~Toggle4 控件宽高为 60x20，显示效果如下：

4 网格布局 GridLayoutGroup

        新建一个 Image 控件，重命名为 Group，调整背景色为蓝色，在其下创建 9 个 Toggle 子控件，重命名为 Toggle1~Toggle9，其 text 内容分别为：One~Nine，控件层级结构如下：

        为 Group 控件添加 GridLayoutGroup 组件，如下：

        调整 Group 控件宽高为 220x100，Toggle1~Toggle9 控件宽高为 60x20，显示效果如下：