Android 程式開發（三）

           Android 程式開發（三）

上一篇 Android程式開發（二）介紹了Android的UI Components。接下來將會以開發一個BMI程式為例子進行講解。在開始寫BMI程式之前，應該先設計interface。

介面設計

我們從Form Widgets當中選擇兩個TextView，兩個Large Text和一個Button。再來從Text Fields當中選擇兩個 Number (Decimal)。然後將這些UI Components擺放在自己喜歡的地方。TextView是用來顯示文字，Large Text是用來顯示結果，Button是用來計算BMI，Number(Decimal) 則是讓使用者輸入。

然後點擊第一個Edit Text按右鍵，選擇Edit ID，會彈出一個對話框讓我們輸入識別符號，我們在對話框中輸入 『height』當作這個這個UI Component的識別符號。

除了使用 Graphical Layout的方法設定ID，當然也可以使用XML檔進行編輯。現在我們將切換到 『activity_main.xml』將會看到以下的片段。

<TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="身高 (cm)" />

『android:text』是用來顯示文字，而『android:id』和給UI Components的識別符號，每一個介面元件都要有一個ID，主要的用處是為了讓程式可以找到相關的UI Components。以下是完整的activity_main.xml的描述

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.bmi.MainActivity$PlaceholderFragment" />

<EditText
        android:id="@+id/weight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:ems="10"
        android:inputType="numberDecimal" >
    </EditText>

    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/weight"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="26dp"
        android:text="計算 BMI 值" />

    <TextView
        android:id="@+id/suggest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/result"
        android:layout_below="@+id/result"
        android:layout_marginTop="14dp"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/submit"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="19dp"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/height"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:ems="10"
        android:inputType="numberDecimal" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="身高 (cm)" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/textView2"
        android:layout_below="@+id/height"
        android:text="體重 (kg)" />

</RelativeLayout>

將字串抽離XML介面描述檔

為了更好的維護介面，我們可以將『activity_main.xml』檔中的字串抽離。我們可以在 『res』->『values』->『string.xml』中定義我們所需要的字串如下。

    <string name="app_name">BMI</string>
    <string name="hello_world">Hello world!</string>
    <string name="bmi_height">身高 (cm)</string>
    <string name="bmi_weight">體重 (kg)</string>
    <string name="bmi_btn">計算  BMI 值</string>
    <string name="bmi_result">你的BMI值是 </string>
    <!-- advise -->
    <string name="advice_light">你該多吃點</string>
    <string name="advice_average">體型很棒</string>
    <string name="advice_heavy">你該節食</string>
    <!-- other -->
    <string name="action_settings">Settings</string>

定義完成後，要使用所定義的文字我們要使用"@string/"。可以在『Graphical Layout』中選擇『身高(cm)』然後按F2後輸入 @string/bmi_height 。有沒有注意畫面的感嘆號已經消失了。其他在介面所顯示的文字採用一樣的方法進行更換。