cocos2d-x之CCGUI設計與實現（4）分頁列表框的實現（仿IOS表徵圖分頁列表）

本篇主要介紹IOS應用表徵圖案頭的分頁效果設計，這種控制項主要用於RPG等遊戲的背包部分，算是很常用的了。

分頁列表框暫且命名為GridBox，繼承自ScrollView，擁有滾動屬性和分頁屬性，這裡簡單討論後者的實現思路。

cocos2d-x擴充提供的CCScrollView支援滑動，滑動的具體實現是這樣的：

（1）  touch begin時初始化滑動的距離為0；

（2）  touch move時改變content的offset，使之隨手指移動；

（3）  touch end時計算手指的滑動距離，並以此距離作為起始速度，啟動schedule開始做減速運動；

（4）  schedule在速度降為SCROLL_DEACCEL_DIST以下時停止運動；

由上可知，CCScrollView並沒有直接計算content的位移量，而是根據起始速度做減速運動，而如果要讓CCScrollView支援分頁，輸入必須是頁的寬度，每次位移為一個頁寬度，所以需要提前計算content的位移量。

       由速度可以計算出位移量，由位移量可以計算出速度，讓我們為CCScrollView添加兩個函數。

//通過距離計算速度virtual cocos2d::CCPoint calculateSpeed(cocos2d::CCSize distance);//通過速度計算距離virtual cocos2d::CCSize calculateDistance(cocos2d::CCPoint speed);

       有了這兩個函數（事實上我們只需要一個），我們就可以輕鬆的實現分頁了，哦，忘了還有個比較重大的事情，CCScrollView的回調需要大改！

class CCGUIScrollViewDelegate{public:    virtual ~CCGUIScrollViewDelegate() {}//CCMove動作停止virtual void scrollViewDidAnimateStop(CCGUIScrollView* view) {};//滾動結束virtual void scrollViewDidScrollStop(CCGUIScrollView* view) {};//CCMove動作開始virtual void scrollViewDidAnimateStart(CCGUIScrollView* view) {};//滾動開始virtual void scrollViewDidScrollStart(CCGUIScrollView* view) {};//重設virtual void scrollViewDidReset(CCGUIScrollView* view) {};//滾動中virtual void scrollViewDidScroll(CCGUIScrollView* view) {};//縮放操作virtual void scrollViewDidZoom(CCGUIScrollView* view) {};//是否移動了給定的一個位移值virtual void scrollViewDidMoveSegment(CCGUIScrollView* view, bool up) {};};

如上，重點添加了滾動開始結束回調和Animate的開始結束回調，在滾動開始時計算速度，然後覆蓋之前手指產生的速度，這樣不管手指怎麼滑動，最多也就滑動一頁，這裡不詳細描述演算法過程，具體實現還是需要注意很多細節的呵。