移動開發|淺談list列表佈局控件

在iMAG開發app中界面佈局很重要，怎樣佈局美觀和流暢取決於list列表控件。

列表控件由list標籤->item標籤->col標籤->row標籤依次組成（佈局是不一定都用上）。

列表類型：list有plain, group, transparent, toolbar四種類型。
其中plain是默認的扁平風格的列表，group是分組列表。transparent是透明風格的列表，plain和group類型的列表都有默認的邊線和背景，而transparent則是把這些邊線和背景去掉了的，這樣可以在transparent類型的列表上設置新的背景。toolbar類型的列表主要用於定製工具欄，toolbar類型的列表也是透明的，toolbar和transparent的區別是transparent列表內部有默認的邊距，而toobar列表則把item裏默認的margin和padding也去掉了。

扁平列表(代碼及效果圖)

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
       <title>
            <center>
                <label>扁平列表</label>
            </center>
        </title>
        <content draggable="true">
            <list>
                <item>
                    <label>新的好友</label>
                </item>
                <item>
                    <label>我的微博</label>
                </item>
                <item>
                    <label>我的相冊</label>
                </item>
            </list>
        </content>
    </page>
</imag>

分組列表(代碼及效果圖)

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
       <title>
            <center>
                <label>分組列表</label>
            </center>
        </title>
        <content draggable="true">
            <list type="group">
                <item>
                    <label>新的好友</label>
                </item>
            </list>
            <list type="group">
                <item>
                    <label>我的微博</label>
                </item>
                <item>
                    <label>我的相冊</label>
                </item>
            </list>
        </content>
    </page>
</imag></span>

列表佈局（代碼及效果圖）

<span style="font-size:14px;"><list type="group" accessory="indicator">
    <item accessory="indicator">
        <label>標題</label>
        <label style="color:gray">副標題</label>
    </item>
    <item accessory="indicator">
        <row>
            <label>標題</label>
            <label style="color:gray">副標題</label>
        </row>
    </item>
    <item accessory="indicator">
        <col>
            <row>
                <label>標題</label>
                <label style="color:gray">副標題</label>
            </row>
        </col>
    </item>
    <item accessory="indicator">
        <col>
            <label>標題</label>
            <label style="color:gray">副標題</label>
        </col>
    </item>
    <item accessory="indicator">
        <col>
            <row>
                <label>標題</label>
                <label style="color:gray">副標題</label>
            </row>
        </col>
        <col>
            <label style="color:blue;font-size:14">2012-05-01</label>
        </col>
    </item>
    <item accessory="indicator">
        <col>
            <row>
                <label>標題</label>
            </row>
            <row>
                <label style="color:gray">副標題</label>
            </row>
        </col>
        <col>
            <label style="color:blue;font-size:14">2012-05-01</label>
        </col>
    </item>
    <item accessory="indicator" style="col-width:*,100;">
        <col>
            <row>
                <label>標題</label>
            </row>
            <row>
                <label style="color:gray">副標題</label>
            </row>
        </col>
        <col>
            <row>
                <label style="color:blue;align:right;font-size:14">2012-05-01</label>
           </row>
        </col>
    </item>
    <item accessory="indicator" style="col-width:*,100; col-valign:top,top">
        <col>
            <row>
                <label>標題</label>
            </row>
            <row>
                <label style="color:gray;">副標題</label>
            </row>
        </col>
        <col>
            <row>
                <label style="color:blue;align:right;font-size:14">2012-05-01</label>
           </row>
        </col>
    </item>
</list></span>

list控件的詳細介紹