Unity3D 官方文档 UGUI总览 自动布局组件的介绍

版本：unity 5.6  语言：C#

 

总起：

自动布局组件可以根据元素的内容自动调节元素的布局，在和滚动列表配合显示动态元素时比较方便。

 

拥有Layout Element脚本的是子元素，放在相应的Layout Group父节点上，Layout Group就会根据其Width、Height进行布局。

 

自动布局组件：

♦ Layout Element

自动布局的元素，任何的需要自动布局的GameObject都需要添加此脚本。



Min Width：布局元素最小的宽度；

 

Min Height：布局元素最小的高度；

 

Preferred Width：布局元素首选的宽度；

 

Preferred Height：布局元素首选的高度；

 

Flexible Width：弹性宽度；

 

Flexible Height：弹性高度；

 

以上三种宽高遵循以下原则进行适配：

1.首先Min的宽高会被适配；

2.如果有足够的空间，则Preferred的宽高会被适配；

3.如果有剩余的空间，则Flexible的宽高会被适配。

 

前两个比较好理解，空间不够就Min，空间够，尽量Preferred，那么第三种是什么意思呢？

 

如果分配完Preferred还有剩余空间，那么Layout Group组件会根据Flexible的比例将剩余空间分配给子元素。假设A为1，B为2，C为0，剩余了300的空间，则A会分到100，B会分到200，而C不会分到空间。

 

要使Layout Group可以控制其子节点的大小，请勾选其上的Control Child Size，以上设置才能生效。

 

♦ Content Size Fitter

该脚本可以根据子元素的宽高适配Layout的宽高，跟上一个脚本的作用刚好相反：



Horizontal Fit：水平的适配方式；

 

Vertical Fit：垂直的适配方式；

 

适配的三种方式：

1.None，不进行适配；

2.Minimum，根据元素的最小宽度进行适配；

3.Preferred，根据元素的首选宽度进行适配。

 

♦ Aspect Ratio Fitter

根据比例控制当前的宽高：



Aspect Mode：控制的模式：

1.None，不进行控制；

2.Width Controls Height，宽控制高；

3.Height Controls Width，高控制宽；

4.Fit In Parent，宽高比例为1:1，以父节点的宽高最小值为该节点的宽高；

5.Envelope Parent，宽高比例为1:1，以父节点的宽高最大值为该节点的宽高；

6.Aspect Ratio（2017），宽高比。

 

♦ Horizontal Layout Group

水平布局，元素会一个挨着一个沿着水平方向排过去，如果超过了这个该Layout Group宽度，并不会换行，而且直接继续排下去：



Padding：Layout边缘的间隙；

 

Spacing：Layout元素之间的间隙；

 

Child Alignment：子元素的对齐方式，就是文字对齐的那九种，不多说了；

 

Control Child Size：是否会控制子元素的宽高，只有启用该选项Layout Element的设置才会起作用；

 

Child Force Expand：是否强制子元素扩张以填满多余空间，该选项不受Flexible属性的影响，并且优先级比Flexible属性高，以1:1的比例进行分配。

 

♦ Vertical Layout Group

垂直布局，与水平布局类似，不多说了。

 

♦ Grid Layout Group

网格布局，将元素依次排入网格中，如果超过宽度或高度，则换行：



Padding：Layout边缘的间隙；

 

Cell Size：每个元素的尺寸，该值会控制子元素的宽高；

 

Start Corner：第一个元素所定位角落；

 

Start Axis：排列方式，一种水平、一种垂直；

 

Child Alignment：对齐方式，九种，不多说；

 

Constraint：元素换行的参考：

1.Flexible，自动适配，宽高不够了，则换行；

2.Fixed Column Count，指定行元素的数量进行换行；

3.Fixed Row Count，指定列元素的数量进行换行。

 

Grid Layout Group可以配合Content Size Fitter自动计算父节点的宽高，有那么三种模式，首先将Content Size Fitter全设置为Preferred Size：

1.Constraint设置为Fixed Row Count，优先垂直排列元素，超过则增加父节点的宽度；

2.Constraint设置为Fixed Column Count，优先水平排列元素，超过则增加父节点的高度；

3.Constraint设置为Flexible，根据元素数量，设置最佳的宽高，水平优先，同时尽量使宽高比例靠近1:1。

 

RectTransform几个控制坐标的方法：

如果你还是使用localPosition来手动控制UI的坐标，那很有可能得到一个错误的结果，这边介绍几个控制坐标的常用方法，如果对于锚点和轴点还不是很熟，可以参考我上上篇文章的介绍。

 

RectTransform.anchoredPosition，设置轴点和锚点之间的距离，最为常用；

 

RectTransform.offsetMin，设置左下角小蓝点于锚点的距离；

 

RectTransform.offsetMax，设置右上角小蓝点于锚点的距离；

 

RectTransform.sizeDelta，就是UI的宽高；

 

UGUI的内容基本上差不多了，但还有个内容IMGUI，其实就是OnGUI，当然因为其效率问题，在实际的UI制作中使用的越来越少了，但是如果你制作写Edtior脚本，自己扩展Unity编辑器，这方面的知识是必不可少的。

 
下篇文章就会重点介绍这方面的知识。

 

个人：

稍作休息，等下继续研究！