ScrollView使用簡介

/**
 * ScrollView的滾動方向
 */
enum class Direction
{
    NONE,
    VERTICAL,
    HORIZONTAL,
    BOTH
};

/**
 * ScrollView的滾動事件類型
 */
enum class EventType
{
    SCROLL_TO_TOP,      // 向上滾動
    SCROLL_TO_BOTTOM,   // 向下滾動
    SCROLL_TO_LEFT,     // 向左滾動
    SCROLL_TO_RIGHT,    // 向右滾動
    SCROLLING,          // 滾動中
    BOUNCE_TOP,         // 向上反彈
    BOUNCE_BOTTOM,      // 向下反彈
    BOUNCE_LEFT,        // 向左反彈
    BOUNCE_RIGHT,       // 向右反彈
    CONTAINER_MOVED     // 容器移動
};

/**
 * 構造函數
 * @js ctor
 * @lua new
 */
ScrollView();

/**
 * 創建一個空ScrollView
 * @return 返回一個ScrollView
 */
static ScrollView* create();

/**
 * 設置ScrollView的滾動方向
 * @param dir 查看枚舉 Direction
 */
virtual void setDirection(Direction dir);

/**
 * 獲取ScrollView的滾動方向
 * @return 返回Direction枚舉
 */
Direction getDirection()const;

/**
 * 獲取ScrollView內的基容器，是一個ScrollView的子視圖（繼承關系）
 * @return 返回ScrollView內的子容器
 */
Layout* getInnerContainer()const;

/**
 * 將ScrollView滾動到底部
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToBottom(float timeInSec, bool attenuated);

/**
 * 將ScrollView滾動到頂部
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToTop(float timeInSec, bool attenuated);

/**
 * 將ScrollView滾動到左側
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToLeft(float timeInSec, bool attenuated);

/**
 * 將ScrollView滾動到右側
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToRight(float timeInSec, bool attenuated);

/**
 * 將ScrollView滾動到頂部左側
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToTopLeft(float timeInSec, bool attenuated);

/**
 * 將ScrollView滾動到頂部右側
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToTopRight(float timeInSec, bool attenuated);

/**
 * 將ScrollView滾動到底部左側
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToBottomLeft(float timeInSec, bool attenuated);

/**
 * 將ScrollView滾動到底部右側
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToBottomRight(float timeInSec, bool attenuated);

/**
 * 將ScrollView以垂直方向滾動到指定百分比位置
 * @param percent    百分值 0-100
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToPercentVertical(float percent, float timeInSec, bool attenuated);

/**
 * 將ScrollView以水平方向滾動到指定百分比位置
 * @param percent    百分值 0-100
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToPercentHorizontal(float percent, float timeInSec, bool attenuated);

/**
 * 將ScrollView以水平和垂直方向滾動到指定百分比位置
 * @param percent    百分值 0-100
 * @param timeInSec  滾動時長
 * @param attenuated 是否進行減速
 */
void scrollToPercentBothDirection(const Vec2& percent, float timeInSec, bool attenuated);

/**
 * 跳到ScrollView底部
 */
virtual void jumpToBottom();

/**
 * 跳到ScrollView頂部
 */
virtual void jumpToTop();

/**
 * 跳到ScrollView左側
 */
virtual void jumpToLeft();

/**
 * 跳到ScrollView右側
 */
virtual void jumpToRight();

/**
 * 跳到ScrollView左上
 */
virtual void jumpToTopLeft();

/**
 * 跳到ScrollView右上
 */
virtual void jumpToTopRight();

/**
 * 跳到ScrollView左下
 */
virtual void jumpToBottomLeft();

/**
 * 跳到ScrollView右下
 */
virtual void jumpToBottomRight();

/**
 * 以垂直方向跳到ScrollView指定的百分比位置
 * @param percent 百分值 0-100
 */
virtual void jumpToPercentVertical(float percent);

/**
 * 以水平方向跳到ScrollView指定的百分比位置
 * @param percent 百分值 0-100
 */
virtual void jumpToPercentHorizontal(float percent);

/**
 * 以水平和垂直方向跳到ScrollView指定的百分比位置
 * @param percent 百分值 0-100
 */
virtual void jumpToPercentBothDirection(const Vec2& percent);

/**
 * 設置ScrollView的滾動范圍大小
 * @param size 滾動范圍
 */
void setInnerContainerSize(const Size &size);

/**
 * 獲取ScrollView的滾動范圍大小
 * @return Size 滾動范圍
 */
const Size& getInnerContainerSize() const;

/**
 * 設置ScrollView的滾動位置
 * @param pos 坐標
 */
void setInnerContainerPosition(const Vec2 &pos);

/**
 * 獲取ScrollView的滾動位置
 * @return Vec2 坐標
 */
const Vec2 getInnerContainerPosition() const;

/**
 * ScrollView即將滾動時調用的回調
 */
typedef std::function<void(Ref*, EventType)> ccScrollViewCallback;

/**
 * 添加ScrollView的滾動事件回調
 * @param callback 查看ccScrollViewCallback
 */
virtual void addEventListener(const ccScrollViewCallback& callback);

/**
 * 添加子節點
 * @param child       子節點
 * @param localZOrder 層級樹中的位置
 * @param tag         節點tag值
 * @param name        節點名
 */
virtual void addChild(Node* child)override;
virtual void addChild(Node * child, int localZOrder)override;
virtual void addChild(Node* child, int localZOrder, int tag) override;
virtual void addChild(Node* child, int localZOrder, const std::string &name) override;

/**
 * 移除所有子節點
 */
virtual void removeAllChildren() override;

/**
 * 移除所有子節點並清除動作及回調函數
 */
virtual void removeAllChildrenWithCleanup(bool cleanup) override;

/**
 * 移除指定節點
 * @param child  子節點
 * @param cleaup 是否清除動作及回調函數
 */
virtual void removeChild(Node* child, bool cleaup = true) override;

/**
 * 獲取子節點
 */
virtual Vector<Node*>& getChildren() override;
virtual const Vector<Node*>& getChildren() const override;

/**
 * 獲取所有子節點的總數
 */
virtual ssize_t getChildrenCount() const override;

/**
 * 通過tag獲取子節點
 * @param tag 節點tag值
 */
virtual Node * getChildByTag(int tag) const override;

/**
 * 通過name獲取子節點
 * @param name 節點name值
 */
virtual Node* getChildByName(const std::string& name)const override;

/**
 * ScrollView交互事件
 */
virtual bool onTouchBegan(Touch *touch, Event *unusedEvent) override;
virtual void onTouchMoved(Touch *touch, Event *unusedEvent) override;
virtual void onTouchEnded(Touch *touch, Event *unusedEvent) override;
virtual void onTouchCancelled(Touch *touch, Event *unusedEvent) override;

/**
 * ？
 */
virtual void update(float dt) override;

/**
 * 設置ScrollView回彈效果
 * @param enabled 是否可以回彈
 */
void setBounceEnabled(bool enabled);

/**
 * 獲取ScrollView是否回彈
 * @return 是否可以回彈
 */
bool isBounceEnabled() const;

/**
 * 設置ScrollView的慣性滾動（即快速拖動后，會繼續滾動一段距離並逐漸停下）
 * @param enabled 是否設置慣性滾動
 */
void setInertiaScrollEnabled(bool enabled);

/**
 * 獲取ScrollView是否慣性滾動
 * @return 是否支持慣性滾動
 */
bool isInertiaScrollEnabled() const;

/**
 * 設置ScrollView是否顯示滾動條
 * @param enabled 是否顯示滾動條
 */
void setScrollBarEnabled(bool enabled);

/**
 * 獲取ScrollView是否顯示滾動條
 * @return 是否顯示滾動條
 */
bool isScrollBarEnabled() const;

/**
 * 從左下角（水平）和右上角（垂直）設置滾動條位置
 * @param positionFromCorner 坐標位置
 */
void setScrollBarPositionFromCorner(const Vec2& positionFromCorner);

/**
 * 從右上角設置垂直滾動條位置
 * @param positionFromCorner 坐標位置
 */
void setScrollBarPositionFromCornerForVertical(const Vec2& positionFromCorner);

/**
 * 從右上角獲取垂直滾動條的位置   
 * @return positionFromCorner 坐標位置
 */
Vec2 getScrollBarPositionFromCornerForVertical() const;

/**
 * 從左下角設置水平滾動條的位置
 * @param positionFromCorner 坐標位置
 */
void setScrollBarPositionFromCornerForHorizontal(const Vec2& positionFromCorner);

/**
 * 從右上角獲取水平滾動條的位置
 * @return positionFromCorner 坐標位置
 */
Vec2 getScrollBarPositionFromCornerForHorizontal() const;

/**
 * 設置滾動條的寬度
 * @param width 滾動條的寬度
 */
void setScrollBarWidth(float width);

/**
 * 獲取滾動條的寬度
 * @return 滾動條的寬度
 */
float getScrollBarWidth() const;

/**
 * 設置滾動條的顏色
 * @param color 滾動條顏色
 */
void setScrollBarColor(const Color3B& color);

/**
 * 獲取滾動條的顏色
 * @return 滾動條顏色
 */
const Color3B& getScrollBarColor() const;

/**
 * 設置滾動條的透明度
 * @param opacity 透明度 0-100
 */
void setScrollBarOpacity(GLubyte opacity);

/**
 * 獲取滾動條的透明度
 * @return 透明度 0-100
 */
GLubyte getScrollBarOpacity() const;

/**
 * 設置滾動條自動隱藏狀態
 * @param autoHideEnabled 是否自動隱藏
 */
void setScrollBarAutoHideEnabled(bool autoHideEnabled);

/**
 * 獲取滾動條自動隱藏狀態
 * @return 是否自動隱藏
 */
bool isScrollBarAutoHideEnabled() const;

/**
 * 設置滾動條自動隱藏時間
 * @param autoHideTime 自動隱藏的時間
 */
void setScrollBarAutoHideTime(float autoHideTime);

/**
 * 獲取滾動條自動隱藏時間
 * @return 自動隱藏的時間
 */
float getScrollBarAutoHideTime() const;

enum class Type
{
    ABSOLUTE,
    VERTICAL,
    HORIZONTAL,
    RELATIVE
};

/**
 * 設置ScrollView的布局類型
 * @param type 類型枚舉（查閱Layout::Type）
 */
virtual void setLayoutType(Type type) override;

/**
 * 設置ScrollView的布局類型
 * @param type 類型枚舉（查閱Layout::Type）
 */
virtual Type getLayoutType() const override;

/**
 * 獲得ScrollView控件描述
 */
virtual std::string getDescription() const override;

/**
 * @lua NA
 */
virtual void onEnter() override;

/**
 *  當一個小部件在一個布局中時，你可以調用這個方法來在指定的方向上獲得下一個焦點部件。
 *  如果小部件不在布局中，它將自行返回
 *@param direction 在布局中查找下一個重點小部件的方向
 *@param current   當前重點小部件
 *@return 布局中的下一個重點小部件
 */
virtual Widget* findNextFocusedWidget(FocusDirection direction, Widget* current) override;

ScrollView示例

// 初始化
var scrollView = new ccui.ScrollView();

// 設置方向
scrollView.setDirection(ccui.ScrollView.DIR_VERTICAL);

// 允許交互
scrollView.setTouchEnabled(true);

// 設置回彈
scrollView.setBounceEnabled(true);

// 設置滑動的慣性
scrollView.setInertiaScrollEnabled(true);

// 設置滾動內容的范圍
scrollView.setContentSize(cc.size(size.width, size.height));

// 設置容器的大小
scrollView.setInnerContainerSize(cc.size(size.width, size.height*4));

// 添加觸摸事件監聽器
scrollView.addEventListener(this.scrollViewCall, this);

// 錨點
scrollView.setAnchorPoint(cc.p(0,0));

// 位置坐標
scrollView.setPosition(cc.p(0,0));

// 滾動至底部
scrollView.jumpToBottom();        

// 0-3滑動到上下左右觸發,4滑動一直觸發,5-8慣性滑動到上下左右觸發
scrollViewCall:function(sender, type){
    switch (type){
        case ccui.ScrollView.EVENT_SCROLL_TO_TOP:break;
        case ccui.ScrollView.EVENT_SCROLL_TO_BOTTOM:break;
        case ccui.ScrollView.EVENT_SCROLL_TO_LEFT:break;
        case ccui.ScrollView.EVENT_SCROLL_TO_RIGHT:break;
        case ccui.ScrollView.EVENT_SCROLLING:break;
        case ccui.ScrollView.EVENT_BOUNCE_TOP:break;
        case ccui.ScrollView.EVENT_BOUNCE_BOTTOM:break;
        case ccui.ScrollView.EVENT_BOUNCE_LEFT:break;
        case ccui.ScrollView.EVENT_BOUNCE_RIGHT:break;
        default:break;
    }
}, 

this.addChild(scrollView);

ScrollView制作表情列表

var emojiView = new ccui.ScrollView(); // 初始化
var emojiList = game.emojiList;        // 表情數組(保存emoji表情，如��)
var width = emojiView.width;           // 滾動視圖寬度
var rowCount = 7;                      // 每行個數
var emojiWidth = width / rowCount;     // 表情按鈕大小
var maxRow = Math.ceil(emojiList.length / rowCount); // 最大行
var scrollViewHeight = maxRow * emojiWidth; // 滾動視圖內容高度
emojiView.setInnerContainerSize(cc.size(emojiView.width, scrollViewHeight)); // 設置滾動范圍

// 將emoji表情添加到滾動列表上
for (var i = 0; i < emojiList.length; i++) {
    var row = parseInt(i / rowCount); // 當前行
    var col = i % rowCount;           // 當前列

    // 按鈕
    var emojiBtn = new ccui.Button("","");  
    emojiBtn.setAnchorPoint(0.5, 0.5)
    emojiBtn.setPosition(emojiWidth * col + emojiWidth / 2, scrollViewHeight - (emojiWidth * row + emojiWidth / 2));  
    emojiBtn.setTitleText(emojiList[i]);//在按鈕上方添加一個label.  
    emojiBtn.setTitleFontSize(40);
    emojiView.addChild(emojiBtn);
}