Laya Component

组件 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设计的精简巧妙,核心显示类只有一个SpriteSprite会针对不同情况做渲染优化,所以保证一个类实现丰富功能的同时又能达到较高性能。

Sprite是基本的显示图形的显示列表节点,默认没有宽高且不接受鼠标事件。

Sprite默认没有宽高,但可通过getBounds()函数获取,也可以手工设置宽高。可以通过设置autoSize = true后再获取宽高。Sprite的宽高一般用于进行碰撞检测和排版,并不影响显示图像大小,如果需要更改显示图像的大小,可以通过scalescaleXscaleY缩放来实现。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容

  • 在线文档 http://layaair.ldc.layabox.com/api/ 在线案例 http://laya...
    JunChow520阅读 4,167评论 0 3
  • 苹果去年发布了GameplayKit的代码框架,为游戏开发者提供了很多超级实用的API及工具,来提升游戏开发者的效...
    小武的技术渔场阅读 2,525评论 0 2
  • 看着标题像是鸡汤文,事实上接下来我要是说的只是我的一段经历和记忆。这段经历就发生在今年的10月11号左右,具体日...
    52hz的黑豆豆阅读 187评论 0 1
  • 今天是母亲节,虽然是西方人的节日但作为体现子女孝顺又何不拿来主义一把。离母亲近的可回家一次,分开两地可打电话问候一...
    艾冰台阅读 268评论 0 2
  • 白露泛, 秋水寒, 牧童添衣雁归南。 秋蝉再难欢。 秋意绵, 斜阳暖, 天高云淡云舒卷。 光阴亦烂漫。
    清宇飞鸽阅读 1,825评论 37 54