移动开发|浅谈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控件的详细介绍