Layout布局系统

大多数现代GUI框架都有布局管理器的概念,布局管理器可以自动处理一组控件的大小和排列方式,适用于需要列表、表格等形式展现内容的情况。UGUI也是类似的,为我们提供了几种实用的布局方式,基于这些布局我们可以无需编写代码实现各种自适应排版的效果。

UGUI中有关布局的功能也都是以组件方式提供,我们可以在编辑器中查看Layout分类。

Layout Element 布局元素设置

在具体介绍布局之前,我们需要先看一下Layout Element这个组件。

我们知道UI控件上都有RectTransform组件,其中定义了控件的长宽。然而在使用布局管理时,组件可能需要做出一定的缩放、拉伸等,以实现自动排版,此时组件的宽高是基于一定规则自动计算出来的,Layout Element组件被附加在接受布局管理器管理的子控件上,其中包含自动计算子控件布局宽高所需的一系列字段。

Layout Element组件中包含如下几组字段:

  • Min:最小宽高
  • Preferred:首选宽高(但不能违背最小宽高)
  • Flexible:伸缩宽高的权重

具体计算布局时,会遵循以下规则:

  1. 控件如果设置了最小宽高,必须最优先满足
  2. 在保证所有控件满足1的条件下,控件如果设置首选宽高,优先满足首选宽高
  3. 如果设置了伸缩权重,按照权重对剩余空间进行分配

我们这里看一个例子,下面图中有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编辑器里简单尝试即可,这里就不多介绍了。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap