列表控件Horizontal/Vertical/Grid Layout Group使用说明

列表控件Horizontal/Vertical/Grid Layout Group使用说明

Grid Layout Group

为Panel控件添加Grid Layout Group,子控件为四个按钮,分别为Grid,Calendar,Gear,User:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
默认属性为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
为方便演示,按钮的底色为控件自带image,按钮上面的图标为其子控件image:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
显示效果为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
Padding为设置父控件内部与子控件周围的空白间隙,比如这样设置:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
显示效果:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
cell size为子控件大小,spacing为彼此之间的空白:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
显示效果为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
Start Corner为子控件排列起始点,(排列方式和数量由Start Axis和Constraint决定,后面再说)默认为先从左到右排满一行再排列下一行:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
Start Corner设为Upper Right会发现,按钮控件先从最右上角开始排列,从右往左排满一行再到下一行继续从右往左排列:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
Start Corner设为Lower Left为控件先从左往右排列,排满一行再到上一行继续从左往右排列:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
Start Corner设为Lower Right以此类推。

Start Axis则决定了是先水平排还是先垂直排,如果设为Vertical(垂直排列),配合Upper Left,效果则为先垂直从上到下排满最左边一列,再去排下一列:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
child Alignment很简单,设定子控件在父控件内部的位置:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
比如设为Middle Left,效果就是这样的,其他以此类推:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
Constraint的第一个Flexible即响应式,根据宽度自动决定每行数量

列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:
列表控件Horizontal/Vertical/Grid Layout Group使用说明
Fixed Colomn Count则强制规定列的数量,搭配Start Corner和Start Axis使用。

比如将Constraint Count设为1,Start Corner为Upper Right,Start Axis为Verical,就是只有一列,从右上角开始排列,垂直排满一列:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
将Constraint Count设为2,Start Corner和Start Axis不变,就是垂直排为两列,从右上角开始排列,先垂直排列,再水平排列,第一个按钮在右上角,第二个按钮在右下角:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
将Constraint Count设为3,Start Corner和Start Axis不变,此时效果不变,原因是控件将垂直排为三列,每列一个控件,会排为四列,所以每一列只能设为两个控件,但根据排列顺序,要先排满一列,才会去排下一列,所以右侧的两列每列一个控件之后,最左侧的第三列就空着了:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
其余配置保持不变,将Start Axis改为Horizontal(水平),效果为这样,这就比较好理解了,是从右上角先水平排列,排满一行(三列)之后排第二行:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
Fixed Row Count与此类似,只不过限定的是行数:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明

Horizontal Layout Group

水平分割布局控件

Padding和Spacing与Grid Layout Group的功能类似,不再赘述。

列表控件Horizontal/Vertical/Grid Layout Group使用说明
Child Alignment设定子控件在父控件内部的位置,将Child Control Size和Child Force Expand所有选项都勾掉,此时子控件的长宽可以*设定,切换Child Alignment,可以看到子控件的位置在变化:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
列表控件Horizontal/Vertical/Grid Layout Group使用说明
列表控件Horizontal/Vertical/Grid Layout Group使用说明
Child Force Expand设置子控件是否均匀分布于父控件内部,比如勾选Child Force Expand-Width之后的效果:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
效果为:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
取消勾选Child Force Expand-Width之后的效果:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
列表控件Horizontal/Vertical/Grid Layout Group使用说明
可以看到,勾选之后虽然子控件可以根据父控件的宽度均匀分布在其内部,但却没有填满。如果需要填满父控件,则可以同时勾选Child Force Expand-Width和Child Controls Size-Width:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
列表控件Horizontal/Vertical/Grid Layout Group使用说明
同时勾选Child Force Expand-Height和Child Controls Size-Height则可以在高度上填满父控件:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
列表控件Horizontal/Vertical/Grid Layout Group使用说明
如果只勾选Child Controls Size不勾选Child Force Expand会怎样?子控件的宽度或高度会强制变为0,所以一般Child Controls Size是搭配Child Force Expand使用:

列表控件Horizontal/Vertical/Grid Layout Group使用说明
列表控件Horizontal/Vertical/Grid Layout Group使用说明
列表控件Horizontal/Vertical/Grid Layout Group使用说明

Vertical Layout Group

与Horizontal Layout Group类似。