Cocos Creator 教程:ScrollView与Layo
2017-09-07 本文已影响2545人
33b882c6c780
前言：为什么我要写一篇关于ScrollView的使用呢？官方文档与范例集合都有说明与例子程序，刚入门时我也这样过来的。但是如果经常用到ScrollView的话，就会发现ScrollView中的content不能自动为新添加child进行布局，需要自己在代码中实现。这对于经常使用ScrollView的人来说就十分不方便，刚开始时自己写一个工具类用于为新添加child进行布局。后来发现Cocos Creator 中本来就有这一类组件(Layout 组件)，可以实现自动对child组件进行布局。本篇就是讲解下与Layout 组件的组合使用。
自动布局功能
- 添加Layout组件
新建一个ScrollView后，选中view节点下的content节点 ，为其添加Layout组件。
- Layout组件说明
| 属性 | 功能说明 |
|---|---|
| Type | 布局类型，支持 NONE, HORIZONTAL，VERTICAL 和 GRID。 |
| ResizeMode | 缩放模式，支持 NONE，CHIDREN 和 CONTAINER。 |
| PaddingLeft | 排版时，子物体相对于容器左边框的距离。 |
| PaddingRight | 排版时，子物体相对于容器右边框的距离。 |
| PaddingTop | 排版时，子物体相对于容器上边框的距离。 |
| PaddingBottom | 排版时，子物体相对于容器下边框的距离。 |
| SpacingX | 水平排版时，子物体与子物体在水平方向上的间距。NONE 模式无此属性。 |
| SpacingY | 垂直排版时，子物体与子物体在垂直方向上的间距。NONE 模式无此属性。 |
| Horizontal Direction | 指定水平排版时，第一个子节点从容器的左边还是右边开始布局。当容器为 Grid 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始水平排列方向。 |
| Vertical Direction | 指定垂直排版时，第一个子节点从容器的上面还是下面开始布局。当容器为 Grid 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始垂直排列方向。 |
| Cell Size | 此属性只在 Grid 布局时存在，指定网格容器里面排版元素的大小。 |
| Start Axis | 此属性只在 Grid 布局时存在，指定网格容器里面元素排版指定的起始方向轴。 |
-
垂直排版
设置属性：
效果：
-
水平排版
设置属性：
效果：
-
网格排版
设置属性：
效果：
最后
当把ScrollView与Layout 组合使用后，就会发现代码中不用再去布局子节点的位置。方便省心，又提高效率！目前demo已上传github,欢迎Star~
如果喜欢就动动手指点喜欢，关注我吧。我会不定时更新Cocos Creator教程与上传demo到github。
