溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
【嘮叨】
本節要講講滾動視圖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
// HORIZONTAL //只能橫向滾動 VERTICAL //只能縱向滾動 BOTH //橫向縱向都能滾動，默認方式 //
（3）其他變化不大。
【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、引入頭文件和命名空間
// #include "cocos-ext.h" using namespace cocos2d::extension; //
2、創建方式
說明：有兩種創建方式。對于默認的創建方式create()，會自動創建CCLayer作為滾動視圖的容器，且滾動視圖的可視區域的大小默認為200*200。而第二種則是可以自定義選擇哪個CCLayer作為容器。
值得注意的是：創建滾動視圖之后，對于添加子節點操作scrollView->addChild(sp)，實際上是將sp添加到容器container中。
// class CCScrollView : public CCLayer /** * 2種創建方式 */ //會自動創建CCLayer作為容器 static CCScrollView* create(); //size： 滾動視圖的可視區域大小 //container：自定義滾動視圖的CCLayer容器 static CCScrollView* create(CCSize size, CCNode* container = NULL); //舉例 CCLayer* scrollLayer = CCLayer::create(); CCScrollView* scrollView = CCScrollView::create(CCSizeMake(150, 100), scrollLayer); //
3、常用操作
設置容器、尺寸大小、容器的偏移量、允許滾動的方向、放縮、以及其他屬性的判斷。
注意：因為容器與滾動視圖的錨點均為(0,0)。所以容器的偏移量，指容器左下角坐標相對滾動視圖左下角坐標的偏移。
// /** * 容器相關操作 * setContainer , setContentSize , setContentOffset */ //設置滾動視圖的容器 void setContainer(CCNode* pContainer); CCNode* getContainer(); //設置容器Container的尺寸大小 virtual void setContentSize(const CCSize & size); virtual const CCSize& getContentSize() const; //設置容器相對滾動視圖的偏移量 //animated為是否附帶滑動的動作效果,還是直接設置為新的偏移量 //默認滑動動作為0.15秒,從舊位置滑動到新位置. void setContentOffset(CCPoint offset, bool animated = false); void setContentOffsetInDuration(CCPoint offset, float dt); CCPoint getContentOffset(); /** * 滾動視圖相關操作 * setViewSize , setDirection , setZoomScale , * isDragging , isTouchMoved , setBounceable , setTouchEnabled */ //設置滾動視圖可視區域的大小 void setViewSize(CCSize size); CCSize getViewSize(); //設置滾動視圖允許滾動的方向 //CCScrollViewDirection: // kCCScrollViewDirectionBoth 橫向縱向都能滾動，默認方式 // kCCScrollViewDirectionHorizontal 只能橫向滾動 // kCCScrollViewDirectionVertical 只能縱向滾動 virtual void setDirection(CCScrollViewDirection eDirection); CCScrollViewDirection getDirection(); //放縮滾動視圖大小 //好像有bug，建議不要使用了！ void setZoomScale(float s); void setZoomScale(float s, bool animated); float getZoomScale(); void setZoomScaleInDuration(float s, float dt); bool isDragging(); //用戶是否正在CCScrollView中操作 bool isTouchMoved(); //用戶是否在CCScrollView中移動 void setBounceable(bool bBounceable); //是否開啟彈性效果 bool isBounceable(); //是否具有彈性效果 void setTouchEnabled(bool e); //是否開啟觸摸 //
4、事件委托代理接口類CCScrollViewDelegate
CCScrollViewDelegate類主要是用來偵聽CCScrollView的事件，并設置事件的回調響應函數。
使用方法：在創建CCScrollView類的CCLayer類中，讓CCLayer繼承CCScrollViewDelegate，并重寫如下兩個事件回調響應函數。
// virual void scrollViewDidScroll(CCScrollView * view); //有滾動時的響應函數 virual void scrollViewDidZoom(CCScrollView * view); //有縮放時的響應函數 //
5、委托代理
// //設置滾動視圖的事件委托代理對象，一般為this //并且CCLayer必需要繼承代理接口類CCScrollViewDelegate void setDelegate(CCScrollViewDelegate* pDelegate); CCScrollViewDelegate* getDelegate(); //舉例： //scrollView->setDelegate(this); //
6、關于尺寸大小
CCScrollView的使用過程中涉及到兩個尺寸大小。
（1）滾動視圖的尺寸大小：即可視區域的大小。使用setViewSize()進行設置。
（2）容器的尺寸大小：使用setContentSize()進行設置。
例如設置滾動視圖尺寸大小為100*100，容器的尺寸大小為1000*1000。那么每次對視圖進行滾動，都只能看到容器100*100的某部分區域。
具體圖文解說可以參照cocos-孤狼大神寫的：和屌絲一起學cocos2dx-CCScrollView
7、關于觸摸滾動
使用setDirection()可以設置滾動的方向。主要有三個類型：
（1）橫向縱向都能滾動 kCCScrollViewDirectionBoth
（2）只能橫向滾動 kCCScrollViewDirectionHorizontal
（3）只能縱向滾動 kCCScrollViewDirectionVertical
另外setTouchEnabled()是用來設置是否開啟觸控事件的。所以若設置為false。那么即使setDirection()了，也無法滾動視圖。
8、使用技巧
（1）創建CCScrollView，和容器CCLayer；并設置滾動視圖的容器為該容器。
（2）設置容器的尺寸大小setContentSize；滾動視圖（可視區域）的尺寸大小setViewSize。
（3）將各種精靈、菜單、按鈕等加入到容器中。
（4）設置委托代理setDelegate(this)，并實現回調函數。
【代碼實戰】
這里例舉了滾動視圖CCScrollView的三種用途。
// void test1(); //測試圖片滾動 void test2(); //測試只能縱向滾動 void test3(); //測試背包翻頁 //
1、資源圖片
第一組：
第二組：
第三組：
2、引入頭文件和命名空間
// #include "cocos-ext.h" using namespace cocos2d::extension; //
3、繼承CCScrollViewDelegate，重寫事件偵聽函數
//
class HelloWorld : public cocos2d::CCLayer,public CCScrollViewDelegate
{
public:
virtual bool init();
static cocos2d::CCScene* scene();
void menuCloseCallback(CCObject* pSender);
CREATE_FUNC(HelloWorld);
void test1(); //測試圖片滾動
void test2(); //測試只能縱向滾動
void test3(); //測試背包翻頁
int pageNumber; //背包第幾頁
CCMenuItemImage* pBack; //往前翻頁
CCMenuItemImage* pFront; //往后翻頁
void scrollImage(CCObject* sender); //test3的背包翻頁
void scrollViewDidScroll(CCScrollView* view); //滾動時響應的回調函數
void scrollViewDidZoom(CCScrollView* view); //放縮時響應的回調函數
};
//4、委托代理回調函數
在控制臺輸出LOG。
//
void HelloWorld::scrollViewDidScroll(CCScrollView* view)
{
CCLOG("ScrollView Moved!");
}
void HelloWorld::scrollViewDidZoom(CCScrollView* view)
{
CCLOG("ScrollView Scaled");
}
//5、測試圖片滾動test1()
屏幕大小：480*320。滾動視圖大小：480*320。容器大小：960*600。
開啟彈性效果setBounceable。
//
void HelloWorld::test1()
{
CCSize visableSize = CCSizeMake(480, 320); //屏幕大小
CCSize mysize = 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);
//創建滾動視圖CCScrollView
CCScrollView* 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，只能縱向滾動。
//
void HelloWorld::test2()
{
CCSize visableSize = CCSizeMake(480, 320); //屏幕大小
CCSize mysize = CCSizeMake(150,220); //容器大小
//創建容器、設置大小
CCLayerColor* scrollLayer = CCLayerColor::create( ccc4(255,255,255,255) );
scrollLayer->setContentSize(mysize);
//容器中添加四個按鈕
for(int i = 1; i <= 4; i++)
{
char file[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 、 容器為scrollLayer
CCScrollView* 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。
//
void HelloWorld::test3()
{
CCSize visableSize = CCSizeMake(480, 320); //屏幕大小
CCSize mysize = CCSizeMake(300,80); //容器大小
//創建容器、設置大小
CCLayerColor* scrollLayer = CCLayerColor::create( ccc4(255,255,255,255) );
scrollLayer->setContentSize(mysize);
//容器中添加三個圖片
for(int i = 1; i <= 3; i++)
{
char file[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 、 容器為scrollLayer
CCScrollView* 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、后翻pFront
pBack = 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; //第0頁
}
//實現翻頁效果scrollImage
void HelloWorld::scrollImage(CCObject* sender)
{
CCScrollView* scrollView = (CCScrollView*)this->getChildByTag(3);
if(sender == pBack && pBack->isEnabled() )
{
pageNumber = max(0, pageNumber-1); //前翻
}
else if( pFront->isEnabled() )
{
pageNumber = min(2, pageNumber+1); //后翻
}
//設置容器相對滾動視圖的偏移量
scrollView->setContentOffset(ccp(-100 * pageNumber, 0), true);
pBack->setEnabled( pageNumber != 0);
pFront->setEnabled( pageNumber != 2);
}
//8、運行結果
8.1、背景滾動、附帶彈性效果
8.2、只能縱向滾動，附帶彈性效果
8.3、背包翻頁、無法觸摸滾動、通過按鈕進行翻頁
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
