Scroll View制作

记录一个Scroll View的制作过程
效果图如下,一个简易的商城界面,能通过拖拽商品查看商品的功能,并实现屏幕不同分辨率下的自适应

Scroll View制作
在实现之前首先导入资源,在项目文件的Assets目录下添加所需的资源,在其中截图不适宜过大,所以各部分Rect Transform设置最后附上

  1. 在Hierarchy中添加UI中Scroll View,以及本次制作组件全览
    Scroll View制作
  2. 以UI中Image作为背景,选择资源中的合适图片
    Scroll View制作
  3. Scroll View所需Component如图
    Scroll View制作
  4. Viewport控件设置如下
    这里要注意,自身最适大小必须设定,否则Unity会以Image原始大小设置,那就不能直视而且不能达到遮罩效果的实现了

Scroll View制作
5. 商品组的设置
在设置商品组时,可以先Create Empty,更名为NewStore01,来统一管理其中的小的商品资源商品组设置如下图
Scroll View制作
6. 商品组中的小商品设置为Button控件,可以点击,绑定相应操
里面的discount和Button都是组成小商品的资源,可以根据需求改造

Scroll View制作
7. 设置不同分辨率下的UI自适应,这里需要参考后面的附录,Rect Transform设置
设置Canvas Scaler中UI Scale Mode也就是UI控件在屏幕中的缩放模式,要配合各部件锚点设置,比如Button控件相对于父节点的锚点可以放在离自己最近的角,这里我设置的锚点在附录里,而模式如下图
Scroll View制作

附录:
Scroll View的Rect Transform设置
Scroll View制作
锚点设置为铺满,方便控制自身在背景画布中的位置

Viewport
Scroll View制作

NewStore01组锚点可设置为左上角,在拖拽小商品组时根据锚点移动
Scroll View制作