欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

移动开发|浅谈list列表布局控件

程序员文章站 2022-07-13 16:36:26
...

在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>

移动开发|浅谈list列表布局控件

分组列表(代码及效果图)

<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>

移动开发|浅谈list列表布局控件

 

列表布局(代码及效果图)

<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列表布局控件


list控件的详细介绍

 

 

相关标签: 移动开发