Unity实现滑动列表(一)

Step1:创建UI结构

Unity实现滑动列表(一)_第1张图片
先要有一个框架frame,框架下包括两个东西,一个是列表list,一个是滑动条scrollbar。
具体的列表项grid放在list的下面

Step2:为frame添加组件

为frame添加Scroll Rect组件和Mask组件
添加完组件后,Mask组件就这样放着就行了
但是需要对Scroll Rect组件进行如下操作:
1.将list拖入到Content里面去:这是说明list是我们要滑动的列表的对象
2.将Horizontal的勾去掉:因为我们要做的是上下滑动,如果要做左右滑动,就是去掉Vertical的勾
3.将Scroll Bar拖到Vertical Scrollbar里面去:这是将滑动条与滑动对象绑定起来
如果需要使超出某一范围的内容不可见的话,就要给frame上添加两个组件。
Image和Mask。
把Mask的Show Mask Graphic取消勾选,Image是不会显示图片的。
然后在ScrollRect里的ViewPort,把自身放进去,那么在自身范围内的内容才回可见了。
Unity实现滑动列表(一)_第2张图片

Step3:为list添加组件

首先要将list的锚点改为Top-Center,锚点的Y值设为1,不然的话,每次进去列表的初始位置不会在列表顶部
Unity实现滑动列表(一)_第3张图片
然后为list添加Grid Layout Group组件和Content Size Fitter这两个组件
Grid Layout Group组件说明:
Unity实现滑动列表(一)_第4张图片
Padding:上下左右的填充值
Cell Size:每个列表项的长宽大小
Spacing:列表项之间的间隔,X为左右两个的间隔距离,Y为上下两个的间隔距离
Start Corner:列表开始的位置,一般都是左上角
Start Axis:列表开始的轴,也就是决定列表是竖着排还是横着排
child Alignment:列表项的对齐方式,左对齐右对齐居中对齐啥的
Constraint:Flexible是自适应,另外两个选项是固定行数或固定列数的
Content Size Fitter组件说明
Unity实现滑动列表(一)_第5张图片
这个是设置水平和垂直方向的自动适配的。
Unconstrained与Preferred Size的差别:
Unconstrained:无论list下面有多少个grid,list的尺寸都是一个grid大小的尺寸。
Preferred Size:list的尺寸等于恰好可以包含住所有的grid的尺寸。
所以,当要做垂直滑动的时候,就必须要将Vertical Fit设置成Preferred Size,不然list在垂直方向的长度只有1个grid的长度,会造成滑动条无法滑动的现象出现。

这样,滑动列表就实现完成了。
Unity实现滑动列表(一)_第6张图片

你可能感兴趣的:(Unity,Unity3D)