第七講：用戶界面 View（三）

五、表格佈局 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。