Laya ui 控件
默认属性的设置:控件资源双击,进行编辑默认属性。以使用时设置的属性为生效属性。Image 属性->常用->sizeGrid:可以设置拉伸范围。ClipImage clipX/clipY:设置图片 x/y 轴的切片数 index:显示第几个切片位置容器转换 快捷键:ctrl + b
默认属性的设置:
控件资源双击,进行编辑默认属性。以使用时设置的属性为生效属性。
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;
更多推荐
所有评论(0)