Cocos2d-x CCScrollView

在引擎的 extensions/GUI/CCScrollView 文件路径下 有这个一个类 CCScrollView，有过ios开发经验的人对这个类的应该不陌生。

我们再看到这个文件路径下的 CCTableView 这个类，它就是继承自CCScrollView。

其实在实际开发过程中，CCScrollView这个类还是很有作用的。例如说，一个游戏帮助界面就可以用到CCScrollView，

因为帮助界面可能有多页，那么用CCScrollView实现，就十分好了。

还有，例如关卡选择界面也可以使用CCScrollView（关于这个内容，请看这篇博文的介绍点击打开链接 ）

下面就如何使用这个CCScrollView类，做一个简单的说明介绍。

1、首先需要：

#include "cocos-ext.h"
USING_NS_CC_EXT;

2、 创建CCSc rollView实例：

    static CCScrollView* create(CCSize size, CCNode* container = NULL);
    static CCScrollView* create();

第一个方法指定的size参数是view size。

例子：

CCScrollView* scrollview = CCScrollView::create(CCSizeMake(200, 200));
    
//    CCScrollView* scrollview = CCScrollView::create();
//    scrollview->setViewSize(CCSizeMake(200, 200));

3、两个概念 view size 和 content size

setter和getter：

 CCSize getViewSize() { return m_tViewSize; } 
    void setViewSize(CCSize size);

virtual void setContentSize(const CCSize & size);
    virtual const CCSize& getContentSize() const;

这两个是如何理解的呢？

①首先view size表示的是可视的范围，而content size表示的是内容的范围。

②举个例子来说，好比好比你透过窗户去看风景，你一眼能看到多少取决于窗户有多大，这里窗户的大小就是可视范围view size。

假设你和窗户是不能移动的，如果你想看到其他不在可视范围内的部分，就需要CCScrollView 来帮你移动风景，content size就是风景的大小。

③再比如有一张1000*1000像素的图片，设定100*100的可视范围，你每次只能看到百分之一的范围，但是通过移动图片的位置，你能看全整张图片。

1000*1000就是内容尺寸content size，100*100就是显示范围 view size。

④总之，CCScrollView将一个大的范围遮起来，只露一个小窗口，但是允许你一点一点的滚动，这就是CCScrollView 的工作。

那么相比较来说，view size 是要比 content size 小的，这样CCScrollView 才有意义。

4、setContainer &addChild 添加CCScrollView 的内容

我发现为CCScrollView添加内容，其实有这两个方法可以使用：setContainer &addChild

CCNode * getContainer();
    void setContainer(CCNode * pContainer);

注意setContainer的参数是要 CCNode，当然其子类型如CCLayer、CCSprite也是可以的。

说明：那么这两者有什么区别呢？

看看setContainer这个方法的实现就知道了，不深究的话，二者使用起来效果是一致的。

void CCScrollView::setContainer(CCNode * pContainer)
{
    // Make sure that 'm_pContainer' has a non-NULL value since there are
    // lots of logic that use 'm_pContainer'.
    if (NULL == pContainer)
        return;

    this->removeAllChildrenWithCleanup(true);
    this->m_pContainer = pContainer;

    this->m_pContainer->ignoreAnchorPointForPosition(false);
    this->m_pContainer->setAnchorPoint(ccp(0.0f, 0.0f));

    this->addChild(this->m_pContainer);

    this->setViewSize(this->m_tViewSize);
}

5、下面给出一个简单的程序示例：

CCScrollView* scrollview = CCScrollView::create(CCSizeMake(200, 200));
    
//    CCScrollView* scrollview = CCScrollView::create();
//    scrollview->setViewSize(CCSizeMake(200, 200));
    
    CCSprite* pSprite = CCSprite::create("HelloWorld.png");
    
//    scrollview->addChild(pSprite);
    scrollview->setContainer(pSprite);
    
    scrollview->setPosition(ccp(100, 100));
    this->addChild(scrollview);

效果：

界面中出现一个view size为200*200的scroll view，其中的内容为一个sprite，拖动这个内容，可以滑动。

6、content offset

在CCScrollView 中最常要处理的就是content offset了，content offset是什么呢？它表示的是scroll view里面内容的偏移。

下面的这几个方法很重要，在这篇博文中的示例代码中就用到了，通过代码理解这个内容就很容易了。

/**
     * Sets a new content offset. It ignores max/min offset. It just sets what's given. (just like UIKit's UIScrollView)
     *
     * @param offset new offset
     * @param If YES, the view scrolls to the new offset
     */
    void setContentOffset(CCPoint offset, bool animated = false);
    CCPoint getContentOffset();
    /**
     * Sets a new content offset. It ignores max/min offset. It just sets what's given. (just like UIKit's UIScrollView)
     * You can override the animation duration with this method.
     *
     * @param offset new offset
     * @param animation duration
     */
    void setContentOffsetInDuration(CCPoint offset, float dt); 

7、设置scroll view的滑动方向：

/**
     * direction allowed to scroll. CCScrollViewDirectionBoth by default.
     */
    CCScrollViewDirection getDirection() { return m_eDirection; }
    virtual void setDirection(CCScrollViewDirection eDirection) { m_eDirection = eDirection; }

typedef enum {
	kCCScrollViewDirectionNone = -1,
    kCCScrollViewDirectionHorizontal = 0,
    kCCScrollViewDirectionVertical,
    kCCScrollViewDirectionBoth
} CCScrollViewDirection;

8、注意到CCScrollView是继承自CCLayer，那么显然其也是可以接受触摸消息的。

class CCScrollView : public CCLayer

通过

    void setTouchEnabled(bool e);

这个方法就可以设置其是否可以接收触摸，处理触摸信息的话，就重载其中的触摸回调方法就可以了。

    virtual void registerWithTouchDispatcher();

 /** override functions */
    // optional
    virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchCancelled(CCTouch *pTouch, CCEvent *pEvent);

9、CCScrollView还可以继承CCScrollViewDelegate，里面有两个委托方法

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

差不多就是这些内容了，具体使用看这篇博文 点击打开链接。