【唠叨】
本节要讲讲滚动视图CCScrollView，相信玩过手游的同学们应该对它不会陌生吧。
例如：愤怒的小鸟的游戏场景里大大的地图，手机的屏幕肯定无法完全显示的，所以需要通过触摸滚动才能显示大地图的其他区域；飞外中上下滑动来查看其他玩家的排名；以及手机上主界面左右滑动来切换界面等等。
如下图为屏幕滚动，切换手机的界面。
【致谢】
http://blog.csdn.net/paea_gulang/article/details/10283601
【Demo】
https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E6%BB%9A%E5%8A%A8%E8%A7%86%E5%9B%BECCScrollView
【3.x】
（1）去掉 “CC”
（2）滚动方向
CCScrollViewDirection 改为强枚举 ScrollView::Direction
【CCScrollView】
滚动视图类CCScrollView继承于CCLayer，故它会忽略锚点的设置，其锚点始终为（0,0）。而我们知道CCLayer继承了触控事件CCTouch相关的函数。而CCScrollView也继承了触控函数，并将屏幕触控事件的四个函数ccTouchesBegan、ccTouchesMoved、ccTouchesEnded、ccTouchesCancelled进行了重写并实现了有关触摸移动相关的操作（其内部的实现代码自己看cocos2dx的源码）。这也就是为什么滚动视图CCScrollView的屏幕可以进行上下左右滚动的原因了。
值得注意的是：既然CCScrollView也是一个CCLayer图层，我们都知道触控滚动的不是CCLayer图层，而是添加在图层上的那些对象。比如CCSprite精灵、以及图层上的CCLayer等等。为了方便实现CCScrollView的滚动效果，cocos2dx引擎规定在使用CCScrollView时，需要在它的上面添加一个用于触控滚动的容器Container，一般容器都选用CCLayer类或其扩展类（如CCLayerColor等）。而触控事件的四个函数也是针对容器Container进行操作的。
也就是说CCScrollView实现的视图滚动，在真正意义上说是对容器Container进行滚动。
接下来就来讲讲它的使用方法吧！
1、引入头文件和命名空间
2、创建方式
说明：有两种创建方式。对于默认的创建方式create()，会自动创建CCLayer作为滚动视图的容器，且滚动视图的可视区域的大小默认为200*200。而
classHelloWorld:publiccocos2d::CCLayer,publicCCScrollViewDelegate{public:virtualboolinit();staticcocos2d::CCScene*scene();voidmenuCloseCallback(CCObject*pSender);CREATE_FUNC(HelloWorld);voidtest1();//测试图片滚动voidtest2();//测试只能纵向滚动voidtest3();//测试背包翻页intpageNumber;//背包CCMenuItemImage*pBack;//往前翻页CCMenuItemImage*pFront;//往后翻页voidscrollImage(CCObject*sender);//test3的背包翻页voidscrollViewDidScroll(CCScrollView*view);//滚动时响应的回调函数voidscrollViewDidZoom(CCScrollView*view);//放缩时响应的回调函数};
5、测试图片滚动test1()
屏幕大小：480*320。滚动视图大小：480*320。容器大小：960*600。
开启弹性效果setBounceable。
{CCSizevisableSize=CCSizeMake(480,320);//屏幕大小CCSizemysize=CCSizeMake(960,600);//容器大小//创建容器、设置大小CCLayerColor*scrollLayer=CCLayerColor::create(ccc4(255,255,255,255));scrollLayer- setContentSize(mysize);//容器中的东西CCSprite*bg=CCSprite::create("war.png");bg- setPosition(ccp(960/2.0,600/2.0));scrollLayer- addChild(bg);//创建滚动视图CCScrollViewCCScrollView*scrollView=CCScrollView::create();this- addChild(scrollView,0,1);//属性设置scrollView- setContainer(scrollLayer);//设置容器scrollView- setViewSize(visableSize);//可视区域大小scrollView- setBounceable(true);//是否具有弹性//委托代理scrollView- setDelegate(this);}
6、测试只能纵向滚动test2()
屏幕大小：480*320。滚动视图大小：150*100。容器大小：150*220。
将滚动视图设置到屏幕中心位置，并设置滚动方向setDirection，只能纵向滚动。
{CCSizevisableSize=CCSizeMake(480,320);//屏幕大小CCSizemysize=CCSizeMake(150,220);//容器大小//创建容器、设置大小CCLayerColor*scrollLayer=CCLayerColor::create(ccc4(255,255,255,255));scrollLayer- setContentSize(mysize);//容器中添加四个按钮for(inti=1;i =4;i++){charfile[20];sprintf(file,"btn%d.png",i);CCSprite*btn=CCSprite::create(file);btn- setPosition(ccp(mysize.width/2,220-50*i));scrollLayer- addChild(btn);}//创建滚动视图CCScrollView//可视区域大小150*100、容器为scrollLayerCCScrollView*scrollView=CCScrollView::create(CCSizeMake(150,100),scrollLayer);scrollView- setPosition(visableSize/2-ccp(150/2.0,100/2.0));this- addChild(scrollView,0,2);//设置为只能纵向滚动scrollView- setDirection(kCCScrollViewDirectionVertical);//委托代理scrollView- setDelegate(this);}
7、测试背包翻页test3()
屏幕大小：480*320。滚动视图大小：100*80。容器大小：300*80。
关闭触控事件setTouchEnabled(false)，创建两个按钮，实现只能通过按钮进行左右翻页。
翻页原理：通过设置容器的偏移值setContentOffset。
{CCSizevisableSize=CCSizeMake(480,320);//屏幕大小CCSizemysize=CCSizeMake(300,80);//容器大小//创建容器、设置大小CCLayerColor*scrollLayer=CCLayerColor::create(ccc4(255,255,255,255));scrollLayer- setContentSize(mysize);//容器中添加三个图片for(inti=1;i =3;i++){charfile[20];sprintf(file,"sp%d.png",i);CCSprite*sp=CCSprite::create(file);sp- setPosition(ccp(100*i-50,40));scrollLayer- addChild(sp);}//创建滚动视图CCScrollView//可视区域大小100*80、容器为scrollLayerCCScrollView*scrollView=CCScrollView::create(CCSizeMake(100,80),scrollLayer);scrollView- setPosition(visableSize/2-ccp(100/2.0,0));this- addChild(scrollView,0,3);//属性设置scrollView- setTouchEnabled(false);//关闭触碰事件，无法触摸滚动//委托代理scrollView- setDelegate(this);//创建背包翻页按钮//前翻pBack、后翻pFrontpBack=CCMenuItemImage::create("b1.png","b2.png","b3.png",this,menu_selector(HelloWorld::scrollImage));pFront=CCMenuItemImage::create("f1.png","f2.png","f3.png",this,menu_selector(HelloWorld::scrollImage));pBack- setPosition(ccp(visableSize.width/2-100,60));pFront- setPosition(ccp(visableSize.width/2+100,60));CCMenu*pMenu=CCMenu::create(pBack,pFront,NULL);pMenu- setPosition(CCPointZero);this- addChild(pMenu,0,100);pBack- setEnabled(false);pageNumber=0;//}//实现翻页效果scrollImagevoidHelloWorld::scrollImage(CCObject*sender){CCScrollView*scrollView=(CCScrollView*)this- getChildByTag(3);if(sender==pBack pBack- isEnabled()){pageNumber=max(0,pageNumber-1);//前翻}elseif(pFront- isEnabled()){pageNumber=min(2,pageNumber+1);//后翻}//设置容器相对滚动视图的偏移量scrollView- setContentOffset(ccp(-100*pageNumber,0),true);pBack- setEnabled(pageNumber!=0);pFront- setEnabled(pageNumber!=2);}