大多数现代GUI框架都有布局管理器的概念,布局管理器可以自动处理一组控件的大小和排列方式,适用于需要列表、表格等形式展现内容的情况。UGUI也是类似的,为我们提供了几种实用的布局方式,基于这些布局我们可以无需编写代码实现各种自适应排版的效果。
UGUI中有关布局的功能也都是以组件方式提供,我们可以在编辑器中查看Layout分类。
在具体介绍布局之前,我们需要先看一下Layout Element这个组件。
我们知道UI控件上都有RectTransform
组件,其中定义了控件的长宽。然而在使用布局管理时,组件可能需要做出一定的缩放、拉伸等,以实现自动排版,此时组件的宽高是基于一定规则自动计算出来的,Layout Element组件被附加在接受布局管理器管理的子控件上,其中包含自动计算子控件布局宽高所需的一系列字段。
Layout Element组件中包含如下几组字段:
具体计算布局时,会遵循以下规则:
我们这里看一个例子,下面图中有5个Image控件(使用颜色进行了区分),位于同一个Horizontal Layout Group中。
为了演示布局参数的作用,我们这里仅观察其宽度设置,具体设置如下:
在外层Horizontal Layout Group中,我们勾选Control Child Size自动处理子控件的宽度,即可看到如图效果。
这两个组件类似,可以理解为一个列表布局,区别前者是水平方向的,后者是垂直方向的,我们这里以水平布局为例。
其中包含如下字段:
水平和垂直布局互相嵌套,可以组合成十分复杂的布局效果。
Grid Layout Group
即网格布局或是叫做表格布局,布局中可以指定单元格的大小,供子控件依次填充。
网格布局的属性都比较简单,它不像水平和垂直布局可能会参与到十分复杂的布局构建中,网格布局主要用于背包格子、技能列表之类的表格数据展示场景,这里就不多介绍了。
除了RectTransform指定控件宽高、布局自动管理控件宽高,UGUI也提供了根据控件内容自动伸缩宽高的组件,这里我们简单介绍一下。
Content Size Fitter
能够实现根据内容自动设定组件的大小,并指定为Preferred Size或Min Size,例如应用在Text组件,即可实现组件大小实时包裹内部的文本,这样能做到即使文本很多也不会超出组件边界导致文字被隐藏,文本很少也不会浪费空间,使得我们的布局紧凑美观。
Aspect Ratio Fitter
直译为横纵比例适配,它能够根据所选规则保持横纵比例不变的自动控制控件的宽或高。
Aspect Mode可选值如下:
这些模式都比较好理解,我们自行在Unity编辑器里简单尝试即可,这里就不多介绍了。