第七讲：用户界面 View（三）

第七讲：用户界面 View（三）

12 Jul

本讲内容：
常见布局介绍：表格布局TableLayout

点此下载：Android学习指南第七讲源代码

5、表格布局 TableLayout

表格布局TableLayout以行列的形式管理子元素，每一行是一个TableRow布局对象，当然也可以是普通的View对象，TableRow离每放一个元素就是一列，总列数由列数最多的那一行决定。

我们看一个例子：

<?xml version=”1.0″ encoding=”utf-8″?>
<TableLayout android:id=”@+id/TableLayout01″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”
android:stretchColumns=”0″ xmlns:android=”http://schemas.android.com/apk/res/android”>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:text=”色彩透明度测试” android:textSize=”18dip”
android:layout_span=”2″ 合并两列
android:layout_gravity=”center”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>

</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#ff00ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#ff00ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#ee00ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#ee00ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#dd00ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#dd00ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#cc00ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#cc00ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#bb00ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#bb00ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#aa00ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#aa00ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#9900ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#9900ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#8800ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#8800ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#7700ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#7700ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#6600ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#6600ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#5500ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#5500ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#4400ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#4400ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#3300ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#3300ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#2200ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#2200ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#1100ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#1100ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TableRow android:layout_width=”fill_parent”
android:layout_height=”20dip”>
<TextView android:background=”#0000ff00″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
<TextView android:text=”#0000ff00″ android:background=”#000″
android:textSize=”20dip” android:textColor=”#fff”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”>
</TextView>
</TableRow>

<TextView android:text=”色彩透明度测试” android:textSize=”18dip”
android:gravity=”center_horizontal” android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>
</TextView>  可以看到这个TextView可以作为TableLayout的一行
</TableLayout>

再看一下显示效果：

其中 android:stretchColumns=”0″ 作用是让第一列可以扩展到所有可用空间；下面我们讲一下TableLayout几个重要的属性：

collapseColumns – 设置隐藏那些列，列ID从0开始，多个列的话用”,”分隔
stretchColumns – 设置自动伸展那些列，列ID从0开始，多个列的话用”,”分隔
shrinkColumns -设置自动收缩那些列，列ID从0开始，多个列的话用”,”分隔

可以用”*”来表示所有列，同一列可以同时设置为shrinkable和stretchable。

我们再举一个例子来看一下：

<?xml version=”1.0″ encoding=”utf-8″?>
<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:stretchColumns=”1″>   第二列自动伸展

<TableRow>
<TextView
android:layout_column=”1″     我是第二列
android:text=”打开…”
android:padding=”3dip” /> 元素内容与边界之间保留3dip的距离
<TextView
android:text=”Ctrl-O”
android:gravity=”right”
android:padding=”3dip” />
</TableRow>

<TableRow>
<TextView
android:layout_column=”1″
android:text=”保存…”
android:padding=”3dip” />
<TextView
android:text=”Ctrl-S”
android:gravity=”right” 元素本身的内容向右对齐
android:padding=”3dip” />
</TableRow>

<TableRow>
<TextView
android:layout_column=”1″
android:text=”另存为…”
android:padding=”3dip” />
<TextView
android:text=”Ctrl-Shift-S”
android:gravity=”right”
android:padding=”3dip” />
</TableRow>

<View
android:layout_height=”2dip”
android:background=”#FF909090″ />

<TableRow>
<TextView
android:text=”X”
android:padding=”3dip” />
<TextView
android:text=”导入…”
android:padding=”3dip” />
</TableRow>

<TableRow>
<TextView
android:text=”X”
android:padding=”3dip” />
<TextView
android:text=”导出…”
android:padding=”3dip” />
<TextView
android:text=”Ctrl-E”
android:gravity=”right”
android:padding=”3dip” />
</TableRow>

<View
android:layout_height=”2dip”
android:background=”#FF909090″ />

<TableRow>
<TextView
android:layout_column=”1″
android:text=”退出”
android:padding=”3dip” />
</TableRow>
</TableLayout>

下面是显示效果：

我加粗显示的地方都有解释，大家可以留意一下。

Tip：TableRow也是一个Layout，里面的元素会水平排列，如果TableRow的父元素不是TableLayout的话，那么他会表现的像一个LinearLayout。

接下来会讲2个比较复杂的布局，然后讲一些常用的View Widget。

原文地址:http://android.yaohuiji.com/archives/275