UGUI自动布局

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

拥有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的宽高;

转载自 :http://blog.csdn.net/u012632851/article/details/77008230

你可能感兴趣的:(UGUI自动布局)