outline封装的控件

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差距较大,所以我对它们进行了适配。主要包括以下几个注意点:

  1. 这里创建的button均不是ccui.Button,而是outline重写的。
  2. 部分支持导出cocos creator自带的button。支持导出translation为sprite,其余translation将都作为scale button导出。
  3. 在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 ------是否吞掉触摸事件
  1. 这里的button实现是组件式的(除了SelectButton类型),即它本身并不是控件,而它的加入可以使宿主控件变成按钮。
  2. 上图中的buttonType可选项为:
      ScaleButton
      ColorButton
      SpriteButton
      SelectButton
  3. ScaleButton和ColorButton均已经预设好了点击时的动画。
  4. SpriteButton通过下面三个属性normal,pressed,disabled设置。
  5. SelectButton为多选或者单选按钮。它要求宿主节点包含一个名为selected的子节点作为选中标志。它提供以下三个方法:
     setOnSelect(function)
     setOnUnSelect(function)
     setSelect(bool)
  6. 除了SelectButton,其他button提供如下方法:
     setEnabled(bool)
     setOnclick(onClick,para1,para2)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容