Auto Layout System
Vertical Layout Group
Grid Layout Group
Layout Fitter
Aspect Ratio Fitter
Auto Layout System 是基于 Rect Transform Layout System 之上的系统,自动调整一个或多个的元素大小、位置、间格,又分为 Layout Controllers(父物件) 与 Layout Elements(子物件) 两部分,一个简单的 Auto Layout 架构如下 (此处介绍理论,实作留到后面)
![](http://img.manew.com/data/attachment/forum/201610/03/225235fj976d79gmo33a3c.png.thumb.jpg)
Layout Element (子物件)
![](http://img.manew.com/data/attachment/forum/201610/03/225235iecz7wdiicetdiel.png.thumb.jpg)
![](http://img.manew.com/data/attachment/forum/201610/03/225236iwj1kc8xotozkjnw.png.thumb.jpg)
点选UI后,可以在 Inspector 最下方切换为 Layout Properties 看到资讯
![](http://img.manew.com/data/attachment/forum/201610/03/225236e5nustn5oi7pf5jk.png.thumb.jpg)
![](http://img.manew.com/data/attachment/forum/201610/03/225236kfz35tnj6n70go7a.png.thumb.jpg)
Layout Controllers 透过不同的佈局方式,取得 Layout Element size 分配子物件,基本原则如下
首先分配 Minimum Size
如果还有足够空间,分配 Preferred Size
如果还有额外空间,分配 Flexible Size
从以下图片可以看出图片宽度的增长方式 (此处介绍理论,实作留到后面)
![](http://img.manew.com/data/attachment/forum/201610/03/225236ntcup50shstblthr.png.thumb.jpg)
![](http://img.manew.com/data/attachment/forum/201610/03/225236i66zy66jjqilji00.png.thumb.jpg)
首先分配 Minimum Size (300,红色部分)
如果还有足够空间,分配 Preferred Size (300~500,绿色部分)
如果还有额外空间,分配 Flexible Size:1 (500~700,蓝色部分)
比较特别的是 Flexible,他是代表著整个大小的比例,如果 Layout 下有2个物体,分别给 Flexible 设定为 0.3 与 0.7,那比例就会变成下图 (3:7)
![](http://img.manew.com/data/attachment/forum/201610/03/225237wgbb5pgm1rlgsgr2.png.thumb.jpg)
另外要注意的是,Text、Image Component 会根据内容大小自动分配 Preferred Size
Layout Controllers (父物件)
Layout Group
不会控制 Layout Controllers (父物件)自身大小,而是控制子物件大小与位置,在大多数情况下,根据每个元素的 minimum、preferred、flexible 大小分配适当的空间,layout group 之间也可以嵌套,又分为 Horizontal(水平)、Vertical(垂直)、Grid(格状) 3种
Horizontal Layout Group
![](http://img.manew.com/data/attachment/forum/201610/03/225237ylljm64ugvjl2jyu.png.thumb.jpg)
水平方向(Width) 排列子物件
组件位置:Unity Menu Item → Component → Layout → Horizontal Layout Group
Padding:填充内部空间
Spacing:每个元素间格
Child Alignment:当没有填满全部空间时,子物件对齐位置
Child Force Expand:强制控制子物件填满空间
透过实例理解各参数:
A.开新 Scene
Unity Menu Item → File → New Scene
B.新增一个 Canvas
Unity Menu Item → GameObject → UI → Canvas
C.Canvas 下新增空物件,做为 Layout Controllers (以下简称父物件)
D.父物件增加 Horizontal Layout Group Component
Unity Menu Item → Component → Layout → Horizontal Layout Group
E.父物件下建立5个 Button(子物件),完成后如下,当大小改变时会自动分配子物件大小
![](http://img.manew.com/data/attachment/forum/201610/03/225239x719yoaqn64g6943.gif)
F.此时在 Button 的 Rect Transform Component 就不能进行调整,因为我们已经透过 Horizontal Layout Group 进行分配空间,在 Rect Transform 会显示目前被哪个 Layout Group 控制
![](http://img.manew.com/data/attachment/forum/201610/03/225239rp5xso7sy0ro0ffu.png.thumb.jpg)
G.将 Padding 数值调整如图,可以看出填充区域
![](http://img.manew.com/data/attachment/forum/201610/03/225239l711mkqr78njq778.png.thumb.jpg)
H.将 Spacing 数值调整如图,可以看出元素区间
![](http://img.manew.com/data/attachment/forum/201610/03/225240xlhpw2pww0ozpl4z.png.thumb.jpg)
I.接下来我们将5个 Button 增加 Layout Element Component 覆盖预设大小,用于手动设定每个元素的大小
组件位置:Unity Menu Item → Component → Layout → Layout Element
J.此时将 Horizontal Layout Group 的 Child Force Expand Width 取消勾选,不强制子物件填满额外空间,而是透过 Layout Element 手动设定
K.这裡使用几种不同的设定,来理解 Horizontal Layout Group 是怎麽取得 Layout Element size 分配子物件
■ 复习一下子物件大小分配方式,如果不清楚请回去上面 Layout Elements 部分
首先分配 Minimum Size
如果还有足够空间,分配 Preferred Size
如果还有额外空间,分配 Flexible Size
■ 将5个 Button 的 Layout Element Min Width 分别改为 20、30、40、50、60,此时可以看出每个 Button 宽度分佈,改变父物件大小时子物件大小并不会改变,因为只有分配 Min Width,并不会分配额外有效空间
![](http://img.manew.com/data/attachment/forum/201610/03/225241p2ddx9i89gw18jit.gif)
此时改变 Horizontal Layout Group 的 Child Alignment,可以看出元素对齐
![](http://img.manew.com/data/attachment/forum/201610/03/225242ynsppgf2p5ghpp59.gif)
父物件 Layout Properties Min Width = 5个按钮宽(20+30+40+50+60=200) + Spacing(40) + Padding Left、Right(20) = 260
![](http://img.manew.com/data/attachment/forum/201610/03/225242kh5893798svq343d.png.thumb.jpg)
■ 现在将第1个 Button 的 Layout Element 数值调整如图
![](http://img.manew.com/data/attachment/forum/201610/03/225242hlkgtobgt8k4br6z.png.thumb.jpg)
这边设定 Preferred Width 为 100
1.首先分配 Minimum Size(20)
2.空间足够的情况下,将会分配剩下的 Preferred Size (20~100 空间),如下所示
![](http://img.manew.com/data/attachment/forum/201610/03/225243vukzl66966sknsyc.gif)
■ 现在将第1个 Button 的 Layout Element 数值调整如图
![](http://img.manew.com/data/attachment/forum/201610/03/225243l4dsyldd4rdga1rl.png.thumb.jpg)
这边设定 Flexible Width 为 1
1.首先分配 Minimum Size(20)
2.如果还有足够空间,将会分配剩下的 Preferred Size (20~100 空间)
3.如果还有额外空间,分配剩下 Flexible Size,如下所示
![](http://img.manew.com/data/attachment/forum/201610/03/225244jwwbwmpymyb3wdm6.gif)
■ 现在将 Horizontal Layout Group 的 Child Force Expand Width 勾选,让子物件强制填满
1.首先分配 Minimum Size(20)
2.如果还有足够空间,将会分配剩下的 Preferred Size (20~100 空间)
3.如果还有额外空间,分配剩下元素 Flexible Size 与 Child Force Expand Width
![](http://img.manew.com/data/attachment/forum/201610/03/225246i6pm3ddok9dmmkrd.gif)
结论:
上面我们看到,所有元素会先被分配 Minimum Size,接下来还有足够空间,将会分配剩下的 Preferred Size,最后才是 Flexible Size 与 Child Force Expand Width
至此我们了解到 Horizontal Layout Group 是怎麽取得 Layout Element size 分配子物件
Vertical Layout Group
![](http://img.manew.com/data/attachment/forum/201610/03/225246u7azgux7qf2guhmh.png.thumb.jpg)
垂直方向(Height) 排列子物件,与 Horizontal Layout Group 只差在水平或是垂直,这边不在赘述
组件位置:Unity Menu Item → Component → Layout → Vertical Layout Group
Grid Layout Group
![](http://img.manew.com/data/attachment/forum/201610/03/225246gqhtaug2u3gz6fnh.png.thumb.jpg)
网格方式排列子物件
组件位置:Unity Menu Item → Component → Layout → Grid Layout Group
Padding:填充内部空间
Cell Size:每个元素的宽高
![](http://img.manew.com/data/attachment/forum/201610/03/225248ek7sjxkkuyvlvon6.gif)
Spacing:每个元素间格
Start Corner:开始排列的角落(位置),又分为 “左上”、”右上”、”左下”、”右下”,请仔细看元素数字
![](http://img.manew.com/data/attachment/forum/201610/03/225248x2ermyed4gl91n6z.gif)
Start Axis:”水平” 或是 “垂直” 排列,请仔细看元素数字
![](http://img.manew.com/data/attachment/forum/201610/03/225248mocco9ssfskcjf49.gif)
Child Alignment:当没有填满全部空间时,子物件对齐位置
Constraint:排列限制
Flexible:自动根据大小弹性排列
Fixed Column Count:限制排列 “行数(直)”
Fixed Row Count:限制排列 “列数(横)”
Layout Fitter
控制著 Layout Controllers 自身大小,大小取决于子物件,或是设定的大小比例,又分为 Content Size Fitter 与 Aspect Ratio Fitter
Content Size Fitter
![](http://img.manew.com/data/attachment/forum/201610/03/225249cdu99a65fvxjraa3.png.thumb.jpg)
控制著 Layout Controllers (父物件)自身大小,大小取决于子物件的 Minimum 或是 Preferred 大小,能透过 Pivot 改变缩放方向
组件位置:Unity Menu Item → Component → Layout → Content Size Fitter
Horizontal、Vertical Fit:水平、垂直 适应调整
None 不调整
Min Size 根据子物件的 Minimum 大小进行调整
Preferred Size 根据子物件的 Preferred 大小进行调整
透过实例理解:
如果我们现在有一个需求,必需要让 “父物件大小” 根据 “子物件大小” 进行缩放,完成如下 (方便明显看出父物件大小,增加黑色外框)
![](http://img.manew.com/data/attachment/forum/201610/03/225249w7bjavdjskfhbwjr.gif)
A.开新 Scene
Unity Menu Item → File → New Scene
B.新增一个 Canvas
Unity Menu Item → GameObject → UI → Canvas
C.Canvas 下新增空物件,做为 Layout Controllers (以下简称父物件)
D.父物件增加 Horizontal Layout Group Component
Unity Menu Item → Component → Layout → Horizontal Layout Group
这时如果增加 Button(子物件),上面有提到,Horizontal Layout Group 会根据子物件的 Layout Element 进行分配子物件大小,而不会修改父物件本身的大小,如下所示 (方便明显看出父物件大小,增加黑色外框)
![](http://img.manew.com/data/attachment/forum/201610/03/225249qdjqdxdelmpdjwdk.gif)
E.父物件下增加 Button(子物件),并增加 Layout Element Component 覆盖预设大小,Minimum Width 调整为 100
组件位置:Unity Menu Item → Component → Layout → Layout Element
F.父物件增加 Content Size Fitter Component,Horizontal Fit 调整为 Min Size,透过子物件 Minimum Width 调整父物件本身大小 (Horizontal 方向其实就是取得子物件 Width)
![](http://img.manew.com/data/attachment/forum/201610/03/225249xnd2cttq2b44d4nm.png.thumb.jpg)
G.此时如果 Button 複製增加,父物件本身的大小也会跟著改变,如下所示
![](http://img.manew.com/data/attachment/forum/201610/03/225249hec0zegdk4ne47lz.gif)
H.调整父物件的 pivot,可以控制缩放方向,如下所示
![](http://img.manew.com/data/attachment/forum/201610/03/225250ignnnwn51llpwp7n.gif)
I.通过上面实例,我们首先使用 Horizontal Layout Group 排列子物件,并在子物件增加 Layout Element 覆盖预设大小,最后透过 Content Size Fitter 取得子物件 Layout Element 设定父物件大小,至此父物件大小就会根据子物件大小进行缩放
Aspect Ratio Fitter
![](http://img.manew.com/data/attachment/forum/201610/03/225250exw21xlebwebrbr0.png.thumb.jpg)
控制著 Layout Controllers 自身大小,按照物件宽高比调整大小,能透过 pivot 改变缩放方向
组件位置:Unity Menu Item → Component → Layout → Aspect Ratio Fitter
Aspect Mode:调整模式
None:不调整
Width Controls Height:
基于 Width 为基准,依据比例改变 Height
![](http://img.manew.com/data/attachment/forum/201610/03/225250jfz2xkzgs8s0wj0h.gif)
当 Width 改变时,Height 会依比例改变
![](http://img.manew.com/data/attachment/forum/201610/03/225250ieab1o6b11ja7ai6.gif)
Height Controls Width:
基于 Height 为基准,依据比例改变 Width
![](http://img.manew.com/data/attachment/forum/201610/03/225250fr0le0l1pc0ozjeb.gif)
当 Height 改变时,Width 会依比例改变
![](http://img.manew.com/data/attachment/forum/201610/03/225250g45m542ijshj85uy.gif)
Fit In Parent:依据比例将 宽高、位置、anchors自动调整,使此图形大小在父物件中完全贴齐,此模式可能不会包覆所有空间
调整比例 (方便明显看出父物件增加黑底)
![](http://img.manew.com/data/attachment/forum/201610/03/225251xrp8n5285ntb8mfw.gif)
调整父物件大小,物体会依据比例贴齐父物件
![](http://img.manew.com/data/attachment/forum/201610/03/225251nbjdhjq9dlataz2t.gif)
Envelope Parent:依据比例将 宽高、位置、anchors自动调整,使此图形大小完全包覆父物件,此模式可能会超出空间
调整比例 (方便明显看出父物件增加黑框)
![](http://img.manew.com/data/attachment/forum/201610/03/225251r1sizc1a7xx1pl13.gif)
调整父物件大小,物体会依据比例包覆父物件
![](http://img.manew.com/data/attachment/forum/201610/03/225251pcvy3yt6gm5ypt5e.gif)
Aspect Ratio:比例,此数值为 宽/高
差别:
Content Size Fitter 是透过子物件自动进行调整大小
Aspect Ratio Fitter 是透过数值(宽高比)进行调整
后记
Auto Layout System 可以快速、方便的排列多个 UI,当大小改变时会自动调整内容,也能应用在多层崁套下,在日后调整与修改上也是非常方便与直觉,是 UI 系统中必学的功能之一 !!
参考资料
■ Unity – Manual- Auto Layout
http://docs.unity3d.com/Manual/UIAutoLayout.html
■ Unity – Manual- Auto Layout_UI Reference
http://docs.unity3d.com/Manual/comp-UIAutoLayout.html
原文作者: k79k06k02k
原文链接:
http://k79k06k02k.com/blog/542/unity/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%BA%94%EF%BC%9Aauto-layout-%E8%87%AA%E5%8B%95%E4%BD%88%E5%B1%80