unity3D -- (UGUI)Scroll View

一、相关组件

• Scroll View 
• Mask &&Rect Mask 2D
• Scroll Rect
  
• Horizontal Layout Group
• Layout Element

二、步骤

1、创建一个Panel,并为其添加Scroll View 组件

2、删除Scroll View子组件Scrollbar Horizontal和Scrollbar Vertical

      左图是创建后的结构，右图是删除后的结构         

3、将Content添加到Scroll View的Content中

4、给Content添加Horizontal Layout Group

将Child Force Expand中的Width和Height都取消，该项的意思是：Content的子控件与Content做width扩展和height扩展。步骤5是取消width和height的效果。步骤6是未取消width取消height的效果，步骤7是取消width，未取消height的效果。

5、将Child Force Expand中的Width和Height都取消，在Content添加几个子物体

添加了4张图片，由于取消了Width和Height，图片按照自己的大小顺序摆放在Content中，当添加第5张图片或者更多的时候他们就会挤压父物体的宽

此时子物体的宽已经比原来的宽小一些了。

6、将Child Force Expand中的Width取消，Height勾中，在Content添加几个子物体

所有水平上的子物体平分Content的高。

7、将Child Force Expand中的Height取消，Width勾中，在Content添加几个子物体

所有子物体平分父物体的宽。

8、步骤5中，其实我们并不想让所有子物体平分父物体的宽，我们希望每个子物体保持自己的大小，超出父物体的部分可以滑动显示。这个时候我们就需要给子物体添加一个组件Layout Element

设置子物体的最合适宽高和最小的宽高都是300像素，效果如下

有没有发现子物体已经超过了父物体的宽，但是超过部分没有显示出来，这是因为父物体添加了Mask遮罩。

运行unity工程，可以滑动Scroll View ，动画就不给了。

Vertical Layout Group和Horizontal Layout Group一样的操作。

三、补充

1、Horizontal Layout Group一些属性

Padding 可以设置子物体的上下左右间隔

Spacing 两个子物体的间隔

Child Alignment 子物体相对于父物体对齐方式

2、 Mask遮罩

有时候使用Mask遮罩会有问题，主要是2D的时候。这个时候可以使用Rect Mask 2D

--Rocky