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