组件 Component
LayaAir自带的组件类都位于laya.ui
包中,所有的组件直接或间接地继承自Component
类,Component
类是UI组件的基类。每个组件都拥有属于自己的属性、方法和事件。使用组件可以使程序设计与界面设计分离,以提高代码的可复用性。
项目 | 描述 | 值 |
---|---|---|
Package | 包 | laya.ui |
Class | 类 | Laya.Component |
Inheritance | 继承 | Component / Sprite / Node /EventDispatcher / Object |
Implement | 实现 | IComponent |
SubClass | 子类 | Box、Button、Clip、ColorPicker、ComboBox、Image、Label、ProgressBar、ScrollBar、Slider、TipManager |
组件的生命周期:
Component
的生命周期是从预初始化(preinitialize )开始,然后创建子级(createChildren ),接着进行初始化(initialize ),最后进入组件构造函数。
关于界面组件化
在团队协作过程中采用IDE生成UI代码的方法是非常容易产生代码冲突的,而且这种冲突往往难以解决。当两个人同时修改同一个UI文件,通过IDE生成的代码稍微移动某个空间代码可能会改动许多处。另外UI代码非常冗长。为了减少代码的冲突,更好地整理逻辑代码,以减少bug的产生。组件化的代码逻辑会更加清晰且有利于修复bug。
组件化首先需要在设计层面将界面组件化,设计上需要提前思考前端如何组建下,一般会按照界面上完成相同功能的组件放到同一个组件UI中。例如棋牌游戏开发中,玩家都具有共同展示任务相关的模块,包括头像、金钱、胜率等,可能同一个房间内有多个玩家,那么就可以直接将展示玩家信息的控件进行组件化。
具体实现上会采用一个UI类去继承对应的UI,对应继承的类的this
指针可以直接获取到父类的所有控件信息。例如,UI中有一个Game类,Game类继承了最底层的UI即整个游戏的画布。所有的组件都依赖于game.ui
。通过将Game添加到Stage舞台中,其他的UI添加到Game中来显示。同时布局都是在game.ui
添加空白的Sprite精灵,再将对应的组件实例化后addChild
到对应的Sprite中。对于Game类,可以通过this.getChildByName
来获取对应的精灵Sprite,通过管理Sprite精灵就可以直接设置对应控件的位置。对于其他具体的组件,一般还需要考虑对应的动画逻辑。创建对应的类来继承UI。一般情况下会将组件上所有的控件在类中使用属性保存,然后通过getChildByName
来赋值。
继承 Sprite
Sprite
精灵类作为LayaAir引擎中最基本的显示对象容器类,Component
组件类继承自Sprite
类,并新增了组件通用的属性、方法和接口,规定了组件的生命周期等扩展功能。
项目 | 描述 | 值 |
---|---|---|
Package | 包 | laya.display |
Class | 类 | public class Sprite |
Inheritance | 继承 | Sprite / Node / EventDispatcher / Object |
Implement | 实现 | laya.display.ILayout |
SubClass | 子类 | AnimationPlayerBase、Component、DialogManager、GridSprite、MapLayer、MovieClip、Particle2D、Scene、Skeleton、Stage、Text、TileAniSprite、Video |
LayaAir引擎的API设计的精简巧妙,核心显示类只有一个Sprite
,Sprite
会针对不同情况做渲染优化,所以保证一个类实现丰富功能的同时又能达到较高性能。
Sprite
是基本的显示图形的显示列表节点,默认没有宽高且不接受鼠标事件。
Sprite
默认没有宽高,但可通过getBounds()
函数获取,也可以手工设置宽高。可以通过设置autoSize = true
后再获取宽高。Sprite
的宽高一般用于进行碰撞检测和排版,并不影响显示图像大小,如果需要更改显示图像的大小,可以通过scale
、scaleX
、scaleY
缩放来实现。
Sprite
默认不接受鼠标事件,即mouseEnabled = false
,只要对其监听任意鼠标事件均会自动打开自己以及所有父对象的mouseEnabled = true
。所以一般无需手工设置mouseEnabled
属性。
Sprite
同时也是容器类,可以用来添加多个子节点。
属性
属性 | 描述 |
---|---|
anchorX:Number | X轴锚点 值为0~1 |
anchorY:Number | Y轴锚点 值为0~1 |
centerX:Number | 对象水平中轴线与父容器水平中心线的像素距离 |
centerY:Number | 对象垂直中轴线与父容器垂直中心线的像素距离 |
scaleX:Number | X轴缩放值,默认为1。设置为负数可实现水平反转。 |
scaleY:Number | Y轴缩放值,默认为1。设置为负数可实现垂直反转。 |
height:Number | 显示对象的像素高度 |
width:Number | 显示对象的像素宽度 |
displayHeight:Number | 对象显示像素高度 |
displayWidth:Number | 对象显示像素宽度 |
bottom:Number | 组件底部到内容区域底边之间垂直像素间距 |
top:Number | 从组件顶边到内容区域顶部之间的垂直像素距离 |
left:Number | 从组件左边到内容区域左边之间的水平像素间距 |
right:Number | 从组件右边到内容区域右边之间的水平像素间距 |
layoutEnabled:Boolean=true | 是否启用相对布局 |
tag:* | 对象的标签 |
toolTip:* | 鼠标悬停提示 |
comXml:Object | XML数据 |
dataSource:* | 数据赋值,通过对UI赋值来控制UI显示逻辑。 |
disabled:Boolean | 是否禁用页面 |
gray:Boolean | 是否变灰 |
例如:自定义层组件
//层
class Layer{
//场景层
public static SCENE_LAYER:laya.ui.Component;
//特效层
public static EFFECT_LAYER:laya.ui.Component;
//遮罩层,触发关闭界面操作
public static WINDOW_LAYER:laya.ui.Component;
//动画层
public static TOP_LAYER:laya.ui.Component;
//构造器
constructor(){
//初始化场景层
Layer.SCENE_LAYER = new laya.ui.Component();
Layer.SCENE_LAYER.width = Laya.stage.width;
Layer.SCENE_LAYER.height = Laya.stage.height;
// Layer.SCENE_LAYER.mouseEnabled = false;
Laya.stage.addChild(Layer.SCENE_LAYER);
//初始化特效层
Layer.EFFECT_LAYER = new laya.ui.Component();
Layer.EFFECT_LAYER.width = Laya.stage.width;
Layer.EFFECT_LAYER.height = Laya.stage.height;
Layer.EFFECT_LAYER.mouseEnabled = false;
Laya.stage.addChild(Layer.EFFECT_LAYER);
//初始化遮罩层
Layer.WINDOW_LAYER = new laya.ui.Component();
Layer.WINDOW_LAYER.width = Laya.stage.width;
Layer.WINDOW_LAYER.height = Laya.stage.height;
Layer.WINDOW_LAYER.mouseEnabled = false;
Laya.stage.addChild(Layer.WINDOW_LAYER);
//初始化动画层
Layer.TOP_LAYER = new laya.ui.Component();
Layer.TOP_LAYER.width = Laya.stage.width;
Layer.TOP_LAYER.height = Laya.stage.height;
Layer.TOP_LAYER.mouseEnabled = false;
Laya.stage.addChild(Layer.TOP_LAYER);
}
}
分类
根据组件自身的结构和功能,可以将laya.ui
包下的组件分为三大类,分别是基础组件、容器组件、视图组件。
基础组件
基础组件是页面编辑中最常用的组件,通过资源管理器或组件库拖拽至场景编辑器中进行可视化操作,可以在属性设置器重设置属性值,然后在场景编辑器中直接查看显示效果。
基础组件包括:
Label
TextInput
TextArea
Button
Image
CheckBox
Radio
Clip
ProgressBar
Slider
HSlider
VSlider
ScrollBar
HScrollBar
VScrollBar
ComboBox
容器组件
容器组件是由一个或多个基础组件通过转化为容器的方式而来,在LayaAir IDE中可以通过Ctrl+B快捷键将一个基础组件转换为容器组件。
容器组件包括
Box
List
Tab
RadioGroup
ViewStack
Panel
HBox
VBox
Tree
Sprite
视图组件
视图组件是页面级显示对象容器,在LayaAir IDE的UI系统中,页面是用来承载显示所有组件的。
视图组件包括
View
Dialog