Ⓔeui.Group 用法

Group 是自動佈局的容器基類（父類）, 其子類包含如下：

• eui.DataGroup
• eui.List
• eui.TabBar
• eui.UILayer
• eui.ViewStack

都有四種佈局方式, 請看示意圖, 由上而下為 BasicLayout 絕對位置排版, HorizontalLayout 水平排版, VerticalLayout 垂直排版, TileLayout 磚排版

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group>
        <!-- BasicLayout -->
        <e:Group>
            <e:Rect fillColor="0xFF0000" width="100" height="100" />
            <e:Rect fillColor="0x00FF00" width="75" height="75" />
            <e:Rect fillColor="0x0000FF" width="50" height="50" />
            <e:layout>
                <e:BasicLayout/>
            </e:layout>
        </e:Group>
        <!-- HorizontalLayout -->
        <e:Group>
            <e:Rect fillColor="0xFF0000" width="100" height="100" />
            <e:Rect fillColor="0x00FF00" width="75" height="75" />
            <e:Rect fillColor="0x0000FF" width="50" height="50" />
            <e:layout>
                <e:HorizontalLayout gap="0" />
            </e:layout>
        </e:Group>
        <!-- VerticalLayout -->
        <e:Group>
            <e:Rect fillColor="0xFF0000" width="100" height="100" />
            <e:Rect fillColor="0x00FF00" width="75" height="75" />
            <e:Rect fillColor="0x0000FF" width="50" height="50" />
            <e:layout>
                <e:VerticalLayout gap="0" />
            </e:layout>
        </e:Group>
        <!-- TileLayout -->
        <e:Group>
            <e:Rect fillColor="0xFF0000" width="100" height="100" />
            <e:Rect fillColor="0x00FF00" width="100" height="100" />
            <e:Rect fillColor="0x0000FF" width="100" height="100" />
            <e:layout>
                <!-- requestedColumnCount=2 表示水平只能放2個 -->
                <e:TileLayout horizontalGap="0" verticalGap="0" requestedColumnCount="2" />
            </e:layout>
        </e:Group>
        <e:layout>
            <e:VerticalLayout gap="10" />
        </e:layout>
    </e:Group>
</e:Skin>