L2: UI 設計

Android Studio 中UI的設計與Visual Studio系列的用法不同，如果直接像在Visual Studio中一樣拖拉，光對齊就會讓人火冒三丈，因此下方用一個簡單的範例來介紹，這個範例也可以用來做下一課的界面。假設要設計下面的界面，應該如何進行?

1. Android Studio 提供不同界面排版的方式，在此例中將以 LinearLayout來製作。在產生新專案時，內定為RelativeLayout，因此先點開 app / res / layout / activity_main.xml，找到第一行:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

將 RelativeLayout 改成 LinearLayout。

2. LinearLayout 將畫面視為縱向(Vertical)與橫向(Horizontal)兩種，在此我們將畫面視為4個橫列(Horizontal)由上而下排列(Vertical)，如下圖:

所以在component Tree中點選LinearLayout，然後在Properties中將其 orientation選為Vertical.

3. 原專案中就有的 TextView可以先將其刪除。接下來在Palette中拉出4個LinearLayout(Horizontal)，然後在Component Tree中選取這四個LinearLayout，在Properties中將Layout:height 輸入要的高度，例如 100dp

4. 從 Pallete中Widgets拉出一個Plain TextView及Text Fields裡的Number到第一橫列，同樣也拉一個Plain TextView及Number到第二橫列，一個Widgets中的Button到第三橫列，最後兩個Plain TextView到第四橫列。

5. 設定字串常數，詳細操作請看前一課介紹。

<string name="height">身高</string>
<string name="weight">體重</string>
<string name="bmi">BMI</string>
<string name="calculate">計算</string>

6. 點選第一個textView，並更改其text屬性為@string/height (按旁邊的 ... 按鈕，就可列出所有可用資源，string中定義的大概都在最下面，點選就ok，不用自己輸入)，textSize 為 24dp，再將第一個editText的textSize屬性也設定為24dp，textColor 設定為喜歡的顏色。最後點選第一橫列 LinearLayout(horizontal)，設定 gravity為center_vertical。依此動作設定各元件屬性，就可完工囉。