Android 的排版學習 (二) - TableLayout

延續上一篇，把主要的區塊定義好。接下來就是一些功能按鈕，文字內容的置入。目標結長這個樣子…

因此將版型 XML 調成這個樣子…

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#333333"
    >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Home /"
        />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="Application Title..."
        android:layout_weight="1"
        />
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <TableRow>
            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Button"
                />
            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Button"
                />
        </TableRow>
        <TableRow>
            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Button"
                />
            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Button"
                />
        </TableRow>
    </TableLayout>
</LinearLayout>

結果畫面是…

很顯然按鈕的排列和預想的不太一樣，雖然我已經把所有按鈕的 layout_width 設定為 fill_parent，但是實際上它們並沒有「填滿畫面」。這和以往操作製作網頁的經驗不同，因而只好回頭去查資料，看到在範例裡使用了一個叫「stretchColumns」的屬性。在範例中看起來滿足了我的要求。轉連圖片如下(取自Android Developoer 的網頁)︰

其中 stretchColumns = 1，當時就猜想，也許有不同種延展(stretch)方式，或是由第 1 個欄位後的都要作延展，滿懷希望的把屬性加到 TableLayout 的設定中，像下面這樣…

<TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1"
        >

結果變成只有第二個按鈕有延展…

被範例的圖片騙到了。後來經過多次測試後，包含把 stretchColumns 的值設為 0, true, false 統統沒有用。才死心跑去查 API 文件，這才發現到，原來 stretchColumns 並不是單接受「一個數值」而是可以接收多個欄位數字。
stretchColumns 由 0 開始，所以若是設定 0 的話，會看到上圖中被延展的按鈕為第一個。若是需要讓多個元素可以被延展，可以用逗號(,)的方式區隔。以我的目標而言，就需要設定為「0, 1」，若是說不能確定一橫排的元素數量，但確定每個都要均分畫面的寬度，又或者和我一樣懶得打一堆字，可以將屬性設定為「*」，表示每一個元素都要能夠被延展。
因此，修改之後畫面就如我所預期的一樣了…