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 方法传入接受响应的对象，每当滑动或者放大的时候，就会调用响应的方法。可以在接受委托的对象里实现各种效果。
示例代码下载：
参考文章：
欢迎有兴趣的童鞋加入Cocos2d-x 开发群 qq: 264152376