Unity UI表格布局组件+滑动组件组合使用

组件介绍:

Grid Layout Group:表格(网格)布局组件,可以让数据按表格的形式排列。

Padding:控制所有子物体的整体的外边距。

Cell Size:子物体尺寸;

Spacing:子物体之间的间距;

Start Corner:子物体开始的角度位置;

Start Axis:子物体开始的轴向;

Child Alignment:子物体对其方式;

Constraint:约束方式,灵活--灵活列数--灵活行数;

ScrollRect:滑动组件

Content:ScrollRect 控制的数据区域;

Horizontal:控制数据是否可以横向拖动;

Vertical:控制数据是否可以纵向拖动;

Movement Type:三种运动类型;[不限制 -- 弹性 -- 不动]

Mask遮罩组件:

 

 勾选Show Mask Graphic则子物体 只会显示 当前物体大小区域的内容;

取消勾选则不显示 当前物体的内容 与 子物体超出范围的内容。

可滑动背包Demo:

层级结构:
Image + ScrollRect + Mask [背景图片,滑动组件,区域遮罩]
---Grid Layout Group [表格布局组件]
---Item [N 个同级别的子物体]

 ①先创建一个名为BG的Image为背景,在Image上添加ScrollRect滑动组件,再添加一个Mask遮罩组件

②创建一个名为Grid的空物体作为容器,添加Grid Layout Group表格布局组件,添加Content Size Fitter组件自动控制UI的滑动范围的宽高(因为当前是上下滑动,所以设置Vertical Fit垂直属性为Preferred Size);

 ③将Grid整个物体拖拽到Grid Layout Group组件的Content数据控制区域完成绑定,并取消勾选Horizontal,将不支持水平拖动功能,只可以垂直拖动。

 

 ④如果想让子物体从上往下,从左到右的顺序依次出现,则可以修改Grid容器的九宫定位为top的其中一个布局并调整Pivot锚点即可。

Horizontal Layout Group:横向布局组件

Vertical Layout Group:纵向布局组件

表格布局组件是功能最全的一个布局组件,可以实现表格,横向,纵向布局;

而横向布局组件可以理解成是表格布局组件功能的一部分。

横向布局组件与纵向布局组件的属性完全一样。

属性:

Child Controls Size:子物体的大小。

|---勾选 Width:自动缩放所有子物体的宽度,让子物体横向占满空间.

|---勾选 Height:自动缩放所有子物体的高度,让子物体竖向占满空间.

Child Force Expand:子物体的扩展。

如果要使用上方的“子物体的大小”属性,这里的属性必须勾选。

上方的属性依赖该属性。

可滑动背包Demo2:

与表格布局的做法完全一致就不细说了,直接上图看设置吧。

Horizontal Layout Group:横向布局组件

 

Vertical Layout Group:纵向布局组件

猜你喜欢

转载自blog.csdn.net/weixin_55532142/article/details/124808890