module euiextendsion {
export class DropDwonList extends eui.Component {
//展开、收回列表的按钮
private btn: eui.Button;
//滚动的列表
private scroller: eui.Scroller;
//滚动列表上的遮罩
private spMask: egret.Shape;
//列表是否展开了
private isShow: boolean = false;
//滚动区域消失位置的 y 坐标
private posScrollerClose: number;
//list
private list:eui.List;
//提供给外部调用:获取当前list所选的值
public selectedValue:string;
//提供给外层的当前选中的项目的index值
public selectedIndex:number;
// 构造函数参数说明:
// x:下拉菜单的x坐标
// y:下拉菜单的y坐标
// skin:下拉菜单各菜单项的皮肤,皮肤高度就是各菜单项的高度 传入皮肤名字字符串
// BtnValue:按钮文字
// scrollWidth:下拉框显示的宽度
// scrollHeight:下拉框显示的高度
// ...rest:下拉菜单各项值
constructor(x:number,y:number,skin:string = "",BtnValue:string,scrollWidth:number,scrollHeight:number,...rest) {
super();
//创建滚动区域和列表
var arr = [];
for (var i = 0; i < rest.length; i++) {
arr.push(rest);
}
this.list = new eui.List();
this.list.width = scrollWidth;
this.list.itemRendererSkinName = skin; //ButtonSkin
this.list.dataProvider = new eui.ArrayCollection(arr);
var scroller = new eui.Scroller();
scroller.height = scrollHeight;
scroller.width = scrollWidth;
scroller.viewport = this.list;
this.addChild(scroller);
// scroller.verticalScrollBar.autoVisibility = false;
// scroller.verticalScrollBar.visible = true;
// this.scroller.autoHideScrollBars = false;
// scroller.horizontalScrollBar
//列表上面的遮罩
var spMask = new egret.Shape();
spMask.graphics.beginFill(0x000000);
spMask.graphics.drawRect(0, 0, scrollWidth, scrollHeight);
spMask.graphics.endFill();
this.addChild(spMask);
scroller.mask = spMask;
var btn = new eui.Button();
btn.label = BtnValue;
btn.width = scrollWidth;
btn.height = 35;
this.addChild(btn);
this.btn = btn;
this.scroller = scroller;
this.spMask = spMask;
this.x = x;
this.y = y;
this.list.addEventListener(eui.ItemTapEvent.ITEM_TAP,this.onClickList,this);
}
protected createChildren() {
super.createChildren();
this.spMask.y = this.btn.height;
//设置消失点坐标
this.posScrollerClose = this.scroller.y = -this.scroller.height;
this.btn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.changeListType, this);
}
private changeListType(): void {
if (!this.isShow) {
egret.Tween.get(this.scroller).to({y:this.btn.height}, 300);
this.isShow = true;
} else {
egret.Tween.get(this.scroller).to({y:this.posScrollerClose}, 300);
this.isShow = false;
}
}
public onClickList(evt:eui.UIEvent) : void
{
// console.log(this.list.selectedItem,this.list.selectedIndex)
this.selectedValue = this.btn.label = this.list.selectedItem;
if (!this.isShow) {
egret.Tween.get(this.scroller).to({y:this.btn.height}, 300);
this.isShow = true;
} else {
egret.Tween.get(this.scroller).to({y:this.posScrollerClose}, 300);
this.isShow = false;
}
this.selectedIndex = this.list.selectedIndex; // this.selectedIndex 暴露给外部调用以获取当前选择的菜单项目序号。
}
}
}
1、所有的容器全部继承自 DisplayObjectContainer 类,这个名称为 DisplayObjectContainer 的类又继承自 DisplayObject 。也就是说,在Egret中,所有的容器其实也继承自 DisplayObject。
在Egret中,DisplayObjectContainer 封装了一些显示列表中常用的功能。在后面的内容中,我们将详细介绍显示列表的操作。这些常用操作主要分为四类:
● 添加、删除子对象
● 访问子对象
● 检测子对象
● 设置叠放次序
在Egret中,我们还有一个其他的容器:Sprite。
如果你查看Sprite类的内容,你会发现,Sprite仅仅是继承 DisplayObjectContainer。同时添加了一个Graphics功能。
2、自定义显示对象类需要继承自 DisplayObject的具体子类,例如Shape或者TextField。
class MyGrid extends egret.Shape{
想要自定义一个容器非常容易,我们编写一个类,并且继承 DisplayObjectContainer 即可。当然,如果你想实现相关的Graphics绘图功能,你也可以继承 Sprite。
3、深度(层级)
每一个容器都会有一个自己的深度管理功能.这个深度值实际上就是一个显示对象的叠放次序。我们也称之为 “z-次序”。
Egret中容器的深度都是从0开始的,当一个显示对象第一个被添加到容器中时,它的深度值为0。这个显示对象也处于容器的最底层。当我们添加第二个显示对象的时候,他的深度值为1,并且在第一个显示对象上方。从0开始,每次深度加1
获取当前容器的子对象数量::容器.numChildren
容器内添加对象:容器.addChild( 显示对象 );
将某一个显示对象添加到一个指定深度:容器.addChildAt( 显示对象, 深度值 )
2个深度值的容器进行交换深度值:父容器.swapChildrenAt( 深度值数字1,深度值数字2 );
将一个显示对象移除显示列表:容器.removeChild( 显示对象 ) //remove方法 只是不参与渲染,但还是存在于内存中的。
删除一个指定深度的显示对象:容器.removeChildAt( 深度值 )
将当前容器内的所有子对象全部移除显示列表:容器.removeChildren();
重设显示对象的深度:容器.setChildIndex( 显示对象, 新的深度值 );
容器.parent 可以获取当前容器的父容器(父级)
4、要获取一个容器的子对象:
第一种是通过子对象的深度值来获取子对象:父容器.getChildAt( 深度值 ); 例:
let _spr:egret.DisplayObject = sprcon.getChildAt( 1 );
第二种是通过子对象的 name 属性来获取:
let _spr:egret.DisplayObject = sprcon.getChildByName( "sprite2" ); //前提是某个容器我们要设置好name属性: 容器.name = "sprite2";
对比:第一种方式性能更优,推荐。
5、文本:
Egret 提供三种不同的文本类型,不同类型具有以下特点:
普通文本:用于显示标准文本内容的文本类型。
输入文本:允许用户输入的文本类型。
位图文本:借助位图字体渲染的文本类型。
6、创建文本:
var label:egret.TextField = new egret.TextField();
label.text = "这是一个文本";
this.addChild( label );
1)egret.TextField 类包含一个 text 的属性,该属性为当前文本显示内容。
2)显示文本: egret.TextField 类继承自 egret.DisplayObject 。
displayObject.addChild( textField_Object );
3)字号:egret.TextField 类包含一个 size 的属性
还可以使用 egret.TextField.default_size 设置全局的默认文本字号大小。
PS:egret.TextField 对象自身尺寸会根据首次设置的文本内容自动计算。所以,当 text 属性被赋予不同内容时,其尺寸也会不同。
7、文本超链接事件
1)情况一:针对整个TextField的:TextField本身可以响应Touch事件
2)在一大段文字中,对部分文字超链接:
var tx:egret.TextField = new egret.TextField;
tx.textFlow = new Array<egret.ITextElement>(
{ text:"这段文字有链接", style: { "href" : "event:text event triggered" } }
,{ text:"\n这段文字没链接", style: {} }
);
tx.touchEnabled = true;
tx.addEventListener( egret.TextEvent.LINK, function( evt:egret.TextEvent ){
console.log( evt.text );
}, this );
其中 href 属性的内容以 event: 开头,后边跟随一个字符串,用于输出相应的文字或用于识别包含该链接的文字段。
然后侦听 TextEvent.LINK 事件,在事件处理函数中通过事件对象的 text 属性来获取该段文字所设置的字符串。
8、exml使用背景:
背景可以使用exml的皮肤,同级下直接使用 exml文件名不带后缀写在skinname属性内