建立簡單的使用者介面

Android Studio - 建立簡單的使用者介面
原文詳 https://developer.android.com/training/basics/firstapp/building-ui.html

建立 Linear Layout (線性布局)

線性布局(Linear Layout)有水平(horizontal) 和垂直(vertical)兩種型式。


1. 在 Android Studio 裏切換到 res/layout 路徑，開啟 activity_main.xml 檔案。
2. 在 預覽面板(Preview)裏，點按  關閉預覽。
3. 刪除 <TextView> 元素。
4. 將 <RelativeLayout> 變更為 <LinearLayout>。
5. 加入 android:orientation 屬性將畫面設置為水平。
6. 移除 android:padding 屬性並加入 tools:context 屬性。
res/layout/activity_mail.xml 內容看起來應如下：

<LinearLayout 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:orientation="horizontal">

</LinearLayout>


加入文字欄位

1. 在 activity_main.xml 檔案的 <LinearLayout> 裏面定義一個 <Edittext> 元素，並將
它的 ID 屬性設為 @ + ID / edit_message 。
2. 將 layout:width 和 layout_height 屬性的值設為 warp_content。
3. 將 hint 的屬性值設為 edit_message 的 string 物件。
<EditText>元素內容看起來應如下：

<EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

你應該可以注意到有紅色的文字出現，這表示該行有錯誤。
底下我們要來修訂這個錯誤。


加入 String 資源

預設情況下，專案包含有一個 res/values/string.xml 資源，我們將會在這兒增加一個 "edit_message" 的項目，並將它的值設為 "Edit a message"。

1. 在 res/values 路徑下開啟 strings.xml。
2. 加入 "edit_message" 這一行，並將它的值設為 "Edit a message"。
3. 加入 "button_send" 這一行，並將它的值設為 "Send"。這個東西是作為我們下一階段給按鈕元件使用的。
4. 移除 "hello world" 文字。
strings.xml 內容看起來應如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My Application1</string>
    <string name="action_settings">Settings</string>
    <string name="edit_message">Edit a message</string>
    <string name="button_send">Send</string>
</resources>


加入一個按鈕

1. 在 res/layout 路徑下編輯 activity_main.xml。
2. 在 <LinearLayout> 內部的 <EditText> 下方加入一個按鈕元素 <Button>。
3. 設定按鈕的 "width" 和 "height" 屬性值為 "warp_content"。
4. 將按鈕的文字標籤屬性 :androis:text 設為 string 資源裏的 "button_send"。
activity_main.xml 內容看起來應如下：

<LinearLayout 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:orientation="horizontal">

    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

注意： 這個按鈕並不需要一個 android:id 屬性，因為它不會被其他介面所參考。

目前這個佈局包刮了一個 EditText 元件和 Button 元件，如下所示：

目前雖然這個按鈕可以正常運作，但由於使用者可能在會在輸入盒(EditText)裏鍵入過長的文字，所以我們可以透過指定這個元件的 weight (權重)，來重新分配 "EditText" 和 "Button" 所佔用的比例。

所有工具元件權重的預設值都是 0，如果你指定大於 0 的值，你就可以看到元件佔據該空間的比例。


讓輸入盒(EditText)充滿螢幕寬度

1. 將 <EditText> 的 "layout_weight" 屬性設為 1。
2. 同時將 <EditText> 的 "layout_width" 屬性設為 0dp。
activity_main.xml 內容看起來應如下：

....
<EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message"/>
....

切換到 Display 頁籤，你可以看到目前這個佈局外觀變更了，如下所示：

所以， activity_main.xml 最終內容看起來應如下：

<LinearLayout 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:orientation="horizontal">

    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>


執行這個 APP

點按  這個工具列按鈕，執行我們上面所建立的 APP。


在下一個階段，我會告訴您如何回應按鈕的動作，去取得使用者輸入的內容，並開啟另一個活動(Activity)，詳 http://pizgchen.blogspot.tw/2014/12/activity.html。