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;
};

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





评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值