ScrollView、ListView和PageView三大控件简析

这篇教程主要记录了ScrollView、ListView和PageView三个控件的使用流程，下面我们分别进行学习。

ScrollView控件

ScrollView是一个大家比较熟悉的控件，我在开发中经常会用到它。以下是使用ScrollView的详细步骤：

1. 在Cocos Studio中添加并设置ScrollView控件

首先，在Cocos Studio的UI界面添加一个ScrollView控件，然后对其属性进行设置。ScrollView需要设置的属性较多，我最初进行了如下设置：

• a. 设置显示窗口大小：将ScrollView的显示窗口大小（Size）设置为 300x300。
• b. 设置容器层大小：把ScrollView的容器层大小（ContentSize）设置为 300*300。
• c. 开启弹性效果：打开BounceBack选项，这样当ScrollView拖到边缘时会有一种弹性的效果。
• d. 设置控件名称：将该ScrollView的名称（name）设置为 scrollView。
• e. 添加ImageView控件：往ScrollView中添加三个ImageView控件，其中两个放在ScrollView显示窗口内，另外一个放在ScrollView的显示窗口下方。
• f. 导出工程：将工程导出到Cocos2d-x项目的Resources目录中。

2. 在Cocos2d-x中加载ScrollView的Widget

在Cocos2d-x中加载ScrollView的Widget，代码如下：

Widget* scrollViewUi = GUIReader::getInstance()->widgetFromJsonFile("ScrollViewUI/ScrollViewUi_1.json");
this->addChild(scrollViewUi, 2);

调试时发现，ScrollView的Widget已经添加进了场景，但无法拖动ScrollView，也就看不到放在ScrollView最下方的ImageView控件。回到Cocos Studio中检查之前ScrollView的属性设置，发现容器层的大小不应该设置成与显示窗口一样，而应该比它大，这样才能拖动ScrollView。于是修改第一步的第 b 步为：

• b. 重新设置容器层大小：将ScrollView的容器层大小（ContentSize）设置为 300*400。

重新导出Cocos Studio工程，并运行Cocos2d-x项目，此时拖动ScrollView成功。

3. 从ScrollView的Widget中提取ScrollView

我最初到TestCpp中查找UIScrollView的控件名，却没有找到，之后查找ListView和PageView也是如此。后来发现，像ScrollView这类控件本质上就是一个Layout，所以可以统一用Layout来加载。代码如下：

auto layout = static_cast<Layout*>(Helper::seekWidgetByName(scrollViewUi, "scrollView"));
layout->setPosition(Point(300, 300));

4. 改变ScrollView的滚动方向

ScrollView控件在Cocos Studio中的默认方向是竖直的，如果要改变其方向，可以在Scroll Director中进行修改。

5. 关于Layout源码

关于Layout的源码，我打算在介绍完PageView与ListView后再一起讲解，这会是一个比较大的模块。

ListView控件

ListView本质上类似于TableView，但我个人感觉它比TableView更好用。因为我基本没使用过TableView，如果要在Cocos2d-x中用TableView实现某个UI，我可能需要花费一些时间去了解TableView的使用方法，我认为使用ScrollView就可以实现TableView的所有功能。下面进入ListView的使用主题：

1. 创建并设置ListView控件

新建一个Cocos Studio工程，命名为ListViewUI，然后将一个ListView控件拖到场景中，接着设置它的属性。设置方法和ScrollView有一定区别，具体如下：

• 1. 设置显示窗口大小：将ListView的显示窗口大小（Size）设置为 300x300。
• 2. 设置控件名称：将该ListView的名称设置为 ”ListView“。
• 3. 添加控件并调整布局：选中ListView，右键选择“addObject”，往ListView中添加一个ImageView控件。发现新添加的ImageView控件默认位置在ListView的左上角，并且无法设置该控件的基本属性，也无法挪动其位置。我又尝试添加了一个CheckBox控件，它默认的位置在之前的ImageView控件的右边，同样无法修改属性。经过在属性栏中查找原因，发现问题出在“child Control Layout”这一类属性上，它的作用是自动给ListView中的控件排列位置，包括排列方向、控件间的距离等。
• 4. 容器层大小设置：在ListView中不一定要设置容器层的大小，因为当你添加控件到ListView中，如果控件所处的坐标已经超出了ListView的显示窗口范围，ListView会自动调整容器层的大小。

2. 在Cocos2d-x中加载ListView控件

在Cocos2d-x中加载ListView控件的代码如下：

Widget* ListViewUi = GUIReader::getInstance()->widgetFromJsonFile("ListViewUi_1/ListViewUi_1.json");
this->addChild(ListViewUi, 2);

3. 单独提取ListView控件

单独提取ListView控件的代码如下：

auto layout = static_cast<Layout*>(Helper::seekWidgetByName(ListViewUi, "ListView"));
layout->setPosition(Point(300, 300));

我个人觉得ListView非常方便，对于像我这种之前一直将ScrollView当TableView用的人来说，它简直就是福音。

PageView控件

PageView实际上是ScrollView的特别版。ScrollView拖动多少界面就挪动多少，而PageView拖一点界面就直接翻页，体验很特别。下面来看一下PageView的使用步骤，过程可能会有些纠结：

1. 添加页面

首先，往Cocos Studio场景中拖入一个PageView控件，然后选中该控件，右键，在弹出的菜单中选择“add Child page”，此时会出现一个新的页面。用同样的方式继续添加一个页面。将鼠标在编辑器的其他位置随便点击一下，之后再选中刚刚的PageView控件，会发现“add Child page”这个菜单消失了。如果要再加好几个页面，可以同时按“ctrl + z”，撤销之前的操作，直到回到PageView刚拖进场景时的状态，然后就可以继续添加页面了。

2. 改变页面大小

改变Cocos Studio的页面大小，必须在PageView控件最初始的状态下才能改变它的Size，如果已经添加了好几个页面，那么将无法改变它的Size。

3. 添加控件

往PageView中添加控件的方法和ScrollView、ListView一样，右键选择“add Object”。

4. 导出并加载Widget

将该Cocos Studio工程导出到Cocos2d-x项目的资源目录下，然后在Cocos2d-x中加载该Cocos Studio的Widget，代码如下：

cocos2d::ui::Widget* pageViewUi = GUIReader::getInstance()->widgetFromJsonFile("PageView/pageViewUi_01.json");