outline可以导出以"o__"为前缀的自定义组件,然后再在lua端编写解析代码。通过这个特性,可以轻松的实现自定义控件。目前outline已经封装了如下控件:
Label
EditBox
Scale9Sprite
Sprite
ParticleSystem
ProgressBar
Button
Listview
Scrollview
Widget
其中Button是完全重写的,Listview和Scrollview的creator端是重写的组件。Button以及Listview、Scrollview都是通过导出以"o__"为前缀的自定义组件来实现的,可以作为实现自定义控件的例子。
Button
由于cocos creator中的button和cocos2d-x中的button差距较大,所以我对它们进行了适配。主要包括以下几个注意点:
- 这里创建的button均不是ccui.Button,而是outline重写的。
- 部分支持导出cocos creator自带的button。支持导出translation为sprite,其余translation将都作为scale button导出。
- 在outline-idea项目中,outline-lua/BtnFactory.lua文件定义了这里的Button模块;components/button.js是该Button在cocos creator中的组件脚本,它在属性检查器中的样子如下图:
button.js
面板中各个属性的含义:
enable_auto_gray_effect -------此项设为true后,若button本身是个Sprite,则在setEnabled(false)后自动变灰
buttonType ------此项用来设置button的类型,包括ScaleButton、ColorButton、SpriteButton、SelectButton、NoTransition
needSwallowTouch ------是否吞掉触摸事件
- 这里的button实现是组件式的(除了SelectButton类型),即它本身并不是控件,而它的加入可以使宿主控件变成按钮。
- 上图中的buttonType可选项为:
ScaleButton
ColorButton
SpriteButton
SelectButton - ScaleButton和ColorButton均已经预设好了点击时的动画。
- SpriteButton通过下面三个属性normal,pressed,disabled设置。
- SelectButton为多选或者单选按钮。它要求宿主节点包含一个名为selected的子节点作为选中标志。它提供以下三个方法:
setOnSelect(function)
setOnUnSelect(function)
setSelect(bool) - 除了SelectButton,其他button提供如下方法:
setEnabled(bool)
setOnclick(onClick,para1,para2)
