[筆記] Android 頁面 layout 的基本設計
前陣子在開發安卓系統的 SIP 撥號功能 (參考 " SIP Voip 在 Android 系統上的開發 " 一文)，底層 NDK 設計與編譯大致完成，接下來要設計使用者頁面。首先，必須在腦海中約略規劃一個使用者頁面的雛形，再根據這個雛形設計一個符合 Android 系統的 layout。我們可以思考整個頁面該如何的布局，是垂直型排列或者水平的排列？還是類似表格式的布局？ 就布局而言，安卓系統的 Layout 分成三大類型，分別是 LinearLayout 、 RelativeLayout 和 TableLayout 。LinearLayout 顧名思義就是內部 Widget 元件必須是直線布局，直線的排列可分為垂直或水平 (這裡可沒有斜線喔！)。RelativeLayout 是指內部的元件屬於不規則型的布局方式，每個元件彼此間靠著相對位置來排列。TableLayout 是指元件排列方式屬於表格類型，由幾行幾列所組成。 使用者頁面可以由上述三種類型混合搭配設計而成，每個大 layout 裡面又可以由小的 layout 組成，類似一種巢狀的架構。用例子說明更容易明白，圖一的左邊所示是一個撥號頁面的使用者介面，圖一的右邊所示則為頁面的布局概念圖。這個 APP 頁面布局是由一個具有垂直排列的大型 LinearLayout 構成，裡面再包含四個小型 layout。由於是垂直排列，所以裡面這四個子 layout 從上到下依序排列。第一個子布局是具有水平排列的 LinearLayout，因此裡面的 Widget 元件由左到右排列。接著底下的子布局有四個方向鍵和兩個按鈕，因為不具有垂直或水平排列的特質，只能用 RelativeLayout 來規劃這六個按鈕的相關位置。撥號盤的排列像是表格 4 x 4 的布局，所以這裡用 TableLayout 很適合。最底下四個按鈕呈現水平排列則使用 LinearLayout 布局。 圖一：撥號頁面的 layout 安卓系統的使用者頁面以 xml 檔案語法來描述，在 IDE 打開 xml 檔案後，我們可以看到模擬的頁面與 xml 語法，修改 xml 後能立刻看到模擬頁面的呈現。從圖二所示可以看出布局結構的情況，包含裡面的元件