Layout布局系统
大多数现代GUI框架都有布局管理器的概念，布局管理器可以自动处理一组控件的大小和排列方式，适用于需要列表、表格等形式展现内容的情况。UGUI也是类似的，为我们提供了几种实用的布局方式，基于这些布局我们可以无需编写代码实现各种自适应排版的效果。
UGUI中有关布局的功能也都是以组件方式提供，我们可以在编辑器中查看Layout分类。
Layout Element 布局元素设置
在具体介绍布局之前，我们需要先看一下Layout Element这个组件。
我们知道UI控件上都有RectTransform组件，其中定义了控件的长宽。然而在使用布局管理时，组件可能需要做出一定的缩放、拉伸等，以实现自动排版，此时组件的宽高是基于一定规则自动计算出来的，Layout Element组件被附加在接受布局管理器管理的子控件上，其中包含自动计算子控件布局宽高所需的一系列字段。
Layout Element组件中包含如下几组字段：
- Min：最小宽高
- Preferred：首选宽高（但不能违背最小宽高）
- Flexible：伸缩宽高的权重
具体计算布局时，会遵循以下规则：
- 控件如果设置了最小宽高，必须最优先满足
- 在保证所有控件满足1的条件下，控件如果设置首选宽高，优先满足首选宽高
- 如果设置了伸缩权重，按照权重对剩余空间进行分配
我们这里看一个例子，下面图中有5个Image控件（使用颜色进行了区分），位于同一个Horizontal Layout Group中。
为了演示布局参数的作用，我们这里仅观察其宽度设置，具体设置如下：
- Image1：Min 50 Preferred 99999 Flexible 1
- Image2：Min 50 Flexible 1
- Image3：Min 50 Flexible 1
- Image4：Min 50 Flexible 1
- Image5：Min 50 Flexible 1
在外层Horizontal Layout Group中，我们勾选Control Child Size自动处理子控件的宽度，即可看到如图效果。
布局管理器
Horizontal Layout Group和Vertical Layout Group
这两个组件类似，可以理解为一个列表布局，区别前者是水平方向的，后者是垂直方向的，我们这里以水平布局为例。
其中包含如下字段：
- Padding：四周向内的间隔（类似于Web开发中CSS的Padding概念）
- Spacing：元素之间的间隔
- Child Alignment：子控件的对齐方式
- Control Child Size：自动处理子控件宽高
- Use Child Scale：计算布局时考虑缩放的元素
- Child Force Expand：子元素使用RectTransform宽高并填充布局大小
水平和垂直布局互相嵌套，可以组合成十分复杂的布局效果。
Grid Layout Group
Grid Layout Group即网格布局或是叫做表格布局，布局中可以指定单元格的大小，供子控件依次填充。
网格布局的属性都比较简单，它不像水平和垂直布局可能会参与到十分复杂的布局构建中，网格布局主要用于背包格子、技能列表之类的表格数据展示场景，这里就不多介绍了。
自适应大小
除了RectTransform指定控件宽高、布局自动管理控件宽高，UGUI也提供了根据控件内容自动伸缩宽高的组件，这里我们简单介绍一下。
Content Size Fitter
Content Size Fitter能够实现根据内容自动设定组件的大小，并指定为Preferred Size或Min Size，例如应用在Text组件，即可实现组件大小实时包裹内部的文本，这样能做到即使文本很多也不会超出组件边界导致文字被隐藏，文本很少也不会浪费空间，使得我们的布局紧凑美观。
Aspect Ratio Fitter
Aspect Ratio Fitter直译为横纵比例适配，它能够根据所选规则保持横纵比例不变的自动控制控件的宽或高。
Aspect Mode可选值如下：
- None：不启用
- Width Controls Height：根据Width和原设定的比例自动计算Height
- Height Controls Width：根据Height和原设定的比例自动计算Width
- Fit In Parent：保持比例的前提下最大化填充进父控件
- Envelope Parent：保持比例的前提下最小化覆盖住父控件
这些模式都比较好理解，我们自行在Unity编辑器里简单尝试即可，这里就不多介绍了。