Laya ui 控件

默认属性的设置：

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

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;