eui-eui.LayoutBase

eui.LayoutBase 使用範例, 需要自定義佈局可以繼承 eui.LayoutBase 並重寫 updateDisplayList 方法

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
        egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig('resource/default.res.json', 'resource/');
        await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup('preload', 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        // --- Edwin 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        const grp = new eui.Group;
        grp.width = grp.height = 500;
        grp.layout = new RingLayout; // 使用環狀 layout
        this.addChild(grp);
        for (let i = 0; i < 6; i++) {
            const rect = new eui.Rect;
            rect.fillColor = 0xFF0000;
            rect.width = rect.height = 50;
            grp.addChild(rect);
        }

    }

}

// 白鷺官方 RingLayout 範例
class RingLayout extends eui.LayoutBase {

    /**
     * 重寫顯示列表更新
     */
    public updateDisplayList(unscaledWidth: number, unscaledHeight: number): void {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        if (this.target == null)
            return;

        var angleBaseRdm: number = Math.PI * 2 * Math.random(); // 增加隨機因子起始角度
        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;

        // 第一輪循環收集可佈局元素，或者說過濾不可佈局元素
        var vcElemInLayout: Array<eui.UIComponent> = new Array<eui.UIComponent>();
        for (var i: number = 0; i < count; i++) {
            var layoutElement: eui.UIComponent = <eui.UIComponent>(this.target.getElementAt(i));
            if (!egret.is(layoutElement, "eui.UIComponent") || !layoutElement.includeInLayout) {
                // 非佈局元素需要排除在佈局運算中
                console.log("非佈局", i);
            } else {
                vcElemInLayout.push(layoutElement);
            }
        }

        count = vcElemInLayout.length;
        for (var i: number = 0; i < count; i++) {
            var elementWidth: number = vcElemInLayout[i].width;
            var elementHeight: number = vcElemInLayout[i].height;
            var angle: number = angleBaseRdm + 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坐標

            vcElemInLayout[i].anchorOffsetX = vcElemInLayout[i].width / 2;
            vcElemInLayout[i].anchorOffsetY = vcElemInLayout[i].height / 2;

            vcElemInLayout[i].setLayoutBoundsPosition(childX, childY);
            maxX = Math.max(maxX, childX + elementWidth);
            maxY = Math.max(maxY, childY + elementHeight);
        }
        this.target.setContentSize(maxX, maxY);
    }

}