自动布局组件可以根据元素的内容自动调节元素的布局,在和滚动列表配合显示动态元素时比较方便。
拥有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