Android 頁面 layout 的基本設計

        前陣子在開發安卓系統的 SIP 撥號功能 (參考 "SIP Voip 在 Android 系統上的開發" 一文),底層 NDK 設計與編譯大致完成,接下來要設計使用者頁面。首先,必須在腦海中約略規劃一個使用者頁面的雛形,再根據這個雛形設計一個符合 Android 系統的 layout。我們可以思考整個頁面該如何的布局,是垂直型排列或者水平的排列?還是類似表格式的布局?

        就布局而言,安卓系統的 Layout 分成三大類型,分別是 LinearLayoutRelativeLayout 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 後能立刻看到模擬頁面的呈現。從圖二所示可以看出布局結構的情況,包含裡面的元件排列。頁面布局規劃完成後,接下來困擾工程師的部分是每個 Widget 元件的美工圖案,元件所連結的圖案需要特殊繪製,得靠美工人員提供這些圖案。

圖二:頁面XML設計的架構圖

這個網誌中的熱門文章

Android APP 藍芽範例說明 -- BluetoothChat

Android APP BLE範例程式 -- BluetoothLeGatt

三軸重力加速計 Accelerometer