81 lines
3.3 KiB
Markdown
81 lines
3.3 KiB
Markdown
Egret eui库内置的4个布局类基本上可以满足大部分需求，不过在一些特殊情况下，可能会需要一些特殊的布局方式。此时可以制作自定义布局类，代替默认的布局类。
|
||
|
||
新建一个MyLayout.ts，扩展自 eui.LayoutBase:
|
||
~~~ typescript
|
||
module uilayout {
|
||
|
||
var UIComponentClass = "eui.UIComponent";
|
||
|
||
/**自定义的环形布局类*/
|
||
export class RingLayout extends eui.LayoutBase{
|
||
public constructor(){
|
||
super();
|
||
}
|
||
/**
|
||
* 计算target的尺寸
|
||
* 因为环形布局，依赖容器尺寸来定义半径，所以需要容器显式的设置width和height,在这种情况下measure方法将失去作用
|
||
* 所以在这个例子里面，不需要重写measure方法
|
||
* 如果您的自定义布局需要根据内部子项计算尺寸，请重写这个方法
|
||
**/
|
||
public measure():void{
|
||
super.measure();
|
||
}
|
||
/**
|
||
* 重写显示列表更新
|
||
*/
|
||
public updateDisplayList(unscaledWidth:number, unscaledHeight:number):void{
|
||
super.updateDisplayList(unscaledWidth, unscaledHeight);
|
||
if (this.target==null)
|
||
return;
|
||
var centerX:number = unscaledWidth/2;// 获得容器中心的X坐标
|
||
var centerY:number = unscaledHeight/2;// 获得容器中心的Y坐标
|
||
var horizon:number = centerX/2;// 获得水平可用长度的一半
|
||
var vertical:number = centerY/2;// 获得垂直可用长度的一半
|
||
var radius = horizon > vertical ? vertical : horizon;// 取小的为圆形半径
|
||
var count:number = this.target.numElements;
|
||
var maxX:number = 0;
|
||
var maxY:number = 0;
|
||
for (var i:number = 0; i < count; i++){
|
||
|
||
var layoutElement:eui.UIComponent = <eui.UIComponent> ( this.target.getElementAt(i) );
|
||
if ( !egret.is(layoutElement,UIComponentClass) || !layoutElement.includeInLayout ) {
|
||
continue;
|
||
}
|
||
|
||
var elementWidth:number = 0;
|
||
var elementHeight:number = 0;
|
||
var angle:number = 2 * Math.PI * i / count;// 获得角度的大小
|
||
var childX:number = centerX + radius * Math.sin(angle) - elementWidth/2;// 获得圆周点的X坐标
|
||
var childY:number = centerY - radius * Math.cos(angle) - elementHeight/2;// 获得圆周点的Y坐标
|
||
layoutElement.setLayoutBoundsPosition(childX, childY);
|
||
maxX = Math.max(maxX,childX+elementWidth);
|
||
maxY = Math.max(maxY,childY+elementHeight);
|
||
}
|
||
this.target.setContentSize(maxX,maxY);
|
||
}
|
||
}
|
||
}
|
||
~~~
|
||
|
||
然后修改前几节中的例子，改为使用自定义布局类(通过设置group.layout属性)：
|
||
|
||
> 基本代码可以参考前面几节。下面是修改其中的myGroup为自定义布局。
|
||
|
||
~~~ typescript
|
||
this.myGroup.horizontalCenter = 0;
|
||
this.myGroup.layout = new uilayout.RingLayout();//自定义布局
|
||
this.addChild( this.myGroup );
|
||
//内部对象
|
||
for(var i:number=0;i<20;i++) {
|
||
var btn:eui.Button = new eui.Button();
|
||
btn.width = 40;
|
||
btn.height = 40;
|
||
btn.label = "Button"+i;
|
||
this.myGroup.addChild( btn );
|
||
}
|
||
~~~
|
||
|
||
运行生成效果：
|
||
|
||
|