cocos2d-js 控制元件
阿新 • • 發佈：2019-01-02
參考文件
cocos2d-js中 cc.xxx列舉
/**
* 文字水平對齊方式
*/
cc.TEXT_ALIGNMENT_CENTER = 1;
cc.TEXT_ALIGNMENT_RIGHT = 2;
cc.TEXT_ALIGNMENT_LEFT = 0;
/**
* 文字垂直對齊方式
*/
cc.VERTICAL_TEXT_ALIGNMENT_TOP = 0;
cc.VERTICAL_TEXT_ALIGNMENT_CENTER = 1;
cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM = 2;cocos2d-js中 ccui.xxx列舉
/*
* UILayout.h -> "enum class BackGroundColorType"
* UILayout的背景顏色型別，預設為NONE。
*/
ccui.Layout.BG_COLOR_NONE = 0; 無色
ccui.Layout.BG_COLOR_SOLID = 1; 純色
ccui.Layout.BG_COLOR_GRADIENT = 2; 漸變色
/**
* UILayout.h -> "enum class Type"
* UILayout佈局型別，預設為ABSOLUTE。
*/
ccui.Layout.ABSOLUTE ScrollView
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.
emojiBt