Cocos Creator关于UI组件的使用体会（一）（ScrollView、Layout、ProgressBar）

Cocos Creator关于UI组件的使用体会（一）（ScrollView、Layout、ProgressBar）
1、Canvas组件：
能够随时获取设备屏幕分辨率，并对场景中所有渲染元素进行适当的缩放。因此Canvas节点是不需要添加Widget组件进行布局的。同一个场景中只能有一个Canvas。
2、ScrollView组件：是一种带滚动功能的容器，可在有限的显示区域内浏览更多的内容。通常 ScrollView 会与 Mask 组件配合使用，同时也可以添加 ScrollBar 组件来显示浏览内容的位置。

属性：
content：content节点的子节点一般是需要滚动显示的图片，通常content节点的设置的size需大于其父节点，否则(小于或等于)将不能出现滚动效果，同时这种情况下调用scrollToOffset()方法，也是无效的，因为整张图都已经显示在可视区域，因此也没必要进行拖动了；
Horizontal：是否允许横向滚动；
Vertical：是否允许纵向滚动；
Inertia：滚动时是否有加速(滚动惯性)；
Brake：滚动后的减速系数，取值范围[0,1],若为1，则滚动后立即停止；若为0，则像真空环境一般，一直滚动到底；
Elastic：是否回弹，若为false，则拉到底，不能在往下拉；若为true，则往下拉，可显示一定区域的空白，松手就返回；
Bounce Duration：回弹所需时间，取值范围 [0-10];

3、Layout组件：是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能。
其Type属性有四，分别为： NONE, HORIZONTAL，VERTICAL 和 GRID。
NONE：一般默认为NONE，此时并不会修改组件所在节点的所有子节点的位置和大小（即不进行排序功能，子节点位置手动拖动，最后容器的大小会以能够容纳所有子节点的最小矩形区域作为自身的size。
HORIZONTAL：自动对所有子节点进行横向排序；
VERTICAL ：自动对所有子节点进行纵向排序；
GRID：自动对所有子节点进行网格排序；

HORIZONTAL效果

VERTICAL 效果

GRID效果
当Layout组件与ScrollView组件配合使用时，在ScrollView组件下的content节点上添加Layout组件，调整参数即可呈现滚动列表功能：



具体设置参考Cocos Creator范例

4、ProgressBar组件：
通常用于制作游戏进度条。

属性：
Bar Sprite:拖拽一个带有Sprite组件的节点到该属性上，建立关联，就可以通过动态调整progress属性以实现进度条效果，Bar Sprite 可以是自身节点、子节点，或者任何一个带有 Sprite 组件的节点；
Mode：分为三种：HORIZONTAL（水平）、VERTICAL（垂直）和 FILLED（填充）；
Total Length：进度条总长度；
Progress：浮点数，[0-1];
Reverse:为false（不勾选)时，默认填充方向为从左至右/从下到上，为true（勾选）时，从右至左/从上到下；