【Cocos2d-x for WP8 学习整理】（3）CCScrollView 实现捕鱼达人一样的场景选择界面

原文:【Cocos2d-x for WP8 学习整理】（3）CCScrollView 实现捕鱼达人一样的场景选择界面UI 界面一般是游戏里比较独立的地方，因为游戏引擎一般都比较注意基础的功能封装，很少会关注UI，但是 UI 确是玩家第一眼看到的效果，因此能否实现一个美观的UI对于提升游戏的整体美观有着很大的帮助。

幸运的是cocos2d-x意识到了这个问题，自从2.0版本之后逐步加入了几个常用控件，在这里我们详细说一下 CCScrollView 。

CCScrollView 经常被用在场景选择界面里，以《捕鱼达人》为例，几个场景各个占据一个屏幕的宽度，滑动即可切换不同的场景。





CCScrollView 类文件位于 cocos2d-x 目录下的 extensions\GUI\ccscrollview ，默认新项目是没有添加对它的引用的，如果项目要使用的话需要手动添加对 libExtensions 的引用，具体的方法参加上篇。

看源码可知，CCScrollView 继承自 CCLayer ，它内部维护了一个CCNode* 类型的Container,它的实现原理是将要展示的元素都添加到Container里，然后在响应触摸事件的代码里不断的修改 Container的位置，

这样便达到了滑动展示的效果。

使用方法：

bool GalleryLayer::init()
{
bool bRet = false;
do
{
CC_BREAK_IF( !CCLayer::init() );

m_nCurPage = 1;

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

CCLayer *pLayer = CCLayer::create();

char helpstr[30] = {0};
for (int i = 1; i <= 3; ++ i)
{
memset(helpstr, 0, sizeof(helpstr));
sprintf(helpstr,"bg_%02d.png",i);

CCSprite *pSprite = CCSprite::create(helpstr);

pSprite->setScale(MIN(visibleSize.width / 960, visibleSize.height / 640));

pSprite->setPosition(ccp(visibleSize.width * (i-0.5f), visibleSize.height / 2));
pLayer->addChild(pSprite);
}

m_pScrollView = CCScrollView::create(CCSizeMake(visibleSize.width, visibleSize.height), pLayer);
m_pScrollView->setContentOffset(CCPointZero);
//m_pScrollView->setTouchEnabled(false);

m_pScrollView->setDelegate(this);
m_pScrollView->setDirection(kCCScrollViewDirectionHorizontal);

pLayer->setContentSize(CCSizeMake(visibleSize.width*3, visibleSize.height));

this->addChild(m_pScrollView);

CCSpriteFrameCache *pCache = CCSpriteFrameCache::sharedSpriteFrameCache();

pCache->addSpriteFrame(CCSpriteFrame::create("button_normal.png",CCRectMake(0, 0, 64, 64)),"button_normal.png");
pCache->addSpriteFrame(CCSpriteFrame::create("button_selected.png",CCRectMake(0, 0, 64, 64)),"button_selected.png");

for (int i = 1; i <= 3; ++ i)
{
CCSprite *pPoint = CCSprite::createWithSpriteFrameName("button_normal.png");
pPoint->setTag(i);
pPoint->setPosition(ccp( origin.x + (visibleSize.width - 3 * pPoint->getContentSize().width)/2 + pPoint->getContentSize().width * (i-1), origin.y + 30));
this->addChild(pPoint);
}

CCSprite *pPoint = (CCSprite *)this->getChildByTag(1);
pPoint->setDisplayFrame(pCache->spriteFrameByName("button_selected.png"));

bRet = true;
}
while(0);

return bRet;
}但是对于场景选择来说，还需要个滑动完成自动定位的功能，自动的将当前的内容滚动到屏幕的中央。CCScrollView提供了一个手动设置位移的方法，

void setContentOffset(CCPoint offset, bool animated = false);

我们只需要在CCScrollView所在的Layer里的 touchEnded事件里调用该函数，然后传入计算出来的值即可。

实现方法：

void GalleryLayer::adjustScrollView(float offset)
{
//关掉控件自己的调整. //这个很关键，否者会冲突.
m_pScrollView->unscheduleAllSelectors();

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

CCSpriteFrameCache *pCache = CCSpriteFrameCache::sharedSpriteFrameCache();

CCSprite *pPoint = (CCSprite *)this->getChildByTag(m_nCurPage);
pPoint->setDisplayFrame(pCache->spriteFrameByName("button_normal.png"));

if (offset < 0)
{
m_nCurPage ++;
}
else
{
m_nCurPage --;
}

if (m_nCurPage <1)
{
m_nCurPage = 1;
}
else if(m_nCurPage > 3)
{
m_nCurPage = 3;
}

pPoint = (CCSprite *)this->getChildByTag(m_nCurPage);
pPoint->setDisplayFrame(pCache->spriteFrameByName("button_selected.png"));

CCPoint adjustPos = ccp(origin.x - visibleSize.width * (m_nCurPage-1), 0);
m_pScrollView->setContentOffset(adjustPos, true);
}

此外，CCScrollView还提供设置Delegate，类定义如下：

class CCScrollViewDelegate
{
public:
virtual ~CCScrollViewDelegate() {}
virtual void scrollViewDidScroll(CCScrollView* view) = 0;
virtual void scrollViewDidZoom(CCScrollView* view) = 0;};

我们可以通过 setDelegate 方法传入接受响应的对象，每当滑动或者放大的时候，就会调用响应的方法。可以在接受委托的对象里实现各种效果。

示例代码下载：

http://download.csdn.net/detail/u010810951/6441983

参考文章：

http://codingnow.cn/cocos2d-x/1024.html

欢迎有兴趣的童鞋加入Cocos2d-x 开发群 qq: 264152376