默认属性的设置:

控件资源双击,进行编辑默认属性。以使用时设置的属性为生效属性。



Image

        属性->常用->sizeGrid:可以设置拉伸范围。

ClipImage

        clipX/clipY:设置图片 x/y 轴的切片数

        index:显示第几个切片位置

tab

        每个tab 项不能设置大小,字体颜色等,需要要自定义 Button 转为 tab。

        可以使用更大号的图片资源,来显示为更大。

自定义 Tab

        tab 子级的命名规则:name 为 item0, item1, item2,...不然不生效。

容器转换

        快捷键:ctrl + b

        相当于在控件外部加了容器,可以通过容器加点的方式访问容器内不的控件。例如:

        将两个 Label 选中转为容器 Box,它们的属性设置为:Box(var: box),Label (name: label1),Label (name: label2)。

        box.label1.text = "label1";

        box.label2.text = "label2";

        其中 var 为全局属性,而 name 为.属性。

转换为 List

        将选定的控件转为 Box,Box 再转为 List,Box 的 name 属性需要设置为 render。

常用->repeatX/repeatY:设置 List  的行数和列数,可以在 ui 编辑界面看到效果。需设置足够的高宽,拖动高宽也可。

常用->vScrollBarSkin/hScrollBarSkin:设置滑动条皮肤,可以将资源中的 vscroll.png 拖进属性框,手动输入均可。

横竖滚动条的设置,只有一个方向有效,不能同时设置两个方向。

代码内对 List 的操作:

        例子:List (var: list)  的单元为 Box(包含一个CheckBox<name: cName> 和一个 Label<name: flag>)

        TS 语言:

class testListView extends ui.TestListUI {
    selectIndex: number;
    constructor() {	//继承界面类
        super();	//不能少的
       
        var dataSource: Array<any> = [];
        for (let i: any = 0; i < 100; ++i) {
            var _data = {
                cName: { label: "选项" + i, selected: false },
                flag: { text: "", color: "#000000" }
            }
            dataSource.push(_data);
        }
        this.list.array = dataSource;
	//设置默认选中项
        this.selectIndex = 0;
        //监听列表 
        this.list.selectEnable = true; 
        this.list.selectHandler = Laya.Handler.create(this, this.onSelect, null,false);
    } 
    onSelect(index: number): void { 
        if (this.selectIndex !== index) { 
            if (this.selectIndex !== -1) { 
                //值设置需要设置的属性就行了 
                var _datax = { serverName: { selected: false } } 
                this.list.setItem(this.selectIndex, _datax); 
             }                          } 
             var _data = { serverName: { selected: true } } 
             this.list.setItem(index, _data); this.selectIndex = index; 
        }
    }
}

对齐功能:

        对齐有三类:

        控件内部对齐:align 属性,如 Label 的文字对齐 

        界面对齐:顶部工具条上的最后两个

        控件间对齐:顶部工具条上的中间有两个

        需要更改 text 的 Label 的界面对齐:需要将 Label 的宽度设置的足够大已容纳需要显示测最大的字数,然后设置 align,界面居中。

dialog 类型的界面:

        模式显示:this.dl.popup(true); //会自动居中,并蒙版下层不让点击

非模式显示:this.dl.show(); //自动居中

        自带的关闭方法:this.close;

运行时逻辑类:runtime

        控件可设置属性 runtime,用于处理一些控件的内部逻辑。

        列如:将 TextIput 的 runtime 属性设置为:TextInputEx,TextInputEx 实现如下:

class TextInputEx extends Laya.TextInput {
    initText: string;
    initColor: string;
    constructor() {
        super();
        this.on(Laya.Event.FOCUS, this, this.onfocus);
        this.on(Laya.Event.BLUR, this, this.onblur);
    }
    //获取焦点
    onfocus(): void {
        if(!this.initText) {
            this.initText = this.textField.text
            this.initColor = this.textField.color;
        }
        if(this.textField.text == this.initText) {
            this.textField.text = "";
            this.textField.color = "#000000";
            this.textField.italic = false;
            
        }
    }
    //是去焦点
    onblur(): void {
        if(this.textField.text == "") {
            this.textField.text = this.initText;
        }
        if(this.textField.text == this.initText) {
            this.textField.color = this.initColor;
            this.textField.italic = true;
        }        
    }
    //还有种写法是查询文档,看该部件的响应事件进行重写
    //由于版本的迭代,该信号可能改变
    //如 onfocus() 和 onblur() 是之前版本的的信号,现在改为了 _onfocus() 和 _onblur()
    //若此处使用 _onfocus() 和 _onblur() 可不写下面两句:
    // this.on(Laya.Event.FOCUS, this, this.onfocus);
    // this.on(Laya.Event.BLUR, this, this.onblur);
}


Sprite 加载骨骼动画,不显示——重启IDE。

Sprite 用Laya.TiledMap 加载 地图后会挡住后绘制的对象,用Laya.stage.addChild 添加可以显示出来。

注:在 index.html 中需要将 新生成类的 js 声明放在 <script src="js/ui/layaUI.max.all.js"></script> 后面,否则可能报错 undefined。

代码编辑:ctrl + alt + f  格式化代码

       

        this.selectIndex = 0;
        
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐