Android 的排版學習 (一) - LinearLayout

學習 Android 的過程中，讓我覺得很挫折的一點，在於我怎麼也排不出讓我滿意的畫面。雖說寫程式的人大多重視功能，而不是畫面的美觀。但是作出來的程式連自己都不想多用一會兒，那就很明顯是失敗了。

翻了一些 Android 的中文書，發現裡頭提到有關版型的篇幅很少，少到讓人無法搞懂要怎麼排出一個「能看」的畫面。所以就「憤而」轉投官方文件(英文)，才有前面幾篇 Android 的文章，在忙完論文提要口試文件之後，終於可以回頭繼續研究。
在 Java 的 Swing 裡，使用的是「版型管理員(Layout Manager)」，在建立好容器之後指定使用的版型。而 FLEX 4 也採用一樣的作法，不再區分不同容器，而使用 Group 類別取代，再去指定要使用的版型(Layout)。而在 Android 的畫面定義部分，則是使用不同的「版型容器」來指定排版的方式。利用的指定 LinearLayout 或 TableLayout …等容器，將元素放入就可以使用不同的排版方式。由於我還沒學到如何使用程式碼來控制版型，所以這部分就留到之後學會了再分享。

關於我正準備使用的介面，使用到  LinearLayout 和 TableLayout，所以我打算兩篇文章說明。

LinearLayout 是一個新的 Android 專案建立完成時的預設排版方式，如果沒有調整過設定，預設是以由上到下的排列方式，一個一個元素疊在一起，不管每個元素的寬度為何。目前我還沒有找到能在這種排版方式加入捲軸的方式，也就是說，當有元素被「擠」到畫面外時，就點選不到它了。

在我的專案裡希望能夠將主版面分成三個區域，就像是網頁的版頭、內容、版尾的排列方式。版頭和版尾的高度固定，而內容則需要讓它佔用剩下的所有高度。沒想到這看似簡單的版型，就讓我花了兩三天的時間才搞定。

程式一開始長得類似這樣子︰

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Header" />
<TextView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="content"
    />
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="footer"
    />

但是結果變成了…

footer 並沒有如我所預期的排在畫面中，和 Content 分剩下來的位置，反而是被擠到畫面外頭。一開始我以為是找錯 Layout，繞了許多遠路才發現並沒有其它更適合用來作這個版型的 Layout。研究了官方的文件，又花了許多時間在測試，才發現原來需要去設定每個元素的「重要性」，Android 才知道要怎麼去作寬高的計算。

在 LinearLayout 裡，每個元素都可以設定 layout_weight 的屬性，這是一個數字，用來表示這個元素在排版的重要性，換言之，重要性較低的元素將會被重要性高的壓縮空間或是擠到畫面外頭(就像是這個例子裡的 footer)。預設值是 0 ，經過測試在 layout_weight 等於 0 的狀態下似乎不會有重新計算的動作。

和一般的印象不同，在 layout_weight 的設定裡，數字越大表示重要性越低。在這篇文章的例子中，我想要的是確保 header 和 footer 的高度並保證它們都在畫面裡，而 Content 則只能使用它們沒用到的空間。因此， Content 的重要性較低(以排版上而言)，因此它的重要性修改成 1 ，就能夠達到目標的了。(簡單到讓我覺得很鬱悶，花了兩三天才找到)

修改程式碼，再加上背景色，就能夠更清楚的知道各區塊佔用的空間大小。

<TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Header"
    android:background="#FFFFCC"
    />
<TextView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="content"
    android:layout_weight="1"
    android:background="#FFCCFF"
    />
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="footer"
    android:background="#CCFFFF"
    />