Cocos2d中CCScrollView和CCTableView使用

在游戏和应用中经常要实现左右滑动展示游戏帮助、以列表显示内容的UI效果，就像android中的Gallery和ListView。本文通过CCScrollView和CCTableView分别来实现这两个效果，基于cocos2d-x 2.0.4版本。

首先来简单了解一下这两个东东，CCScrollView本身是一个CCLayer，而CCTableView是CCScrollView的子类，这是引擎已经帮我们封装好了的，CCTableView可以设置成横向和纵向，用它可以实现类似于Gallery和ListView的效果。

1. 首先实现游戏帮助界面

(1) 创建头文件GalleryLayer.h

类GalleryLayer继承了CCScrollViewDelegate，实现了它的两个纯虚函数，主要是为了当scrollview滚动和缩放时回调这两函数，这样我们就可以在这两函数中做相关操作了。

(2) 看源文件GalleryLayer.cpp

这里一共有三张图，是从捕鱼达人中拿出来的背景图，当滚完三张图时就跳转到ListViewLayer场景去，上面的代码比较容易懂。

首先创建一个CCLayer，包含三张背景图，设置CCLayer的ContentSize，并设置三张图片的位置

然后设置CCLayer为CCScrollview的内容，并设置CCScrollView的显示区域。

最后根据用户滑动的方向和距离，通过设置scrollview的setContentOffset，滚动视图。

CCScrollview.h文件中封装了一个枚举类型，一共有四个方向，常用横向和纵向，这里使用了横向。

下面来看看这部分的效果：





2. 现在来实现列表展示(ListView)的效果

（1）创建ListViewLayer.h

ListViewLayer继承了CCTableViewDataSource和CCTableViewDelegate。这两个抽象类封装了几个有用的函数，我们在下面的源码中将实现它们。

（2）源文件 ListViewLayer.cpp

首先需要创建CCTableView，设置它的显示区域和显示方向，这里使用了纵向。设置每个子项的宽度和高度，子项的数量以及每个子项对应的内容。每个子项是一个CCTableViewCell，这里进行了优化，复用了子项对象。

下面是效果图：