在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控件的详细介绍