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