Cocos2d-JS cocos2d_libs下的控件

参考文档

cocos-js Http方式网络请求
JavaScript秘密花园
廖雪峰的官方网站
文档参考
动作列表
Node.js
node.js怎么判断当前是mac系统还是windows系统

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 = 0;           绝对布局
ccui.Layout.LINEAR_VERTICAL = 1;    垂直布局
ccui.Layout.LINEAR_HORIZONTAL = 2;  水平布局
ccui.Layout.RELATIVE = 3;           相对布局

/**
 * UILayout.h -> "enum class ClippingType"
 * 裁剪模式
 */
ccui.Layout.CLIPPING_STENCIL = 0;            模板裁剪 类似于UILayout的裁剪模式（使用的模板缓冲，所以无论控件的矩阵怎么样变换，都可以完美的进行裁切）
ccui.Layout.CLIPPING_SCISSOR = 1;            剪刀裁剪 类似于ScrollView、ListView的裁剪模式（直接使用矩阵进行计算，效率比较高，但是目前还不能很好的支持旋转和缩放）
ccui.Layout.BACKGROUND_IMAGE_ZORDER = -1;    背景图片渲染
ccui.Layout.BACKGROUND_RENDERER_ZORDER = -2; 背景渲染器渲染

/*
 * UILayoutParameter.h -> "enum class LinearGravity"
 * 线性布局枚举
 */
// 旧
ccui.LINEAR_GRAVITY_NONE = 0;
ccui.LINEAR_GRAVITY_LEFT = 1;
ccui.LINEAR_GRAVITY_TOP = 2;
ccui.LINEAR_GRAVITY_RIGHT = 3;
ccui.LINEAR_GRAVITY_BOTTOM = 4;
ccui.LINEAR_GRAVITY_CENTER_VERTICAL = 5;
ccui.LINEAR_GRAVITY_CENTER_HORIZONTAL = 6;
// 新
ccui.LinearLayoutParameter.NONE = 0;
ccui.LinearLayoutParameter.LEFT = 1;
ccui.LinearLayoutParameter.TOP = 2;
ccui.LinearLayoutParameter.RIGHT = 3;
ccui.LinearLayoutParameter.BOTTOM = 4;
ccui.LinearLayoutParameter.CENTER_VERTICAL = 5;
ccui.LinearLayoutParameter.CENTER_HORIZONTAL = 6;

/**
 * UILayoutParameter.h -> "enum class RelativeAlign"
 * 相对对齐类型
 */
// 旧
ccui.RELATIVE_ALIGN_NONE = 0;
ccui.RELATIVE_ALIGN_PARENT_TOP_LEFT = 1;
ccui.RELATIVE_ALIGN_PARENT_TOP_CENTER_HORIZONTAL = 2;
ccui.RELATIVE_ALIGN_PARENT_TOP_RIGHT = 3;
ccui.RELATIVE_ALIGN_PARENT_LEFT_CENTER_VERTICAL = 4;
ccui.RELATIVE_ALIGN_PARENT_CENTER = 5;
ccui.RELATIVE_ALIGN_PARENT_RIGHT_CENTER_VERTICAL = 6;
ccui.RELATIVE_ALIGN_PARENT_LEFT_BOTTOM = 7;
ccui.RELATIVE_ALIGN_PARENT_BOTTOM_CENTER_HORIZONTAL = 8;
ccui.RELATIVE_ALIGN_PARENT_RIGHT_BOTTOM = 9;

ccui.RELATIVE_ALIGN_LOCATION_ABOVE_LEFT = 10;
ccui.RELATIVE_ALIGN_LOCATION_ABOVE_CENTER = 11;
ccui.RELATIVE_ALIGN_LOCATION_ABOVE_RIGHT = 12;

ccui.RELATIVE_ALIGN_LOCATION_LEFT_TOP = 13;
ccui.RELATIVE_ALIGN_LOCATION_LEFT_CENTER = 14;
ccui.RELATIVE_ALIGN_LOCATION_LEFT_BOTTOM = 15;

ccui.RELATIVE_ALIGN_LOCATION_RIGHT_TOP = 16;
ccui.RELATIVE_ALIGN_LOCATION_RIGHT_CENTER = 17;
ccui.RELATIVE_ALIGN_LOCATION_RIGHT_BOTTOM = 18;

ccui.RELATIVE_ALIGN_LOCATION_BELOW_TOP = 19;
ccui.RELATIVE_ALIGN_LOCATION_BELOW_CENTER = 20;
ccui.RELATIVE_ALIGN_LOCATION_BELOW_BOTTOM = 21;

// 新
ccui.RelativeLayoutParameter.NONE = 0;
ccui.RelativeLayoutParameter.PARENT_TOP_LEFT = 1;
ccui.RelativeLayoutParameter.PARENT_TOP_CENTER_HORIZONTAL = 2;
ccui.RelativeLayoutParameter.PARENT_TOP_RIGHT = 3;
ccui.RelativeLayoutParameter.PARENT_LEFT_CENTER_VERTICAL = 4;

ccui.RelativeLayoutParameter.CENTER_IN_PARENT = 5;

ccui.RelativeLayoutParameter.PARENT_RIGHT_CENTER_VERTICAL = 6;
ccui.RelativeLayoutParameter.PARENT_LEFT_BOTTOM = 7;
ccui.RelativeLayoutParameter.PARENT_BOTTOM_CENTER_HORIZONTAL = 8;
ccui.RelativeLayoutParameter.PARENT_RIGHT_BOTTOM = 9;

ccui.RelativeLayoutParameter.LOCATION_ABOVE_LEFTALIGN = 10;
ccui.RelativeLayoutParameter.LOCATION_ABOVE_CENTER = 11;
ccui.RelativeLayoutParameter.LOCATION_ABOVE_RIGHTALIGN = 12;
ccui.RelativeLayoutParameter.LOCATION_LEFT_OF_TOPALIGN = 13;
ccui.RelativeLayoutParameter.LOCATION_LEFT_OF_CENTER = 14;
ccui.RelativeLayoutParameter.LOCATION_LEFT_OF_BOTTOMALIGN = 15;
ccui.RelativeLayoutParameter.LOCATION_RIGHT_OF_TOPALIGN = 16;
ccui.RelativeLayoutParameter.LOCATION_RIGHT_OF_CENTER = 17;
ccui.RelativeLayoutParameter.LOCATION_RIGHT_OF_BOTTOMALIGN = 18;
ccui.RelativeLayoutParameter.LOCATION_BELOW_LEFTALIGN = 19;
ccui.RelativeLayoutParameter.LOCATION_BELOW_CENTER = 20;
ccui.RelativeLayoutParameter.LOCATION_BELOW_RIGHTALIGN = 21;

/*
 * UILayoutParameter.h -> "enum class Type"
 * 布局参数类型
 */
ccui.LayoutParameter.NONE = 0;      无布局参数类型
ccui.LayoutParameter.LINEAR = 1;    元素将按边缘排列。
ccui.LayoutParameter.RELATIVE = 2;  元素将按边距和相关的部件名称进行排列。

/*
 * UILayoutComponent.h -> "enum class HorizontalEdge"
 * 部件水平和垂直方向的布局样式
 */
ccui.LayoutComponent.horizontalEdge = {};
ccui.LayoutComponent.horizontalEdge.NONE = 0;
ccui.LayoutComponent.horizontalEdge.LEFT = 1;
ccui.LayoutComponent.horizontalEdge.RIGHT = 2;
ccui.LayoutComponent.horizontalEdge.CENTER = 3;

ccui.LayoutComponent.verticalEdge = {};
ccui.LayoutComponent.verticalEdge.NONE = 0;
ccui.LayoutComponent.verticalEdge.BOTTOM = 1;
ccui.LayoutComponent.verticalEdge.TOP = 2;
ccui.LayoutComponent.verticalEdge.CENTER = 3;

/*
 * UIWidget.h -> "enum class BrightStyle"
 * 明亮风格
 */
ccui.Widget.BRIGHT_STYLE_NONE = -1;         无风格
ccui.Widget.BRIGHT_STYLE_NORMAL = 0;        默认
ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT = 1;    高亮

/**
 * 小部件类型
 */
ccui.Widget.TYPE_WIDGET = 0;        小部件类型
ccui.Widget.TYPE_CONTAINER = 1;     容器类型

/**
 * UIWidget.h -> "enum class TextureResType"
 * 纹理资源类型
 */
ccui.Widget.LOCAL_TEXTURE = 0;  本地图片
ccui.Widget.PLIST_TEXTURE = 1;  Plist文件中的图片

/**
 * UIWidget.h -> "typedef enum TouchEventType"
 * 触摸类型
 */
ccui.Widget.TOUCH_BEGAN = 0;
ccui.Widget.TOUCH_MOVED = 1;
ccui.Widget.TOUCH_ENDED = 2;
ccui.Widget.TOUCH_CANCELED = 3;

/**
 * UIWidget.h -> "enum class SizeType"
 * 尺寸类型 
 */
ccui.Widget.SIZE_ABSOLUTE = 0;  绝对值
ccui.Widget.SIZE_PERCENT = 1;   百分值

//position type
/**
 * UIWidget.h -> "enum class PositionType" 
 * 坐标类型 
 */
ccui.Widget.POSITION_ABSOLUTE = 0;  绝对值
ccui.Widget.POSITION_PERCENT = 1;   百分值

/**
 * UIWidget.h -> "enum class FocusDirection" 
 * 焦点位置
 */
ccui.Widget.LEFT = 0;   
ccui.Widget.RIGHT = 1;
ccui.Widget.UP = 2;
ccui.Widget.DOWN = 3;

/*
 * UIListView.h -> "enum class EventType"
 * ListView元素项单击事件。 
 */
ccui.ListView.EVENT_SELECTED_ITEM = 0;      默认
ccui.ListView.ON_SELECTED_ITEM_START = 0;   开始点击
ccui.ListView.ON_SELECTED_ITEM_END = 1;     结束点击

/**
 * UIListView.h -> "enum class Gravity"
 */
ccui.ListView.GRAVITY_LEFT = 0;
ccui.ListView.GRAVITY_RIGHT = 1;
ccui.ListView.GRAVITY_CENTER_HORIZONTAL = 2;
ccui.ListView.GRAVITY_TOP = 3;
ccui.ListView.GRAVITY_BOTTOM = 4;
ccui.ListView.GRAVITY_CENTER_VERTICAL = 5;

/*
 * UIScrollView.h -> "enum class Direction"
 * ScrollView滚动方向   
 */
ccui.ScrollView.DIR_NONE = 0;           不支持滚动
ccui.ScrollView.DIR_VERTICAL = 1;       垂直方向滚动
ccui.ScrollView.DIR_HORIZONTAL = 2;     水平方向滚动
ccui.ScrollView.DIR_BOTH = 3;           支持两个方向滚动

/*
 * UIScrollView.h -> "typedef enum ScrollviewEventType"
 * ScrollView滚动事件类型 
 * ccui.ScrollView.EVENT_BOUNCE_RIGHT       
 */
ccui.ScrollView.EVENT_SCROLL_TO_TOP = 0;        往上滚动
ccui.ScrollView.EVENT_SCROLL_TO_BOTTOM = 1;     往下滚动
ccui.ScrollView.EVENT_SCROLL_TO_LEFT = 2;       往左滚动
ccui.ScrollView.EVENT_SCROLL_TO_RIGHT = 3;      往右滚动
ccui.ScrollView.EVENT_SCROLLING = 4;            滚动中
ccui.ScrollView.EVENT_BOUNCE_TOP = 5;           往上回弹
ccui.ScrollView.EVENT_BOUNCE_BOTTOM = 6;        往下回弹
ccui.ScrollView.EVENT_BOUNCE_LEFT = 7;          往左回弹
ccui.ScrollView.EVENT_BOUNCE_RIGHT = 8;         往右回弹

ccui.ScrollView.AUTO_SCROLL_MAX_SPEED = 1000;   最大滚动速度
ccui.ScrollView.SCROLLDIR_UP = cc.p(0, 1);      
ccui.ScrollView.SCROLLDIR_DOWN = cc.p(0, -1);   
ccui.ScrollView.SCROLLDIR_LEFT = cc.p(-1, 0);
ccui.ScrollView.SCROLLDIR_RIGHT = cc.p(1, 0);

/**
 * UIPageView.h -> "enum class EventType"
 * 交互事件
 */
ccui.PageView.EVENT_TURNING = 0;    拖拽

/**
 * UIPageView.h -> "enum class TouchDirection"
 * 拖动方向
 */
ccui.PageView.TOUCH_DIR_LEFT = 0;
ccui.PageView.TOUCH_DIR_RIGHT = 1;
ccui.PageView.TOUCH_DIR_UP = 2;
ccui.PageView.TOUCH_DIR_DOWN = 3;

/**
 * 滚动方向
 */
ccui.PageView.DIRECTION_HORIZONTAL = 0;
ccui.PageView.DIRECTION_VERTICAL = 1;

/*
 * UIButton
 * 渲染方式     
 */
ccui.NORMAL_RENDERER_ZORDER = -2;       普通渲染
ccui.PRESSED_RENDERER_ZORDER = -2;      压缩渲染
ccui.DISABLED_RENDERER_ZORDER = -2;     禁用渲染
ccui.TITLE_RENDERER_ZORDER = -1;        标题渲染

/**
 * 九宫格位置
   1 2 3
   4 5 6
   7 8 9
 */
ccui.Scale9Sprite.POSITIONS_CENTRE          
ccui.Scale9Sprite.POSITIONS_TOP             
ccui.Scale9Sprite.POSITIONS_LEFT            
ccui.Scale9Sprite.POSITIONS_RIGHT           
ccui.Scale9Sprite.POSITIONS_BOTTOM          
ccui.Scale9Sprite.POSITIONS_TOPRIGHT        
ccui.Scale9Sprite.POSITIONS_TOPLEFT
ccui.Scale9Sprite.POSITIONS_BOTTOMRIGHT
ccui.Scale9Sprite.POSITIONS_BOTTOMLEFT 

/*
 * UICheckBox.h -> "enum class EventType"
 * 选中事件
 */
ccui.CheckBox.EVENT_SELECTED = 0;       选中
ccui.CheckBox.EVENT_UNSELECTED = 1;     未选中

ccui.CheckBox.BOX_RENDERER_ZORDER = -1;                     
ccui.CheckBox.BOX_SELECTED_RENDERER_ZORDER = -1;            
ccui.CheckBox.BOX_DISABLED_RENDERER_ZORDER = -1;            
ccui.CheckBox.FRONT_CROSS_RENDERER_ZORDER = -1;             
ccui.CheckBox.FRONT_CROSS_DISABLED_RENDERER_ZORDER = -1;    

/*
 * UIImageView
 */
ccui.ImageView.RENDERER_ZORDER = -1;

/*
 * UILoadingBar.h -> "enum class Direction"
 * 进度条进度方向
 */
ccui.LoadingBar.TYPE_LEFT = 0;  从左往右
ccui.LoadingBar.TYPE_RIGHT = 1; 从右往左

ccui.LoadingBar.RENDERER_ZORDER = -1;

/*
 * UIRichElement
 */
//Rich element type
//ccui.RichElement.TYPE_TEXT = 0;
//ccui.RichElement.TYPE_IMAGE = 1;
//ccui.RichElement.TYPE_CUSTOM = 2;

/*
 * UISlider.h -> "enum class EventType"
 * 交互事件
 */
ccui.Slider.EVENT_PERCENT_CHANGED = 0;      百分比已更改
ccui.Slider.EVENT_SLIDEBALL_DOWN = 1;       事件滑块下降
ccui.Slider.EVENT_SLIDEBALL_UP = 2;         事件滑块上升
ccui.Slider.EVENT_SLIDEBALL_CANCEL = 3;     事件滑块取消

/*
 * UISlider渲染
 */
ccui.Slider.BASEBAR_RENDERER_ZORDER = -3;
ccui.Slider.PROGRESSBAR_RENDERER_ZORDER = -2;
ccui.Slider.BALL_RENDERER_ZORDER = -1;

/*
 * UIText渲染
 */
ccui.Text.RENDERER_ZORDER = -1;

/*
 * UITextAtlas渲染
 */
ccui.TextAtlas.RENDERER_ZORDER = -1;

/*
 * UITextBMFont渲染
 */
ccui.TextBMFont.RENDERER_ZORDER = -1;

/*
 * UITextField.h -> "typedef enum TextFiledEventType"
 * 交互事件
 */
ccui.TextField.EVENT_ATTACH_WITH_IME = 0;   弹出键盘
ccui.TextField.EVENT_DETACH_WITH_IME = 1;   收起键盘
ccui.TextField.EVENT_INSERT_TEXT = 2;       输入字符
ccui.TextField.EVENT_DELETE_BACKWARD = 3;   回退字符

ccui.TextField.RENDERER_ZORDER = -1;

/*
 * UIRadioButton.h -> "RadioButton" -> "enum class EventType"
 * 交互事件
 */
ccui.RadioButton.EVENT_SELECTED = 0;            选中
ccui.RadioButton.EVENT_UNSELECTED = 1;          未选中

/*
 * UIRadioButton.h -> "RadioButtonGroup" -> "enum class EventType"
 * 交互事件
 */
ccui.RadioButtonGroup.EVENT_SELECT_CHANGED = 0; 选中状态改变

UIListView

UIListView Api

/**
 * ListView子控件的对齐方式
 */
enum class Gravity
{
    LEFT,               // 局左对齐
    RIGHT,              // 局右对齐
    CENTER_HORIZONTAL,  // 水平居中对齐
    TOP,                // 居上对齐
    BOTTOM,             // 居下对齐
    CENTER_VERTICAL     // 垂直居中对齐
};

/**
 * ListView中的项的交互事件
 */
enum class EventType
{
    ON_SELECTED_ITEM_START, // 开始选中
    ON_SELECTED_ITEM_END    // 结束选中
};

/**
 * ListView子控件的对齐边界（如使用BOTTOM，那么子控件会从ListView底部开始向上布局）
 */
enum class MagneticType
{
    NONE,       // 无
    CENTER,     // ListView尝试将其项目在当前视图的中心对齐
    BOTH_END,   // 使用BOTH_END类型，如果ListView是水平的，顶部或底部垂直，则尝试将其项目对齐到左侧或右侧。对齐侧（左侧或右侧，顶部或底部）由用户的滚动方向决定。
    LEFT,       // 居左
    RIGHT,      // 局右
    TOP,        // 居上
    BOTTOM,     // 居下
};

/**
 * ListView的项的点击回调
 */
typedef std::function<void(Ref*, EventType)> ccListViewCallback;

/**
 * 便利构造
 * @return ListView实例
 */
ListView();
static ListView* create();

/**
 * 给ListView设置一个项
 * 当调用`pushBackDefaultItem`时，模型将被用作蓝图，新的模型拷贝将被插入到ListView中
 * @param model 集成于Widget的模型
 */
void setItemModel(Widget* model);

/**
 * 在列表视图的末尾插入默认项目（由克隆模型创建）
 */
void pushBackDefaultItem();

/**
 * 插入一个默认项目（通过克隆模型创建）到一个给定索引的列表视图
 *@param index 索引
 */
void insertDefaultItem(ssize_t index);

/**
 * 将一个自定义项目插入到ListView的末尾
 *@param item 继承于Widget的项
 */
void pushBackCustomItem(Widget* item);

/**
 * 在给定的索引处插入一个自定义小部件到ListView中。
 *
 * @param item  继承于Widget的项
 * @param index 索引
 */
void insertCustomItem(Widget* item, ssize_t index);

/**
 *  删除ListView的最后一个项
 */
void removeLastItem();

/**
 * 删除给定索引处的项
 *
 * @param index 索引
 */
void removeItem(ssize_t index);

/**
 * 删除当前ListView中的所有项
 */
void removeAllItems();

/**
 * 返回给定索引处的项
 *
 * @param index 索引
 * @return 继承于Widget的项
 */
Widget* getItem(ssize_t index)const;

/**
 * 返回ListView中的所有项目。
 *@returns 一个指向Widget的指针
 */
Vector& getItems();

/**
 * 返回指定项的索引
 *
 * @param item  继承于Widget的项
 * @return 索引
 */
ssize_t getIndex(Widget* item) const;

/**
 * 设置ListView的子控件布局方案
 */
void setGravity(Gravity gravity);

/**
 * 设置ListView的子控件对齐边界
 */
void setMagneticType(MagneticType magneticType);

/**
 * 获取ListView的子控件对齐边界
 */
MagneticType getMagneticType() const;

/**
 * 子控件对齐边界允许有多余的滚动空间，默认true。
 */
void setMagneticAllowedOutOfBoundary(bool magneticAllowedOutOfBoundary);

/**
 * 获取是否允许子控件对齐边界有多余的滚动空间
 */
bool getMagneticAllowedOutOfBoundary() const;

/**
 * 设置ListView中每个项之间的边距
 * @param margin 边距
 */
void setItemsMargin(float margin);

/**
 * 获取ListView中每个项之间的边距
 * @return 边距值
 */
float getItemsMargin()const;

/**
 * 获取最近的项目到内部容器中的特定位置
 * @param targetPosition  指定内部容器坐标中的目标位置
 * @param itemAnchorPoint 指定每个项的锚点以计算距离
 * @return 列表视图中的项实例不是空的，否则，返回null
 */
Widget* getClosestItemToPosition(const Vec2& targetPosition, const Vec2& itemAnchorPoint) const;

/**
 * 获取在当前视图中，离指定位置最近的项
 * 例如，要查看视图中心的项目，请调用“getClosestItemToPositionInCurrentView”
 * @param positionRatioInView 视图（ListView）内容大小的指定比例位置【例如传入cc.p(0.5, 0.5)】
 * @param itemAnchorPoint     指定该视图（ListView）的锚点，以计算距离【例如传入cc.p(0.5, 0.5)】
 * @return 列表视图中的项实例不是空的，否则，返回null
 */
Widget* getClosestItemToPositionInCurrentView(const Vec2& positionRatioInView, const Vec2& itemAnchorPoint) const;

/**
 * 获取当前ListView可视范围中，中间的项
 * @return Widget实例
 */
Widget* getCenterItemInCurrentView() const;

/**
 * 获取当前ListView可视范围中，最左侧的项
 * @return Widget实例
 */
Widget* getLeftmostItemInCurrentView() const;

/**
 * 获取当前ListView可视范围中，最右侧的项
 * @return Widget实例
 */
Widget* getRightmostItemInCurrentView() const;

/**
 * 获取当前ListView可视范围中，最顶部的项
 * @return Widget实例
 */
Widget* getTopmostItemInCurrentView() const;

/**
 * 获取当前ListView可视范围中，最底部的项
 * @return Widget实例
 */
Widget* getBottommostItemInCurrentView() const;

/**
 * 重写方法（继承于ScrollView）
 */
virtual void jumpToBottom() override;
virtual void jumpToTop() override;
virtual void jumpToLeft() override;
virtual void jumpToRight() override;
virtual void jumpToTopLeft() override;
virtual void jumpToTopRight() override;
virtual void jumpToBottomLeft() override;
virtual void jumpToBottomRight() override;
virtual void jumpToPercentVertical(float percent) override;
virtual void jumpToPercentHorizontal(float percent) override;
virtual void jumpToPercentBothDirection(const Vec2& percent) override;

/**
 * 跳转到指定项
 * @param itemIndex             指定索引
 * @param positionRatioInView   跳到该项的视图内容大小的指定比例位置【例如传入cc.p(0.5, 0.5)会跳到该项中心】
 * @param itemAnchorPoint       指定该项的锚点，以计算距离【例如传入cc.p(0.5, 0.5)】
 */
void jumpToItem(ssize_t itemIndex, const Vec2& positionRatioInView, const Vec2& itemAnchorPoint);

/**
 * 滚动到指定项
 * @param itemIndex           索引值
 * @param positionRatioInView 跳到该项的视图内容大小的指定比例位置【例如传入cc.p(0.5, 0.5)会跳到该项中心】
 * @param itemAnchorPoint     指定该项的锚点，以计算距离【例如传入cc.p(0.5, 0.5)】
 * @param timeInSec           滚动动画时长
 */
void scrollToItem(ssize_t itemIndex, const Vec2& positionRatioInView, const Vec2& itemAnchorPoint);
void scrollToItem(ssize_t itemIndex, const Vec2& positionRatioInView, const Vec2& itemAnchorPoint, float timeInSec);

/**
 * 获取当前所选项索引
 * @return 所选项的索引，未选择返回-1
 */
ssize_t getCurSelectedIndex() const;


/**
 * 添加一个ListView点击事件回调，然后单击一个Listview项，回调将被调用
 * @param callback 事件回调
 */
void addEventListener(const ccListViewCallback& callback);

/**
 * 更改ListView的滚动方向。
 * @param dir 滚动方向枚举
 */
virtual void setDirection(Direction dir) override;

/**
 * 获取ListView的滚动方向。
 * @return 滚动方向枚举
 */
virtual std::string getDescription() const override;

/**
 * 手动刷新ListView的视图和布局。
 * 此方法将ListView内容标记为脏内容，内容视图将在下一帧中刷新。
 * @deprecated Use method requestDoLayout() instead
 */
CC_DEPRECATED_ATTRIBUTE void refreshView();

UIListView示例

var listView = new ccui.ListView();
listView.setAnchorPoint(0.5, 0.5);
listView.setPosition(640, 360);
listView.setSize(cc.size(640, 360));

// 子控件对齐边界
listView.setMagneticType(5);

// 是否设置对齐边界
listView.setMagneticAllowedOutOfBoundary(true);

// 对齐方式
listView.setGravity(ccui.ListView.GRAVITY_LEFT);

// 背景色
listView.setBackGroundColorType(ccui.Layout.BG_COLOR_SOLID);
listView.setBackGroundColor(cc.color.WHITE);

this.addChild(listView);

for (var i = 1; i < 20; i++) {
    var button = new ccui.Button();
    button.setTouchEnabled(true);
    button.setPressedActionEnabled(true);
    button.setTitleText("标题 = " + i);
    button.setSize(200, 50);
    button.setTitleFontSize(30);
    button.setTitleColor(cc.color(0, 0, 0));
    listView.pushBackCustomItem(button);
}

// 跳转到某项的某个位置
listView.jumpToItem(18, cc.p(0, 0), cc.p(0.5, 0.5));

// 获取第3个item
var button = listView.getItem(2);

// 获取在当前视图中，里指定位置最近的项
button = listView.getClosestItemToPositionInCurrentView(cc.p(0.5, 0.5), cc.p(0.5, 0.5));
cc.log(button.getTitleText());

// 获取可视范围中，底部的项（此处打印是"标题 = 1"，但不应该是这个结果，只要不在一加载就去调用，结果都是正常的）
button = listView.getBottommostItemInCurrentView();
cc.log(button.getTitleText());

// 获取可视范围中，顶部的项
button = listView.getTopmostItemInCurrentView();
cc.log(button.getTitleText());

// 获取选中的项
cc.log(listView.getCurSelectedIndex());

UILoadingBar

setCapInsets的相关

UILoadingBar Api

/**
 * 进度条方向
 */
enum class Direction
{
    LEFT, // 左至右
    RIGHT // 右至左
};

/**
 * 构造函数
 * @return UILoadingBar实例
 */
LoadingBar();
static LoadingBar* create();

/**
 * 使用图片名称和预定义的进度值创建一个加载条
 * @param textureName       进度条的背景图
 * @param TextureResType    图片类型（Local、Plist）
 * @param percentage        进度值
 * @return UILoadingBar实例
 */
static LoadingBar* create(const std::string& textureName, float percentage = 0);
static LoadingBar* create(const std::string& textureName, TextureResType texType, float percentage = 0);

/**
 * 设置进度条的方向
 * 方向`LEFT`意味着从左到右的展示，否则`RIGHT`
 * @param direction 方向
 */
void setDirection(Direction direction);

/**
 * 获取进度条的方向
 * 方向`LEFT`意味着从左到右的展示，否则`RIGHT`
 * @return LoadingBar的进度方向
 */
Direction getDirection()const;

/**
 * 加载图片
 * @param texture 图片路径
 * @param texType 图片类型（Local、Plist）类型（本地文件或压缩成Plist的文件）
 */
void loadTexture(const std::string& texture,TextureResType texType = TextureResType::LOCAL);

/**
 * 设置进度
 * @param percent 进度值1~100
 */
void setPercent(float percent);

/**
 * 获取进度
 * @return 进度值1~100
 */
float getPercent() const;

/**
 * 设置九宫格渲染
 * @param enabled 设置为true将使用scale9渲染器，否则为false。
 */
void setScale9Enabled(bool enabled);

/**
 * 获取是否设置了九宫格渲染
 * @return LoadingBar是否使用scale9渲染器。
 */
bool isScale9Enabled()const;

/**
 * 为LoadingBar设置capInsets
 * 此设置仅在启用scale9渲染器时生效
 * @param capInsets 拉伸范围
 */
void setCapInsets(const Rect &capInsets);


/**
 * 获取capInsets
 * @return LoadingBar的capInsets值
 */
const Rect& getCapInsets()const;

UILoadingBar示例

// 图片路径
var loadImage =  game.platform.path + "Login/Loadbar2.png";

// 初始化
var loading = new ccui.LoadingBar(loadImage, 50);

// 设置进度条的加载图片
loading.loadTexture(loadImage, ccui.Widget.LOCAL_TEXTURE);

// 设置九宫格
loading.setScale9Enabled(true);

// 设置九宫格的拉伸范围
loading.setCapInsets(cc.rect(0, 0, 100, 100));

// 设置进度
loading.setPercent(100);//开始的进度
loading.setPosition(640, 360);
this.addChild(loading);

UIPageView

UIPageView Api

/**
 * 翻页事件类型
 */
enum class EventType
{
    TURNING
};

/**
 * 触摸方向类型
 */
enum class TouchDirection
{
    LEFT,
    RIGHT,
    UP,
    DOWN
};

/**
 * UIPageView页面翻页事件回调
 */
typedef std::function<void(Ref*, EventType)> ccPageViewCallback;

/**
 * 创建一个UIPageView对象
 *@return UIPageView实例
 */
PageView();
static PageView* create();

/**
 * 设置滚动方向
 * @param direction 滚动方向
 */
virtual void setDirection(Direction direction) override;

/**
 * 往UIPageView中添加界面
 * @param page 继承于Widget的实例
 */
void addPage(Widget* page);

/**
 * 往UIPageView中的指定索引处插入界面
 * @param page  继承于Widget的实例
 * @param idx   索引
 */
void insertPage(Widget* page, int idx);

/**
 * 移除指定页面
 * @param page 指定的Widget实例
 */
void removePage(Widget* page);

/**
 * 移除指定页面
 * @param index 指定索引
 */
void removePageAtIndex(ssize_t index);

/**
 * 移除所有页面
 */
void removeAllPages();

/**
 * 滚动至某一页
 * @param idx       指定索引
 * @param itemIndex 指定索引
 */
void scrollToPage(ssize_t idx);
void scrollToItem(ssize_t itemIndex);

/**
 * 获取当前页面索引
 * @return 当前页面索引
 */
ssize_t getCurrentPageIndex() const { return _currentPageIndex; }

/**
 * 跳转到指定的页面
 * @param index 指定索引
 */
void setCurrentPageIndex(ssize_t index);

/**
 * 获取PageView中的所有页面
 * 已弃用，使用”Vector& ListView::getItems()“
 * @return 所有界面
 */
CC_DEPRECATED_ATTRIBUTE Vector& getPages();

/**
 * 根据索引获取指定页面
 * 已弃用，使用“Widget* ListView::getItem(index)”
 * @param index 索引
 * @return Layout页面
 */
CC_DEPRECATED_ATTRIBUTE Layout* getPage(ssize_t index);

/**
 * 添加一个页面回调到PageView，当一个页面翻动时，回调将被调用
 * @param callback 事件回调
 */
void addEventListener(const ccPageViewCallback& callback);

/**
 * 开启页面指示器
 * @param enabled 如果启用页面指示则为true，否则为false
 */
void setIndicatorEnabled(bool enabled);

/**
 * 获取是否开启了页面指示器
 * @return 如果启用页面指示则为true，否则为false
 */
bool getIndicatorEnabled() const { return _indicator != nullptr; }

/**
 * 使用锚点设置页面指示器的位置。
 * @param positionAsAnchorPoint 锚点
 */
void setIndicatorPositionAsAnchorPoint(const Vec2& positionAsAnchorPoint);

/**
 * 获取页面指示器的锚点
 * @return 锚点
 */
const Vec2& getIndicatorPositionAsAnchorPoint() const;

/**
 * 设置页面指示器的位置
 * @param position 坐标
 */
void setIndicatorPosition(const Vec2& position);

/**
 * 获取页面指示器的位置
 * @return 坐标
 */
const Vec2& getIndicatorPosition() const;

/**
 * 设置页面指示器的索引节点之间的间距
 * @param spaceBetweenIndexNodes 间距值
 */
void setIndicatorSpaceBetweenIndexNodes(float spaceBetweenIndexNodes);

/**
 * 获取页面指示器的索引节点之间的间距
 * @return 间距值
 */
float getIndicatorSpaceBetweenIndexNodes() const;

/**
 * 设置页面指示器的索引节点的颜色
 * @param spaceBetweenIndexNodes 颜色，例如：“cc.color(0, 0, 0)”
 */
void setIndicatorSelectedIndexColor(const Color3B& color);

/**
 * 获取页面指示器的索引节点的颜色
 * @return 颜色
 */
const Color3B& getIndicatorSelectedIndexColor() const;

UIPageView示例

// 分页控件初始化
var pageView = new ccui.PageView();
pageView.setContentSize(1099, 609);
pageView.setAnchorPoint(0.5, 0.5);
pageView.setPosition(640, 360);

// 启动分页指示器
pageView.setIndicatorEnabled(true);

// 设置分页指示器索引控件之间的间距
pageView.setIndicatorSpaceBetweenIndexNodes(50);

// 滚动方向
pageView.setDirection(ccui.ScrollView.DIR_VERTICAL);

this.addChild(pageView);

// 添加分页
for (var i = 0; i < 4; i ++) {
    // 容器
    var contain_view = new ccui.Layout();
    contain_view.setSize(pageView.width, pageView.height);
    contain_view.setBackGroundImageScale9Enabled(true);
    contain_view.setBackGroundImage(game.platform.public + "Guide/guide_" + i + ".png");

    pageView.addPage(contain_view);
}

// UIPageView翻页事件回调
pageView.addEventListener(function(sender,event){
    if (type == ccui.PageView.EVENT_TURNING) {
        cc.log("翻页事件回调");
    }
},this);

// 获取每页的内容大小
var contentHeight = pageView.getInnerContainerSize().height;

// UIPageView交互事件回调
pageView.addTouchEventListener(function (sender, type) {
    // 实时获取页码
    cc.log(sender.getCurrentPageIndex());
}.bind(this));

// 滚动至第四页
pageView.scrollToItem(3);

UIRichText(富文本)

RichElement(富文本元素基类,它定义了所有富文本元素的基本公共属性)

/**
 * 富文本类型
 */
enum class Type
{
    TEXT,   // 文本
    IMAGE,  // 图片
    CUSTOM, // 自定义内容
    NEWLINE // ?
};

RichElementText(用于显示文本)

/**
 * 创建RichElementText实例
 * @param tag       标识
 * @param color     字体色
 * @param opacity   透明度
 * @param text      文本内容
 * @param fontName  字体
 * @param fontSize  字体大小
 * @return 创建RichElementText实例
 */
static RichElementText* create(int tag, const Color3B& color, GLubyte opacity, const std::string& text, const std::string& fontName, float fontSize);

RichElementImage(用于显示图片)

/**
 * 创建RichElementImage实例
 * @param tag       标识
 * @param color     颜色
 * @param opacity   透明度
 * @param filePath  图片类型（Local、Plist）
 * @return RichElementImage实例
 */
static RichElementImage* create(int tag, const Color3B& color, GLubyte opacity, const std::string& filePath);

RichElementCustomNode(用于显示自定义节点类型)

/**
 * 创建一个RichElementCustomNode实例
 *
 * @param tag           标识
 * @param color         颜色
 * @param opacity       透明度
 * @param customNode    自定义节点
 * @return A RichElementCustomNode instance.
 */
static RichElementCustomNode* create(int tag, const Color3B& color, GLubyte opacity, Node* customNode);

RichElementNewLine(用于显示新元素？)

/**
 * 创建一个RichElementNewLine实例
 *
 * @param tag       标识
 * @param color     颜色
 * @param opacity   透明度
 * @return RichElementNewLine实例
 */
static RichElementNewLine* create(int tag, const Color3B& color, GLubyte opacity);

RichText(显示各种RichElements的容器)

/**
 * 构造函数
 * @return RichText实例
 */
static RichText* create();

/**
 * 插入一个RichElement对象到指定索引位置
 * @param element   继承于RichElement的对象
 * @param index     索引
 */
void insertElement(RichElement* element, int index);

/**
 * 在RichText的末尾添加一个RichElement
 * @param element 继承于RichElement的对象
 */
void pushBackElement(RichElement* element);

/**
 * 在给定的索引处移除RichElement
 * @param index 索引
 */
void removeElement(int index);

/**
 * 删除特定的RichElement
 * @param element 继承于RichElement的对象
 */
void removeElement(RichElement* element);

/**
 * 在每个RichElement之间设置垂直空间
 * @param space 垂直方向间距值
 */
void setVerticalSpace(float space);

/**
 * 重新排列RichText中的所有RichElement
 * 通常在内部调用
 */
void formatText();

UIRichText 示例

// 富文本
var richText = new ccui.RichText();      
richText.ignoreContentAdaptWithSize(true);
richText.setAnchorPoint(0, 0.5);
richText.setPosition(10, 20);
richText.setSize(340, 30);

var rewardNumber = "";
var rewardIcon = null;
switch (item.prize_type) {
    case 1: rewardNumber = "张房卡";  rewardIcon = this.icon_roomcard_s;  break;
    case 2: rewardNumber = "元红包";  rewardIcon = this.icon_redpacket_s; break;
    case 3: rewardNumber = "个幸运点"; rewardIcon = this.icon_dice_s;     break;
}

var re1 = new ccui.RichElementText(1, cc.hexToColor("#9A510E"), 255, "玩家[" + (item.userNickName || "") + "]抽中", "STYuanti-SC-Regular", 21);
var re2 = new ccui.RichElementText(1, cc.hexToColor("#E43615"), 255, item.prize_num || "0", "STYuanti-SC-Regular", 25);
var re3 = new ccui.RichElementText(1, cc.hexToColor("#9A510E"), 255, rewardNumber, "STYuanti-SC-Regular", 21);

richText.pushBackElement(re1);
richText.pushBackElement(re2);
richText.pushBackElement(re3);
this.addChild(richText);

UIScrollView

UIScrollView Api

/**
 * 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& getChildren() override;
virtual const Vector& 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;

UIScrollView示例

// 初始化
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);

UIScrollView制作表情列表

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

UIScrollViewBar（ScrollView滚动条）

UIScrollViewBar Api

/**
 * 使用其父类滚动视图和方向创建一个滚动条
 * @return UIScrollViewBar
 */
static ScrollViewBar* create(ScrollView* parent, ScrollView::Direction direction);

/**
 * 从左下角（水平）或右上角（垂直）设置滚动条位置。
 * @param positionFromCorner 从左下角（水平）或右上角（垂直）的位置。
 */
void setPositionFromCorner(const Vec2& positionFromCorner);

/**
 * 从左下角（水平）或右上角（垂直）获取滚动条位置。
 * @return positionFromCorner 滚动条位置
 */
Vec2 getPositionFromCorner() const;

/**
 * 设置滚动条的宽度
 * @param width 滚动条的宽度
 */
void setWidth(float width);

/**
 * 获取滚动条的宽度
 * @return 滚动条的宽度
 */
float getWidth() const;

/**
 * 设置滚动条自动隐藏状态
 * @param scroll 是否自动隐藏
 */
void setAutoHideEnabled(bool autoHideEnabled);

/**
 * 查询滚动条自动隐藏状态
 * @return 如果滚动条自动隐藏启用，则为true，否则为false
 */
bool isAutoHideEnabled() const { return _autoHideEnabled; }

/**
 * 设置滚动条自动隐藏时间
 * @param autoHideTime 滚动条自动隐藏时间
 */
void setAutoHideTime(float autoHideTime) { _autoHideTime = autoHideTime; }

/**
 * 获取滚动条自动隐藏时间
 * @return 滚动条自动隐藏时间
 */
float getAutoHideTime() const { return _autoHideTime; }

UISlider

UISlider Api

/**
 Slider事件
 */
enum class EventType
{
    ON_SLIDEBALL_DOWN,
    ON_SLIDEBALL_UP,
    ON_SLIDEBALL_CANCEL
};

/** 
 * 构造函数
 * @param barTextureName            Slider背景图片
 * @param normalBallTextureName     Slider滑动块图片
 * @param resType Texture resource  图片类型（Local、Plist）
 * @return Slider实例
 */
static Slider* create(const std::string& barTextureName,
                      const std::string& normalBallTextureName,
                      TextureResType resType = TextureResType::LOCAL);

/**
 * 设置Slider的背景图片
 * @param fileName 图片名
 * @param resType  图片类型（Local、Plist）
 */
void loadBarTexture(const std::string& fileName,TextureResType resType = TextureResType::LOCAL);

/**
 * 设置使用九宫格
 * @param 是否启用九宫格渲染
 */
void setScale9Enabled(bool able);

/**
 * 获取是否使用九宫格渲染
 * @return 是否启用九宫格渲染
 */
bool isScale9Enabled()const;

/**
 * 设置九宫格的拉伸范围
 * @param capInsets 拉伸范围
 */
void setCapInsets(const Rect &capInsets);

/**
 * 如果滑块正在使用九宫格渲染器，则为条形滑块设置拉伸范围
 * @param capInsets 拉伸范围
 */
void setCapInsetsBarRenderer(const Rect &capInsets);

/**
 * 获取滑块的九宫格拉伸范围
 * @return capInsets 拉伸范围
 */
const Rect& getCapInsetsBarRenderer()const;

/**
 * 如果滑块正在使用九宫格渲染器，则为进度条设置拉伸范围
 * @param capInsets 拉伸范围
 * @js NA
 */
void setCapInsetProgressBarRenderer(const Rect &capInsets);

/**
 * 获取进度条的九宫格拉伸范围
 * @return Capinsets 拉伸范围
 */
const Rect& getCapInsetsProgressBarRenderer()const;

/**
 * 加载滑块的纹理
 * @param normal    默认情况下的图片
 * @param pressed   按压情况下的图片
 * @param disabled  不可交互时的图片
 * @param texType   图片类型（Local、Plist）
 */
void loadSlidBallTextures(const std::string& normal,
                          const std::string& pressed = "",
                          const std::string& disabled = "",
                          TextureResType texType = TextureResType::LOCAL);

/**
 * 加载滑块默认情况下的纹理
 * @param normal    图片
 * @param resType   图片类型（Local、Plist）
 */
void loadSlidBallTextureNormal(const std::string& normal,TextureResType resType = TextureResType::LOCAL);

/**
 * 加载滑块按压情况下的纹理
 * @param pressed    图片
 * @param resType    图片类型（Local、Plist）
 */
void loadSlidBallTexturePressed(const std::string& pressed,TextureResType resType = TextureResType::LOCAL);

/**
 * 加载滑块不可用情况下的纹理
 * @param disabled   图片
 * @param resType    图片类型（Local、Plist）
 */
void loadSlidBallTextureDisabled(const std::string& disabled,TextureResType resType = TextureResType::LOCAL);

/**
 * 加载进度条进度部分的纹理
 *
 * @param fileName   图片
 * @param resType    图片类型（Local、Plist）
 */
void loadProgressBarTexture(const std::string& fileName, TextureResType resType = TextureResType::LOCAL);

/**
 * 设置进度值
 * @param percent 1-100
 */
void setPercent(int percent);

/**
 * 获取进度值
 * @return percent 1-100
 */
int getPercent()const;

/**
 * 设置最大进度值，可以给精度更多的控制
 * @param percent 最大进度
 */
void setMaxPercent(int percent);

/**
 * 获取最大进度
 * @return 最大进度
 */
int getMaxPercent()const;

/**
 * 添加交互事件
 * @param callback 回调
 */
void addEventListener(const ccSliderCallback& callback);

/**
 * 设置当用户按下按钮时，按钮将缩放到一个比例
 * 按钮的最终比例等于（按钮原始比例+ _zoomScale）
 */
void setZoomScale(float scale);

/**
 * 获取当用户按下按钮时，按钮将缩放到一个比例
 */
float getZoomScale()const;

UISlider 示例

// 初始化
var task_progress = new ccui.Slider();

// 设置进度条背景图片
task_progress.loadBarTexture(this.processbarbg_task_image, ccui.Widget.PLIST_TEXTURE);  

// 设置进度条进度图片
task_progress.loadProgressBarTexture(this.processbar_task_image, ccui.Widget.PLIST_TEXTURE); 

// 设置进度
task_progress.setPercent(progress);

// 不可交互
task_progress.setTouchEnabled(false);

task_line_contain.addChild(task_progress);

UIText

Cocos2dx 3.0 过渡篇 （二十一）自从Label有了freeType做靠山以后

UIText Api

/** 
 * 文本类型
 */
enum class Type
{
    SYSTEM, // 系统
    TTF     // TTF
};

/**
 * 构造函数
 */
Text();

/**
 * 创建一个Text对象
 * @return Text对象
 */
static Text* create();

/**
 *  用textContent，fontName和fontSize创建一个Text对象。
 *  用法:
 *  Text *text = Text::create("Hello", "Arial", 20);
 *  Text *text = Text::create("Hello", "xxx\xxx.ttf", 20);
 *
 * @param textContent   文本内容字符串
 * @param fontName      可以是系统字体名称或TTF文件路径。
 * @param fontSize      字体大小
 * @return Text对象
 */
static Text* create(const std::string& textContent,
                    const std::string& fontName,
                    float fontSize);

/**
 * 更改标签的字符串值
 * @param text  字符串值
 */
void setString(const std::string& text);

/**
 * 获取标签的字符串值
 * @return 字符串值
 */
const std::string& getString()const;

/**
 * 获取标签的字符串长度
 * 注意：这个长度将比原始字符串长度大，如果你想获得原始字符串的长度，你应该调用this->getString().size()来代替
 * @return  字符串长度
 */
ssize_t getStringLength()const;

/**
 * 设置标签的字体大小
 * @param 字体大小
 */
void setFontSize(float size);

/**
 * 获取标签的字体大小
 * @return 字体大小
 */
float getFontSize()const;

/** 
 * 设置文字颜色
 * @param color 文字颜色
 */
void setTextColor(const Color4B color);

/** 
 * 获取文字颜色
 * @return 文字颜色
 */
const Color4B& getTextColor() const;

/**
 * 设置标签的字体名称
 * 如果您尝试使用系统字体，则只需传递字体名称
 * 如果您尝试使用TTF，则应该将文件路径传递给TTF文件
 * 用法:
 * Text *text = Text::create("Hello", "Arial", 20);
 * text->setFontName("Marfelt");
 * text->setFontName("xxxx/xxx.ttf");
 * @param 字体名称
 */
void setFontName(const std::string& name);

/** 
 * 获取字体名称
 * @return 字体名称
 */
const std::string& getFontName()const;

/** 
 * 获取字体类型
 * @return 字体类型（Type）
 */
Type getType() const;

/**
 * 设置标签的触摸比例
 * @param enabled 启用标签的触摸缩放
 */
void setTouchScaleChangeEnabled(bool enabled);

/**
 * 获取标签的触摸比例
 * @return  标签是否已启用触摸比例
 */
bool isTouchScaleChangeEnabled()const;

/*
 * ？
 */
virtual Size getVirtualRendererSize() const override;

/*
 * ？
 */
virtual Node* getVirtualRenderer() override;

/** 
 * 获取自动模式下的渲染大小
 * @return 渲染大小在自动模式下的大小
 */
virtual Size getAutoRenderSize();

/**
 * 返回控件的“类名”
 */
virtual std::string getDescription() const override;

/**
 * 设置文字渲染范围（即文本显示范围）
 * 同时调用`ignoreContentAdaptWithSize（false）`，否则就是文本区域
 * 大小是通过文本内容的真实大小来计算的
 * @param 渲染范围
 *
 */
void setTextAreaSize(const Size &size);

/** 
 * 返回文本渲染区域大小
 * @return 文本渲染区域大小
 */
const Size& getTextAreaSize()const;

/**
 * 水平对齐方式
 */
enum class CC_DLL TextHAlignment
{
    LEFT,
    CENTER,
    RIGHT
};

/** 
 * 设置文本水平对齐
 * @param alignment 文本水平对齐类型
 */
void setTextHorizontalAlignment(TextHAlignment alignment);

/** 
 * 获取文本水平对齐
 * @return 文本水平对齐类型
 */
TextHAlignment getTextHorizontalAlignment()const;

/** 
 * 设置文本垂直对齐
 * @param alignment 文本垂直对齐类型
 */
void setTextVerticalAlignment(TextVAlignment alignment);

/** 
 * 获取文本垂直对齐
 * @return 文本垂直对齐类型
 */
TextVAlignment getTextVerticalAlignment()const;

/**
 * 为标签启用阴影，支持阴影效果模糊
 * @param shadowColor 阴影效果的颜色
 * @param offset      阴影效应的偏移
 * @param blurRadius  阴影效果的模糊半径
 */
void enableShadow(const Color4B& shadowColor = Color4B::BLACK,
                  const Size &offset = Size(2,-2),
                  int blurRadius = 0);

/**
 * 返回是否启用阴影效果。
 */
bool isShadowEnabled() const;

/**
 * 返回阴影偏移量
 */
Size getShadowOffset() const;

/**
 * 返回阴影模糊半径
 */
float getShadowBlurRadius() const;

/**
 * 返回阴影颜色
 */
Color4B getShadowColor() const;

/**
 * 为标签启用描边
 * 只有在使用系统字体时，才能在IOS和Android上运行
 *
 * @param outlineColor 描边的颜色
 * @param outlineSize  描边的大小
 */
void enableOutline(const Color4B& outlineColor,int outlineSize = 1);

/**
 * 返回描边大小
 */
int getOutlineSize() const;

/** 
 * 字体荧光，只支持TTF
 * @param glowColor 荧光颜色
 */
void enableGlow(const Color4B& glowColor);

/**
 * 文字效果
 */
enum class LabelEffect {
    NORMAL,
    OUTLINE,
    SHADOW,
    GLOW,
    ALL
};

/** 
 * 禁用所有文字效果，包括阴影，描边和荧光。
 */
void disableEffect();

/**
 * 禁用特定的文字效果
 * @param effect 使用LabelEffect参数指定应该禁用哪个效果。
 */
void disableEffect(LabelEffect effect);

/**
 * 返回当前字体效果类型
 */
LabelEffect getLabelEffectType() const;

/**
 * 返回当前效果颜色值
 */
Color4B getEffectColor() const;

UIText示例

var text = new ccui.Text("玉米包谷玉米包谷 ?(此处为emoji表情)", "STYuanti-SC-Regular", 20);
text.setPosition(640, 360);
text.setFontSize(30);
text.setTextColor(cc.hexToColor("#87562A"));
text.setTextAreaSize(cc.size(500, 300));
text.ignoreContentAdaptWithSize(false);
text.setTextHorizontalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_CENTER);

// 阴影
text.enableShadow(cc.color(0,0,0,255), cc.size(5, 5), 5);

// 描边
text.enableOutline(cc.color(255,255,255,255), 5);

// 取消描边
text.disableEffect(1);

UITextAtlas（艺术字）

UITextAtlas Api

/**
 * 构造函数
 */
TextAtlas();

/**
 * 创建一个TextAtlas对象
 * @return TextAtlas对象
 */
static TextAtlas* create();

/**
 * 从一个字符映射文件创建一个TextAtlas对象
 * @param stringValue  给定需要显示的字符串
 * 注意：输入的字符串必须是'.'、'/'、'1'、'2'、"3"、"4"、"5"、"6"、"7"、"8"、"9"
 * @param charMapFile  给定的字符映射文件名
 * 注意：文件图片中的文字必须在同一行，如果是两行的会无法显示完整
 * @param itemWidth    字符的宽度
 * @param itemHeight   字符的高度
 * @param startCharMap 字符映射文件的起始字符
 * 注意： 输入的字符串必须是'.'、'/'、'1'、'2'、"3"、"4"、"5"、"6"、"7"、"8"、"9"
 * @return TextAtlas对象
 */
static TextAtlas* create(const std::string& stringValue,
                         const std::string& charMapFile,
                         int itemWidth,
                         int itemHeight,
                         const std::string& startCharMap);

/** 
 * 从一个字符映射文件创建一个TextAtlas对象
 * @param stringValue  给定需要显示的字符串
 * 注意：输入的字符串必须是'.'、'/'、'1'、'2'、"3"、"4"、"5"、"6"、"7"、"8"、"9"
 * @param charMapFile  给定的字符映射文件名
 * 注意：文件图片中的文字必须在同一行，如果是两行的会无法显示完整
 * @param itemWidth    字符的宽度
 * @param itemHeight   字符的高度
 * @param startCharMap 字符映射文件的起始字符
 * 注意： 输入的字符串必须是'.'、'/'、'1'、'2'、"3"、"4"、"5"、"6"、"7"、"8"、"9"
 */
void setProperty(const std::string& stringValue,
                 const std::string& charMapFile,
                 int itemWidth,
                 int itemHeight,
                 const std::string& startCharMap);

/**
 * 为TextAtlas设置字符串值
 * @param value 给定需要显示的字符串
 */
void setString(const std::string& value);

/**
 * 获取TextAtlas的字符串值
 * @return 给定需要显示的字符串
 */
const std::string& getString() const;

/**
 * 获取字符串长度
 * 注意：这个长度将比原始字符串长度大
 * 如果你想得到原始字符串的长度，你应该调用this-> getString().size()来代替
 * @return  字符串长度
 */
ssize_t getStringLength()const;

UITextAtlas示例

// 此处字符"."对应的字符是"+"，字符"./167"对应展示的即为"+-167"
var text = new ccui.TextAtlas("", "res/Fonts/HeadScoreFont_0.png", 15, 26, ".");
text.setString("./167");
text.setPosition(640, 360);
this.addChild(text);

HeadScoreFont_0.png

HeadScoreFont_0.png对应的fnt文件

info face="Arial" size=32 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1 outline=0
common lineHeight=32 base=26 scaleW=256 scaleH=256 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0
page id=0 file="HeadScoreFont_0.png"
chars count=12
char id=43   x=0     y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=45   x=15    y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=48   x=30    y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=49   x=45    y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=50   x=60    y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=51   x=75    y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=52   x=90    y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=53   x=105   y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=54   x=120   y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=55   x=135   y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=56   x=150   y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15
char id=57   x=165   y=0     width=14    height=26    xoffset=0     yoffset=0     xadvance=14    page=0  chnl=15

UITextBMFont(FNT文字)

UITextBMFont Api

/**
 * 构造函数
 */
TextBMFont();

/**
 * 构造函数
 * @param text      显示的文本
 * @param filename  fnt文件路径
 * @return TextBMFont对象
 */
static TextBMFont* create();
static TextBMFont* create(const std::string& text, const std::string& filename);

/** 
 * 设置TextBMFont对象的Fnt文件
 */
void setFntFile(const std::string& fileName);

/**
 * 设置TextBMFont对象的文本
 */
void setString(const std::string& value);

/** 
 * 获取TextBMFont的字符串值
 */
const std::string& getString()const;

/**
 * 获取字符串长度
 * 注意：这个长度将比原始字符串长度大
 * 如果你想得到原始字符串的长度，你应该调用this-> getString().size()来代替
 * @return  字符串长度
 */
ssize_t getStringLength()const;

TextBMFont示例

// 此处的HeadScoreFont.fnt文件与TextAtlas中的FNT文件是同一个
var text = new ccui.TextBMFont("", "res/Fonts/HeadScoreFont.fnt");
text.setString("+-167");
text.setPosition(640, 360);
this.addChild(text);

UITextField（输入框，无光标）

UITextField Api

/**
 * TextField事件类型
 */
enum class EventType
{
    ATTACH_WITH_IME, // 键盘弹出
    DETACH_WITH_IME, // 键盘回收
    INSERT_TEXT,     // 输入字符
    DELETE_BACKWARD, // 删除字符
};

/**
 * 一个将在TextField事件发生时被调用的回调
 */
typedef std::function<void(Ref*, EventType)> ccTextFieldCallback;


/**
 * 构造函数
 */
TextField();

/**
 * 构造函数
 * @return TextField实例
 */
static TextField* create();

/**
 * 构造函数
 * @param placeholder   占位符
 * @param fontName The  字体名
 * @param fontSize The  字体大小
 * @return TextField实例
 */
static TextField* create(const std::string& placeholder,
                         const std::string& fontName,
                         int fontSize);

/**
 * 设置TextField触摸范围
 * 触摸范围用于 "hitTest"
 * @param 触摸范围
 */
void setTouchSize(const Size &size);

/**
 * 获取TextField的当前触摸范围
 * @return 触摸范围
 */
Size getTouchSize()const;

/**
 * 启用切换启用触摸区域。
 * @param enable 是否允许触摸
 */
void setTouchAreaEnabled(bool enable);

virtual bool hitTest(const Vec2 &pt, const Camera* camera, Vec3 *p) const override;

/**
 * 设置占位符
 * @param value 占位符
 */
void setPlaceHolder(const std::string& value);

/**
 * 获取占位符
 * @return 占位符
 */
const std::string& getPlaceHolder()const;

/**
 * 设置占位符颜色
 * @param color 占位符颜色
 */
void setPlaceHolderColor(const Color3B& color);
void setPlaceHolderColor(const Color4B& color);

/**
 * 获取占位符颜色
 * @return 占位符颜色
 */
const Color4B& getPlaceHolderColor()const;

/**
 * 设置文本颜色
 * @param textColor 文本颜色
 */
void setTextColor(const Color4B& textColor);

/**
 * 获取文本颜色
 * @return 文本颜色
 */
const Color4B& getTextColor()const;

/**
 * 设置文本大小
 * @param size 文本大小
 */
void setFontSize(int size);

/**
 * 获取文本大小
 * @return 文本大小
 */
int getFontSize()const;

/**
 * 设置文本字体
 * @param name 字体名
 */
void setFontName(const std::string& name);

/**
 * 获取文本字体
 * @return 文本字体
 */
const std::string& getFontName()const;

/**
 * 设置文本
 * @param text 文本
 */
void setString(const std::string& text);

/**
 * 获取文本
 * @return 文本
 */
const std::string& getString()const;

/**
 * 启用最大长度限制
 * @param enable 是否启用
 */
void setMaxLengthEnabled(bool enable);

/**
 * 获取是否启用最大长度
 * @return 是否启用
 */
bool isMaxLengthEnabled()const;

/**
 * 设置长度限制
 * @param length 最大长度
 */
void setMaxLength(int length);

/**
 * 获取长度限制的长度
 * @return 长度
 */
int getMaxLength()const;

/**
 * 获取文本长度
 * @return 文本长度
 */
int getStringLength() const;

/**
 * 启用密文模式
 * @param enable 是否启用密文模式
 */
void setPasswordEnabled(bool enable);

/**
 * 获取是否启用了密文模式
 * @return 是否启用密文模式
 */
bool isPasswordEnabled()const;

/**
 * 设置密文模式字符样式
 * @param styleText 字符样式，默认为'*'
 */
void setPasswordStyleText(const char* styleText);

/**
 * 获取密文样式
 * @return 密文样式
 */
const char* getPasswordStyleText()const;

/**
 * 设置启用IME
 * @param attach 如果附加IME则为true，否则为false。
 */
void setAttachWithIME(bool attach);

/**
 * 查询IME是否附加。
 * @return 如果附加了IME，则为true;否则为false。
 */
bool getAttachWithIME()const;

/**
 * 设置与IME分离
 * @param detach 是否分离
 */
void setDetachWithIME(bool detach);

/**
 * 查询IME是否被分离
 * @return 是否分离
 */
bool getDetachWithIME()const;

/**
 * 启用插入文本模式
 * @param true，启用；false，未启用
 */
void setInsertText(bool insertText);

/**
 * 是否准备好插入文本
 * @return 如果插入文本准备就绪，则返回true，否则返回false
 */
bool getInsertText()const;

/**
 * 启用删除字符模式
 * @param deleteBackward true，启用；false，未启用
 */
void setDeleteBackward(bool deleteBackward);

/**
 * 是否准备好删除文本
 * @return true进行删除文本，否则为false。
 */
bool getDeleteBackward()const;

/**
 * 给TextField添加一个事件监听器，当某个预定义的事件发生时，回调将被调用。
 * @param target   事件对象
 * @param selecor  对调函数
 */
void addEventListener(const ccTextFieldCallback& callback);

/**
 * 打开键盘
 */
void attachWithIME();

/**
 * 设置文字渲染范围（即文本显示范围）
 * 注意：要实现该函数的效果，必须调用该对象的ignoreContentAdaptWithSize(false)
 * @param 渲染范围
 */
void setTextAreaSize(const Size &size);

/**
 * 设置水平方向对齐方式
 * @param alignment 对齐方式，查看TextHAlignment
 */
void setTextHorizontalAlignment(TextHAlignment alignment);

/**
 * 获取水平方向对齐方式
 * @return 对齐方式
 */
TextHAlignment getTextHorizontalAlignment() const;

/**
 * 设置垂直方向对齐方式
 * @param alignment 对齐方式，查看TextVAlignment
 */
void setTextVerticalAlignment(TextVAlignment alignment);

/**
 * 获取垂直方向对齐方式
 * @return 对齐方式
 */
TextVAlignment getTextVerticalAlignment() const;

UIButton

UIButton Api

/**
 * 创建一个UIButton实例
 * @param normalImage   默认状态时的图片
 * @param selectedImage 点击状态时的图片
 * @param disableImage  禁用状态时的图片
 * @param texType       图片类型（Local、Plist）
 * @return UIButton实例
 */
static Button* create(const std::string& normalImage,
                      const std::string& selectedImage = "",
                      const std::string& disableImage = "",
                      TextureResType texType = TextureResType::LOCAL);

/**
 * 加载UIbutton图片
 * @param normal    默认状态时的图片
 * @param selected  点击状态时的图片
 * @param disabled  禁用状态时的图片
 * @param texType   图片类型（Local、Plist）
 */
void loadTextures(const std::string& normal,
                  const std::string& selected,
                  const std::string& disabled = "",
                  TextureResType texType = TextureResType::LOCAL);

/**
 * 加载UIbutton默认状态下的图片
 * @param normal    图片
 * @param texType   图片类型（Local、Plist）
 */
void loadTextureNormal(const std::string& normal, TextureResType texType = TextureResType::LOCAL);

/**
 * 加载UIbutton点击状态下的图片
 * @param selected   图片
 * @param texType    图片类型（Local、Plist）
 */
void loadTexturePressed(const std::string& selected, TextureResType texType = TextureResType::LOCAL);

/**
 * 加载UIbutton禁用状态下的图片
 * @param disabled   图片
 * @param texType    图片类型（Local、Plist）
 */
void loadTextureDisabled(const std::string& disabled, TextureResType texType = TextureResType::LOCAL);

/**
 * 设置九宫格拉伸范围
 * 只有在调用setScale9Enabled（true）时，capInset才会影响所有按钮的scale9渲染器
 * @param capInsets 拉伸范围
 */
void setCapInsets(const Rect &capInsets);

/**
 * 设置默认状态下的capInsets 
 * @param capInsets 拉伸范围
 */
void setCapInsetsNormalRenderer(const Rect &capInsets);

/**
 * 获取默认状态下的capInsets
 * @return 拉伸范围
 */
const Rect& getCapInsetsNormalRenderer()const;

/**
 * 设置点击状态下的capInsets 
 * @param capInsets 拉伸范围
 */
void setCapInsetsPressedRenderer(const Rect &capInsets);

/**
 * 获取点击状态下的capInsets
 * @return 拉伸范围
 */
const Rect& getCapInsetsPressedRenderer()const;

/**
 * 设置禁用状态下的capInsets 
 * @param capInsets 拉伸范围
 */
void setCapInsetsDisabledRenderer(const Rect &capInsets);

/**
 * 获取禁用状态下的capInsets
 * @return 拉伸范围
 */
const Rect& getCapInsetsDisabledRenderer()const;

/**
 * 启用scale9渲染
 * @param 是否启用
 */
virtual void setScale9Enabled(bool enable);

/**
 * 查询是否启用scale9渲染
 * @return true 或 false
 */
bool isScale9Enabled()const;

/**
 * 设置UIButton在按下时是否进行缩放
 * @param true 或 false
 */
void setPressedActionEnabled(bool enabled);

/**
 * 设置UIButton的标题
 * @param text 标题内容
 */
void setTitleText(const std::string& text);

/**
 * 获取UIbutton的标题
 * @return 标题内容
 */
const std::string getTitleText() const;

/**
 * 设置UIButton的标题颜色
 * @param color 标题颜色
 */
void setTitleColor(const Color3B& color);

/**
 * 获取UIButton的标题颜色
 * @return 标题颜色
 */
Color3B getTitleColor() const;

/**
 * 设置UIButton的标题大小
 * @param size 标题大小
 */
void setTitleFontSize(float size);

/**
 * 获取UIButton的标题大小
 * @return 标题大小
 */
float getTitleFontSize() const;

/**
 * 设置UIButton的标题字体
 * @param fontName 字体
 */
void setTitleFontName(const std::string& fontName);

/**
 * 获取UIButton的标题字体
 * @return 字体
 */
const std::string getTitleFontName() const;

/**
 * 设置UIButton的标题水平对齐
 * @param hAlignment 水平对齐
 */
void setTitleAlignment(TextHAlignment hAlignment);

/**
 * 设置UIButton的标题水平对齐、垂直对齐
 * @param hAlignment 水平对齐
 * @param vAlignment 垂直对齐
 */
void setTitleAlignment(TextHAlignment hAlignment, TextVAlignment vAlignment);

/** 
 * 当用户按下按钮时，按钮将缩放到一个比例。
 * 按钮的最终比例等于（按钮原始比例+ _zoomScale）
 * @param scale 缩放比例
 */
void setZoomScale(float scale);

/**
 * 返回一个按钮的缩放比例
 * @return 缩放比例
 */
float getZoomScale()const;

/**
 * 返回默认状态下的九宫格精灵
 * @return 默认状态下的九宫格精灵
 */
Scale9Sprite* getRendererNormal() const { return _buttonNormalRenderer; }

/**
 * 返回点击状态下的九宫格精灵
 * @return 点击状态下的九宫格精灵
 */
Scale9Sprite* getRendererClicked() const { return _buttonClickedRenderer; }

/**
 * 返回禁用状态下的九宫格精灵
 * @return 禁用状态下的九宫格精灵
 */
Scale9Sprite* getRendererDisabled() const { return _buttonDisabledRenderer; }

UIButton 示例

// 初始化，参数分别是默认状态、按下状态、禁用状态下的图片
var button = new ccui.Button("", "", "");  

// 锚点
button.setAnchorPoint(0.5, 0.5);

// 设置图片(正常情况下的图片、点击时的图片、禁用时的图片)
button.loadTextures("res/a.png", "res/b.png", "res/c.png");

// 位置
button.setPosition(10, 10);  

// 设置是否伴随点击缩放按钮图片  
emojiBtn.setPressedActionEnabled(false);

// 按钮标题
button.setTitleText(emojiList[i]);

// 按钮标题大小
button.setTitleFontSize(40);

// 按钮标题颜色 两者相同
button.setTitleColor(cc.color(53,53,53))
button.setColor(cc.color(0, 0, 0, 255));

// 设置字体样式
button.setTitleFontName("宋体,微软雅黑");

// 允许按钮穿透（解决在tableView上无法滚动的问题）
button.setSwallowTouches(false);

// 透明按钮（先设置图片，然后再调用loadTextures，参数传入""）
var copy_button = new ccui.Button(this.btn_back_img, this.btn_back_img, "", 1);
copy_button.loadTextures("", "", "");

// 设置按钮回调
button.addTouchEventListener( function(sender, type) {
    if (type == ccui.Widget.TOUCH_ENDED) {

    }
}.bind(this), this);

this.addChild(button);

UIAbstractCheckButton

UIAbstractCheckButton API

/**
 * 创建一个复选框
 * @param backGround            默认状态背景图片
 * @param backGroundSelected    选中状态背景图片
 * @param cross                 选中状态勾选图片
 * @param backGroundDisabled    禁用状态背景图片
 * @param frontCrossDisabled    禁用状态下的勾选图片
 * @param texType               图片类型（Local、Plist）
 * @return 复选框实例
 */
void loadTextures(const std::string& background,
                  const std::string& backgroundSelected,
                  const std::string& cross,
                  const std::string& backgroundDisabled,
                  const std::string& frontCrossDisabled,
                  TextureResType texType = TextureResType::LOCAL);

/**
 * 设置默认状态背景图片
 * @param backGround 默认状态背景图片
 * @param type       图片类型（Local、Plist）
 */
void loadTextureBackGround(const std::string& backGround,TextureResType type = TextureResType::LOCAL);

/**
 * 设置选中状态背景图片
 * @param backGroundSelected    选中状态背景图片
 * @param texType               图片类型（Local、Plist）
 */
void loadTextureBackGroundSelected(const std::string& backGroundSelected,TextureResType texType = TextureResType::LOCAL);

/**
 * 设置勾选图片
 * @param crossTextureName  勾选图
 * @param texType           图片类型（Local、Plist）
 */
void loadTextureFrontCross(const std::string& crossTextureName,TextureResType texType = TextureResType::LOCAL);

/**
 * 设置禁用状态背景图片
 * @param backGroundDisabled 禁用状态背景图片
 * @param texType            图片类型（Local、Plist）
 */
void loadTextureBackGroundDisabled(const std::string& backGroundDisabled,TextureResType texType = TextureResType::LOCAL);

/**
 * 设置禁用状态勾选图片
 * @param frontCrossDisabled 禁用状态勾选图
 * @param texType            图片类型（Local、Plist
 */
void loadTextureFrontCrossDisabled(const std::string& frontCrossDisabled,TextureResType texType = TextureResType::LOCAL);

/**
 * 获取当前的选中状态
 * @return true 或 false
 */
bool isSelected()const;

/**
 * 设置选中状态
 * 设置为true将导致CheckBox的状态为“selected”，否则为false。
 * @param true 或 false
 */
void setSelected(bool selected);

/** 
 * 设置用户按下复选框时，缩放的比例
 * CheckBox的最终比例等于（CheckBox原始比例+ _zoomScale）
 */
void setZoomScale(float scale);

/**
 * 获取用户按下复选框时，缩放的比例
 * @return 缩放比例
 */
float getZoomScale()const;

/**
 * 返回背景的精灵
 * @return 精灵
 */
Sprite* getRendererBackground() const { return _backGroundBoxRenderer; }

/**
 * 返回选中时的背景精灵
 * @return 精灵
 */
Sprite* getRendererBackgroundSelected() const { return _backGroundSelectedBoxRenderer; }

/**
 * 返回选中时的勾选图精灵
 * @return 精灵
 */
Sprite* getRendererFrontCross() const { return _frontCrossRenderer; }

/**
 * 返回禁用时的背景精灵
 * @return 精灵
 */
Sprite* getRendererBackgroundDisabled() const { return _backGroundBoxDisabledRenderer; }

/**
 * 返回选中时的勾选图精灵
 * @return 精灵
 */
Sprite* getRendererFrontCrossDisabled() const { return _frontCrossDisabledRenderer; }

ResourceData getBackNormalFile();
ResourceData getBackPressedFile();
ResourceData getBackDisabledFile();
ResourceData getCrossNormalFile();
ResourceData getCrossDisabledFile();

UICheckBox

UICheckBox Api

/**
 * UICheckBox的两个状态
 */
enum class EventType
{
    SELECTED,
    UNSELECTED
};

/**
 * 交互事件回调
 */
typedef std::function<void(Ref*,CheckBox::EventType)> ccCheckBoxCallback;

/**
 * 创建一个复选框
 * @param backGround            默认状态背景图片
 * @param backGroundSelected    选中状态背景图片
 * @param cross                 选中状态勾选图片
 * @param backGroundDisabled    禁用状态背景图片
 * @param frontCrossDisabled    禁用状态下的勾选图片
 * @param texType               图片类型（Local、Plist）
 * @return 复选框实例
 */
static CheckBox* create(const std::string& backGround,
                        const std::string& backGroundSelected,
                        const std::string& cross,
                        const std::string& backGroundDisabled,
                        const std::string& frontCrossDisabled,
                        TextureResType texType = TextureResType::LOCAL);

/**
 * 创建一个复选框
 * 此方法使用较少的资源来创建一个CheckBox。
 * @param backGround 默认状态背景图片
 * @param cross      选中状态勾选图片
 * @param texType    图片类型（Local、Plist）
 * @return 复选框实例
 */
static CheckBox* create(const std::string& backGround,
                        const std::string& cross,
                        TextureResType texType = TextureResType::LOCAL);

/**
 * 使用isSelected()进行设置选中状态
 */
CC_DEPRECATED_ATTRIBUTE void setSelectedState(bool selected){this->setSelected(selected);}

/**
 * 使用isSelected()获取选中状态
 */
CC_DEPRECATED_ATTRIBUTE bool getSelectedState()const{return this->isSelected();}

/**
 * 设置交互事件回调
 */
void addEventListener(const ccCheckBoxCallback& callback);

UICheckBox 示例

// 初始化
var node = new ccui.CheckBox("btn_radio_check.png","btn_radio_uncheck.png", "btn_radio_uncheck.png", "btn_radio_uncheck.png", "btn_radio_uncheck.png", ccui.Widget.PLIST_TEXTURE);

// 坐标
node.setPosition(640, 450);

// 设置可选状态
node.setSelected(true);
this.addChild(node);

// 获取选中状态
cc.log(node.isSelected());

UIRadioButton

UIRadioButton Api

/**
 * 状态类型
 */
enum class EventType
{
    SELECTED,
    UNSELECTED
};

/**
 * UIRadioButton回调
 */
typedef std::function<void(RadioButton* radioButton, EventType)> ccRadioButtonCallback;

/**
 * 创建一个RadioButton实例
 * @param backGround            默认状态下的背景图片
 * @param backGroundSelected    选中状态下的背景图片
 * @param cross                 选中状态下的勾选图片
 * @param backGroundDisabled    禁用状态下的背景图片
 * @param frontCrossDisabled    禁用状态下的勾选图片
 * @param texType               图片类型（Local、Plist）
 * @return RadioButton实例
 */
static RadioButton* create(const std::string& backGround,
                        const std::string& backGroundSelected,
                        const std::string& cross,
                        const std::string& backGroundDisabled,
                        const std::string& frontCrossDisabled,
                        TextureResType texType = TextureResType::LOCAL);

/**
 * 创建一个RadioButton实例
 * @param backGround        默认状态下的背景图片
 * @param cross             选中状态下的勾选图片
 * @param texType           图片类型（Local、Plist）
 * @return RadioButton实例
 */
static RadioButton* create(const std::string& backGround,
                        const std::string& cross,
                        TextureResType texType = TextureResType::LOCAL);

/**
 * 交互事件回调
 */
void addEventListener(const ccRadioButtonCallback& callback);

UIRadioButton 示例

var radio_uncheck = "btn_radio_uncheck.png";
var radio_check = "btn_radio_check.png";
var radio_croo = "btn_minus.png";
var node = new ccui.CheckBox(radio_uncheck, radio_check, radio_croo, radio_check, radio_check, ccui.Widget.PLIST_TEXTURE);
node.setAnchorPoint(0, 0);
node.setPosition(640, 360);
this.addChild(node);

UIImageView

UIImageView Api

/**
 * 创建一个UIImageView实例
 * @param imageFileName 图片
 * @param texType       图片类型（Local、Plist）
 * @return UIImageView实例
 */
static ImageView* create(const std::string& imageFileName, TextureResType texType = TextureResType::LOCAL);

/**
 * 加载图片
 * @param fileName   图片
 * @param texType    图片类型（Local、Plist）
 */
void loadTexture(const std::string& fileName,TextureResType texType = TextureResType::LOCAL);

/**
 * 设置UIImageView的位置和大小
 */
void setTextureRect(const Rect& rect);

/**
 * 设置是否开启九宫格
 * @param 是否开启九宫格
 */
void setScale9Enabled(bool enabled);

/**
 * 获取是否开启九宫格
 */
bool isScale9Enabled()const;

/**
 * 设置九宫格的拉伸范围
 * @param capInsets 拉伸范围
 */
void setCapInsets(const Rect &capInsets);

/**
 * 获取九宫格的拉伸范围
 */
const Rect& getCapInsets()const;

UIImageView 示例

var radio_uncheck = "btn_radio_uncheck.png";
var node = new ccui.ImageView(radio_uncheck, ccui.Widget.PLIST_TEXTURE);
node.setPosition(640, 360);
this.addChild(node);

UIEditBox

UIEditBoxDlegate Api(代理)

/**
 * 编辑框获得焦点时，在弹出键盘后调用此方法
 * @param editBox UIEditBox
 */
virtual void editBoxEditingDidBegin(EditBox* editBox) {};


/**
 * 编辑框失去焦点时，在隐藏键盘后调用此方法
 * @param editBox UIEditBox
 */
virtual void editBoxEditingDidEnd(EditBox* editBox) {};

/**
 * 当编辑框文本被改变时，这个方法被调用。
 * @param editBox UIEditBox
 * @param text 新的编辑框文本
 */
virtual void editBoxTextChanged(EditBox* editBox, const std::string& text) {};

/**
 * 当按下返回按钮或触摸键盘的外部区域时调用此方法。
 * @param editBox UIEditBox
 */
virtual void editBoxReturn(EditBox* editBox) = 0;

};

UIEditBox Api

/**
 * 键盘返回键的类型
 */
enum class KeyboardReturnType
{
    DEFAULT,
    DONE,
    SEND,
    SEARCH,
    GO
};

/**
 * 用户被允许输入的文本类型
 */
enum class InputMode
{
    ANY,            // 用户可以输入任何文本，包括换行符
    EMAIL_ADDRESS,  // 用户可以输入电子邮件地址。
    NUMERIC,        // 用户可以输入一个整数值。
    PHONE_NUMBER,   // 用户被允许输入电话号码。
    URL,            // 用户被允许输入一个URL。
    DECIMAL,        // 用户被允许输入实数值.NUMERIC的扩展，允许输入小数点
    SINGLE_LINE,    // 用户可以输入任何文本，除了换行符。
};

/**
 * 定义如何显示/输入文本格式化
 */
enum class InputFlag
{
    PASSWORD,                    // 表示输入的文本是应该保密的数据
    SENSITIVE,                   // 表示输入的文本是敏感数据（如信用卡）
    INITIAL_CAPS_WORD,           // 这个标志暗示了在文本编辑过程中，每个单词的首字母应该大写。
    INITIAL_CAPS_SENTENCE,       // 这个标志暗示了在文本编辑过程中，每个句子的首字母应该大写。
    INITIAL_CAPS_ALL_CHARACTERS, // 自动大写所有字符。
};

/**
 * 创建EditBox实例
 * @param size 尺寸
 * @param normalSprite   默认状态背景图
 * @param pressedSprite  点击状态背景图
 * @param disabledSprite 禁用状态背景图
 * @return EditBox的自动释放指针，只有当你再次保留时，你才需要释放它。
 */
static EditBox* create(const Size& size,
                       Scale9Sprite* normalSprite,
                       Scale9Sprite* pressedSprite = nullptr,
                       Scale9Sprite* disabledSprite = nullptr);


/**
 * 创建EditBox实例
 * @param size 尺寸
 * @param normal9SpriteBg 默认状态背景图
 * @return EditBox的自动释放指针，只有当你再次保留时，你才需要释放它。
 */
static EditBox* create(const Size& size,
                       const std::string& normal9SpriteBg,
                       TextureResType texType = TextureResType::LOCAL);

/**
 * 初始化指定大小的编辑框，这个方法应该在构造函数之后被调用（它会初始化视图的坐标，所以需要重新设置坐标位置，并且会自动换行）
 * @param size 输入框大小
 * @param normal9SpriteBg  默认状态输入框背景
 * @param texType 图片类型（Local、Plist）
 * @return Whether initialization is successfully or not.
 */
bool initWithSizeAndBackgroundSprite(const Size& size,
                                     const std::string& normal9SpriteBg,
                                     TextureResType texType = TextureResType::LOCAL);


/**
 * 初始化指定大小的编辑框，这个方法应该在构造函数之后被调用（它会初始化视图的坐标，所以需要重新设置坐标位置）
 * @param size 输入框大小
 * @param normal9SpriteBg 默认状态背景图像
 * @return 初始化是否成功。
 */
bool initWithSizeAndBackgroundSprite(const Size& size, Scale9Sprite* normal9SpriteBg);

/**
 * 设置代理对象
 */
void setDelegate(EditBoxDelegate* delegate);

/**
 * 获取代理对象
 */
EditBoxDelegate* getDelegate();

/**
 * 注册一个将被EditBox事件调用的脚本函数
 * 该处理程序将在onExit()调用后自动移除。
 * 代码示例：
 * -- lua示例：
 * local function editboxEventHandler(eventType)
 *     if eventType == "began" then
 *         -- 在键盘显示后编辑框获得焦点时触发
 *     elseif eventType == "ended" then
 *         -- 当键盘被隐藏后编辑框失去焦点时触发。
 *     elseif eventType == "changed" then
 *         -- 当编辑框文本被改变时触发。
 *     elseif eventType == "return" then
 *         -- 当按下返回按钮或触摸键盘的外部区域时触发。
 *     end
 * end
 *
 * local editbox = EditBox:create(Size(...), Scale9Sprite:create(...))
 * editbox = registerScriptEditBoxHandler(editboxEventHandler)
 * @endcode
 *
 * @param handler A number that indicates a lua function.
 * @js NA
 * @lua NA
 */
void registerScriptEditBoxHandler(int handler);

/**
 * 注销将被EditBox事件调用的脚本函数
 * @js NA
 * @lua NA
 */
void unregisterScriptEditBoxHandler(void);

/**
 * 得到一个脚本函数
 */
int  getScriptEditBoxHandler(void){ return _scriptEditBoxHandler ;}

/**
 * 设置在编辑框中输入的文字
 * @param pText 给定的文字
 */
void setText(const char* pText);

/**
 * 设置在编辑框中输入的文字
 * @return 给定的文字
 */
const char* getText(void);

/**
 * 设置字体，只允许系统字体
 * @param pFontName 字体名称
 * @param fontSize  字体大小
 */
void setFont(const char* pFontName, int fontSize);

/**
 * 设置字体名称，只允许系统字体
 * @param pFontName 字体名称
 */
void setFontName(const char* pFontName);

/**
 * 设置字体大小
 * @param fontSize 字体大小
 */
void setFontSize(int fontSize);

/**
 * 设置文本的字体颜色
 * @param color 字体颜色
 */
void setFontColor(const Color3B& color);
void setFontColor(const Color4B& color);

/**
 * 设置占位符的字体，只允许系统字体
 * @param pFontName 系统字体
 * @param fontSize  字体大小
 */
void setPlaceholderFont(const char* pFontName, int fontSize);

/**
 * 设置占位符的字体名称，只允许系统字体
 * @param pFontName 系统字体
 */
void setPlaceholderFontName(const char* pFontName);

/**
 * 设置占位符的字体大小
 * @param fontSize 字体大小
 */
void setPlaceholderFontSize(int fontSize);

/**
 * 编辑框为空时，设置占位符文本的字体颜色
 * @param color 占位符颜色
 */
void setPlaceholderFontColor(const Color3B& color);
void setPlaceholderFontColor(const Color4B& color);

/**
 * 设置占位符
 * @param pText 占位符文本
 */
void setPlaceHolder(const char* pText);

/**
 * 获取占位符
 * @return 占位符
 */
const char* getPlaceHolder(void);

/**
 * 设置编辑框的输入模式
 * @param inputMode 输入模式
 */
void setInputMode(InputMode inputMode);

/**
 * 设置编辑框的最大输入长度
 * 设置此值默认启用多行输入模式。
 * 在Android，iOS和Windows Phone上可用
 * @param maxLength 最大长度
 */
void setMaxLength(int maxLength);

/**
 * 获取编辑框的最大输入长度
 * @return Maximum 最大长度
 */
int getMaxLength();

/**
 * 设置编辑框的内容类型（密码、敏感词等）
 * @param inputFlag 内容类型
 */
void setInputFlag(InputFlag inputFlag);

/**
 * 设置键盘返回键的样式
 * @param returnType 
 */
void setReturnType(EditBox::KeyboardReturnType returnType);

UIEditBox 示例

// 加载Plist文件
cc.spriteFrameCache.addSpriteFrames(game.platform.path + "Setup/setting.plist"); 
this.inputbox01_img = "inputbox01.png";
this.inputbox02_img = "inputbox02.png";

var inputView = new cc.EditBox(cc.size(200, 40), new cc.Scale9Sprite(this.inputbox01_img), ccui.Widget.PLIST_TEXTURE);
inputView.setPosition(640, 360);
inputView.setName("");
inputView.setDelegate(this);
inputView.setMaxLength(100);
inputView.setInputFlag(cc.EDITBOX_INPUT_FLAG_SENSITIVE);    //修改为不使用密文
inputView.setInputMode(cc.EDITBOX_INPUT_MODE_SINGLELINE);   //设置不可换行,可以输入任意文字
inputView.initWithSizeAndBackgroundSprite(cc.size(600, 40), this.inputbox01_img, ccui.Widget.PLIST_TEXTURE);
inputView.setPosition(640, 360);
inputView.setPlaceholderFontColor(cc.hexToColor("#744b37"));
inputView.setFontColor(cc.hexToColor("#744b37"));
inputView.setPlaceholderFontSize(34);
inputView.setFontSize(34);
inputView.setPlaceHolder("请输入文字");
this.addChild(inputView);

WebView

cocos2d-x3.3 lua调用webview回调函数

WebView Api

/**
 * 设置javascript接口前缀（用于JS交互作用）
 * 例如设置为"js",那么页面在跳转"js://xxx"时，会走setOnJSCallback回调
 */
void setJavascriptInterfaceScheme(const std::string &scheme);

/**
 * 设置主页内容、MIME类型、内容编码,基本URL
 * @param data     主要的内容页面。
 * @param MIMEType 描述消息内容类型的因特网标准
 * @param encoding 编码数据
 * @param baseURL  根链接
 */
void loadData(const cocos2d::Data &data, const std::string &MIMEType, const std::string &encoding, const std::string &baseURL);

/**
 * 设置主页内容和基本URL
 * @param string  主要的内容页面
 * @param baseURL 基URL
 */
void loadHTMLString(const std::string &string, const std::string &baseURL = "");

/**
 * 加载给定的URL
 * @param url 要加载的URL
 */
void loadURL(const std::string &url);

/**
 * 加载给定的本地文件
 * @param fileName 要加载的文件路径
 */
void loadFile(const std::string &fileName);

/**
 * 停止加载
 */
void stopLoading();

/**
 * 重新加载
 */
void reload();

/**
 * 判断是否能返回上一页（即回到上一个URL页面）
 * @return 是否能返回
 */
bool canGoBack();

/**
 * 判断是否能跳转下一页（即加载下一个URL界面）
 * @return 是否能返回
 */
bool canGoForward();

/**
 * 回到上一页
 */
void goBack();

/**
 * 前往下一页
 */
void goForward();

/**
 * 用于调用JavaScript中的函数（如，web:evaluateJS("alert(\"hello\")")）
 */
void evaluateJS(const std::string &js);

/**
 * 设置是否支持缩放，默认是false
 */
void setScalesPageToFit(const bool scalesPageToFit);

/**
 * webView的回调函数
 */
typedef std::function<void(WebView *sender, const std::string &url)> ccWebViewCallback;

/**
 * 设置即将开始加载时的回调
 * @param  callback 回调函数
 * @return true，允许加载；false，不允许加载
 */
void setOnShouldStartLoading(const std::functionconst std::string &url)>& callback);

/**
 * 获取即将开始加载时的回调
 */
std::functionconst std::string &url)> getOnShouldStartLoading()const;

/**
 * 设置加载完成时的回调
 * @param callback 回调函数
 */
void setOnDidFinishLoading(const ccWebViewCallback& callback);

/**
 * 获取加载完成时的回调
 */
ccWebViewCallback getOnDidFinishLoading()const;

/**
 * 设置加载失败时的回调
 * @param callback 回调函数
 */
void setOnDidFailLoading(const ccWebViewCallback& callback);

/**
 * 获取加载失败时的回调
 */
ccWebViewCallback getOnDidFailLoading()const;

/**
 * 设置JS事件回调
 */
void setOnJSCallback(const ccWebViewCallback& callback);

/**
 * 获取JS事件回调
 */
ccWebViewCallback getOnJSCallback()const;

WebView示例

ctor: function () {
    // 初始化
  var webView = new ccui.WebView();

  // 坐标
  webView.setPosition(640, 360);

  // 控件大小
  webView.setContentSize(1280, 720);

  // 加载网络URL
  webView.loadURL(http://www.baidu.com);

  // 允许缩放
  webView.setScalesPageToFit(true);

  // 添加到视图上
  this.addChild(webView);

  // 设置加载流程回调
  webView.setOnDidFinishLoading(this.OnDidFinishLoading.bind(this));
  webView.setOnDidFailLoading(this.OnDidFailLoading.bind(this));
  webView.setOnShouldStartLoading(this.OnShouldStartLoading.bind(this));

  // 设置一个JS跳转的规则，cocosjs是前缀，即当跳转界面cocosjs://xxxx时，会进行回调，查看下面的OnJSCallback()函数
  webView.setJavascriptInterfaceScheme("cocosjs");

  // 设置JS回调
  webView.setOnJSCallback(this.OnJSCallback.bind(this));
},

/**
 * 加载完成后的回调
 * @param sender WebView
 * @param url    链接
 */
OnDidFinishLoading: function(sender, url) {
    cc.log("webView OnDidFinishLoading");
},

/**
 * 加载失败后的回调
 * @param sender WebView
 * @param url    链接
 */
OnDidFailLoading: function(sender, url) {
    cc.log("webView OnDidFailLoading");
},

/**
 * JS触发时的回调（在进行跳转的时候才会调用）
 * @param sender WebView
 * @param url    链接
 */
OnJSCallback: function(sender, url) {
    cc.log("JS回调 = " + url);
    if (url == "cocosjs://closeKefuH5") {
        game.UISystem.closeWindow(this);
    }
},

/**
 * 开始加载时的回调
 * @param sender WebView
 * @param url    链接
 */
OnShouldStartLoading: function(sender, url) {
    cc.log("webView OnShouldStartLoading");

    return true;
},

UIScale9Sprite

浅谈一下对cocos2d-x中九宫格精灵的简单理解和使用

UIScale9Sprite Api

/**
 * 内置着色器状态
 * 目前支持 默认 和 灰色 状态。
 */
enum class State
{
    NORMAL,
    GRAY
};

/**
 * 渲染类型
 */
enum class RenderingType
{
    SIMPLE,
    SLICE
};

/**
 * 创建一个空的Scale9Sprite
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create();

/**
 * 使用纹理文件，指定界限和指定的图章创建九宫格精灵
 * @param file      纹理文件名称
 * @param rect      九宫格的显示尺寸
 * @param capInsets 拉伸区域
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create(const std::string& file, const Rect& rect,  const Rect& capInsets);

/**
 * 用纹理文件创建一个九宫格精灵。 整个纹理将被分解成相等块的3×3网格。
 * @param capInsets 拉伸区域
 * @param file      纹理文件名称
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create(const Rect& capInsets, const std::string& file);

/**
 * 用纹理文件和指定界限创建一个九宫格精灵。 纹理将被分解成相等块的3×3网格
 * @param file 纹理文件名称
 * @param rect 九宫格的显示尺寸
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create(const std::string& file, const Rect& rect);

/**
 * 用纹理文件创建一个九宫格精灵。 整个纹理将被分解成相等块的3×3网格
 * @param file 纹理文件名称
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* create(const std::string& file);

/**
 * 使用SpriteFrame对象创建一个九宫格精灵
 * 一旦创建了精灵，你就可以调用它的“setContentSize：”方法来调整精灵的大小，它将会是九宫格优良的内核
 * 它也受AnchorPoint属性影响
 *
 * @param spriteFrame  SpriteFrame对象
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* createWithSpriteFrame(SpriteFrame* spriteFrame);

/**
 * 创建一个带有SpriteFrame对象和其区域中心的九宫格精灵
 * 一旦创建了精灵，你就可以调用它的“setContentSize：”方法来调整精灵的大小，它将会是九宫格优良的内核
 * 它也受AnchorPoint属性影响
 *
 * @param spriteFrame SpriteFrame对象
 * @param capInsets   拉伸区域
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* createWithSpriteFrame(SpriteFrame* spriteFrame, const Rect& capInsets);

/**
 * 使用SpriteFrame对象名称创建一个九宫格精灵
 * 一旦创建了精灵，你就可以调用它的“setContentSize：”方法来调整精灵的大小，它将会是九宫格优良的内核
 * 它也受AnchorPoint属性影响
 *
 * @see initWithSpriteFrameName(const char *spriteFrameName)
 * @param spriteFrameName A sprite frame name.
 * @return A Scale9Sprite instance.
 */
static Scale9Sprite* createWithSpriteFrameName(const std::string& spriteFrameName);

/**
 * 创建一个SpriteFrame对象名称和区域中心的九宫格精灵
 * 一旦创建了精灵，你就可以调用它的“setContentSize：”方法来调整精灵的大小，它将会是九宫格优良的内核
 * 它也受AnchorPoint属性影响
 *
 * @param spriteFrameName 一个SpriteFrame对象
 * @param capInsets       拉伸区域
 * @return 一个Scale9Sprite实例
 */
static Scale9Sprite* createWithSpriteFrameName(const std::string& spriteFrameName, const Rect& capInsets);

/**
 * 使用capInsets创建并返回一个新的Scale9Sprite
 * 您可以使用这种方法将capInsets添加到sprite或更改sprite的现有capInsets
 * 在这两种情况下，你都会得到一个新的图像，并且原始的精灵仍然保持原样
 * 
 * @param capInsets 拉伸区域
 * @return 一个Scale9Sprite实例
 */
Scale9Sprite* resizableSpriteWithCapInsets(const Rect& capInsets) const;

/**
 * 用指定的Sprite更新Scale9Sprite。
 *
 * @param sprite    Sprite对象
 * @param rect      九宫格的显示尺寸
 * @param rotated   精灵是否旋转
 * @param capInsets 拉伸区域
 * @return 如果更新成功则为true，否则为false。
 */
virtual bool updateWithSprite(Sprite* sprite,
                              const Rect& rect,
                              bool rotated,
                              const Rect& capInsets);

/**
 * 用指定的Sprite更新Scale9Sprite。
 *
 * @param sprite        Sprite对象
 * @param rect          九宫格的显示尺寸
 * @param rotated       精灵是否旋转
 * @param offset        对精灵进行切片时的偏移量。
 * @param originalSize  精灵的原始大小。
 * @param capInsets     拉伸区域
 * @return 如果更新成功则为true，否则为false。
 */
virtual bool updateWithSprite(Sprite* sprite,
                              const Rect& rect,
                              bool rotated,
                              const Vec2 &offset,
                              const Size &originalSize,
                              const Rect& capInsets);

/**
 * 更改Sprite内部的SpriteFrame
 *
 * @param spriteFrame SpriteFrame对象
 * @param capInsets   拉伸区域
 */
virtual void setSpriteFrame(SpriteFrame * spriteFrame, const Rect& capInsets = Rect::ZERO);

// 重用方法
virtual void setContentSize(const Size & size) override;
virtual void setAnchorPoint(const Vec2& anchorPoint) override;

/**
 * 更改九宫格精灵的状态
 * @param state 状态枚举值
 */
void setState(State state);

/**
 * 查询当前明亮状态
 * @return 状态枚举值
 */
State getState()const;

/**
 * 查询精灵的原始大小
 * @return Sprite size.
 */
Size getOriginalSize() const;

/**
 * 更改Scale9Sprite的显示尺寸
 * @param size 九宫格的显示尺寸
 */
void setPreferredSize(const Size& size);

/**
 * 查询Scale9Sprite的显示尺寸
 * @return Scale9Sprite的显示尺寸
 */
Size getPreferredSize() const;

/**
 * 更改拉伸区域
 * @param rect 拉伸区域
 */
void setCapInsets(const Rect& rect);

/**
 * 获取拉伸区域
 * @return 拉伸区域
 */
Rect getCapInsets()const;

/**
 * 改变Sprite左侧间距
 * @param leftInset 左侧间距
 */
void setInsetLeft(float leftInset);

/**
 * 获取Sprite左侧间距
 * @return 左侧间距
 */
float getInsetLeft()const;

/**
 * 改变Sprite顶部间距
 * @param topInset 顶部间距
 */
void setInsetTop(float topInset);

/**
 * 获取Sprite顶部间距
 * @return 顶部间距
 */
float getInsetTop()const;

/**
 * 改变Sprite右侧间距
 * @param rightInset 右侧间距
 */
void setInsetRight(float rightInset);

/**
 * 获取Sprite右侧间距
 * @return 右侧间距
 */
float getInsetRight()const;

/**
 * 改变Sprite底部间距
 * @param bottomInset 底部间距
 */
void setInsetBottom(float bottomInset);

/**
 * 获取Sprite底部间距
 * @return 底部间距
 */
float getInsetBottom()const;

/**
 * 切换九宫格特性
 * 如果Scale9Sprite禁用九宫格特性，Scale9Sprite将呈现为普通精灵。
 * 不要使用setScale9Enabled（false），应使用setRenderingType（RenderingType :: SIMPLE）。setScale9Enabled（false）仅用于回退兼容性。
 * @param enabled 启用九宫格为true，否则为false。
 */
void setScale9Enabled(bool enabled);

/**
 * 查询Scale9Sprite是否启用九宫格
 * @return 启用九宫格为true，否则为false。
 */
bool isScale9Enabled()const;

/**
 * 获取原始的没有九宫格特性的Sprite
 * @return Sprite实例
 */
Sprite* getSprite()const;

/**
 * 设置是否水平翻转
 * @param flippedX true则进行翻转，false则不翻转
 */
virtual void setFlippedX(bool flippedX);

/**
 * 返回是否水平翻转
 * 它只翻转部件的纹理，而不是部件的子部件的纹理。
 * 此外，翻转纹理不会改变anchorPoint。
 * 如果你想要翻转它或者它的子部件的anchorPoint，可以使用：
 * widget->setScaleX(sprite->getScaleX() * -1);
 *
 * @return 如果水平翻转，则为true，否则为false。
 */
virtual bool isFlippedX()const;

/**
 * 设置是否垂直翻转
 * @param flippedY 如果垂直翻转，则返回true，否则返回false。
 */
virtual void setFlippedY(bool flippedY);

/**
 * 返回是否垂直翻转
 * 它只翻转部件的纹理，而不是部件的子部件的纹理。
 * 此外，翻转纹理不会改变anchorPoint。
 * 如果你想要翻转它或者它的子部件的anchorPoint，可以使用：
 * widget->setScaleY(widget->getScaleY() * -1);
 *
 * @return 如果垂直翻转，则为true，否则为false。
 */
virtual bool isFlippedY()const;

// 重用函数
virtual void setScaleX(float scaleX) override;
virtual void setScaleY(float scaleY) override;
virtual void setScale(float scale) override;
virtual void setScale(float scaleX, float scaleY) override;
using Node::setScaleZ;
virtual float getScaleX() const override;
virtual float getScaleY() const override;
virtual float getScale() const override;
using Node::getScaleZ;
virtual void setCameraMask(unsigned short mask, bool applyChildren = true) override;
virtual void setGlobalZOrder(float globalZOrder) override;

/**
 * 设置Scale9Sprite渲染类型。
 * 当设置为SIMPLE时，只有4个顶点用于渲染。否则将使用16个顶点进行渲染.
 * @see RenderingType
 */
void setRenderingType(RenderingType type);

/**
 * 获取Scale9Sprite渲染类型。
 */
RenderingType getRenderingType()const;

// 重置渲染
void resetRender();

UIScale9Sprite示例

// 聊天内容气泡
var contentBubble = new cc.Scale9Sprite("res/Resource/Circle/ChatWindow/bg_panel_chat_1.png");

// 设置九宫格拉伸范围
contentBubble.setCapInsets(cc.rect(15, 40, 435, 0));

// 设置九宫格精灵显示大小
contentBubble.setPreferredSize(cc.size(chatContentSize.width + Chat_TextSize, chatContentSize.height + 10));

contentBubble.setAnchorPoint(0, 1);

contentBubble.setPosition(headerContainView.x + headerContainView.width + 10, size.height - 40);

this.addChild(contentBubble);