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;