谷歌安卓-培訓- 建立簡單的用戶界面

上一節按默認嚮導建立了一個示例程序，未做任何修改。

這一節在上一節基礎上自定義界面。

Building a Simple User Interface

安卓的圖形用戶界面使用  View 和 ViewGroup 對象建立。View 對象通常是如  buttons 或者 text fields之類的 UI 構件（widgets），而ViewGroup 是 不可見的 視圖容器，它定義了它的子視圖如何佈局，例如 grid 或者  vertical list.

安卓使用 XML 來 描述 View 和 ViewGroup 。

這一課將會創建一個擁有一個文本編輯區域和一個按鈕的佈局。

創建一個 Linear Layout 

打開 res/layout/  裏的 activity_main.xml 文件

BlankActivity 樣本項目裏的 activity_main.xml 文件 RelativeLayout 父級 View 和 一個 TextView 的子 View。

首先， 刪除 <TextView>  元素 並且 改變 <RelativeLayout> 元素爲 <LinearLayout> 

接着，增加 android：orientation 屬性 並設置 爲 “horizontal”  如下：

<?xml version="1.0" encoding="utf-8"?>
<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>

解釋：

LinearLayout 是一個 視圖組（ ViewGroup 的一個子類），它 的子視圖既可以水平放置也可以豎直放置。這可以通過 android：orientation 屬性來指定。 它的每一個子視圖都以他們在 XML 文件中被描述的先後  先後顯示在界面中。

因爲 LinearLayout是 一個 父類視圖，所以它應該佈滿整個屏幕，故設置其 寬和高的屬性均爲 "match_parent",這個值聲明瞭該視圖應該匹配它的父級視圖的高和寬。

另外的兩個屬性 android:layout_width 和 android:layout_height 則是所有的 View 都必須具備的屬性。它們用來指定 view的大小

Add a Text Field

---

To create a user-editable text field, add an <EditText> element inside the <LinearLayout>.

Like every View object, you must define certain XML attributes to specify the EditText object's properties. Here’s how you should declare it inside the <LinearLayout> element:

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

屬性解釋：

android:id  1) 這一屬性爲這個 view 提供了一個唯一的標識符，通過這個標識符你可以在應用代碼裏 引用這個對象 例如： 讀 和 操作（manipulate） 這個對象（object）。 2) @ : 當引用XML 中描述的 資源 （resource） 時，需要使用 @ .  3) + :資源類型前面的 +  號 只在 你第一次定義一個資源 ID 時需要使用。編譯程序時，SDK 工具會 用這個 ID 名 在 項目的gen/R.java裏創建一個 新的資源ID 在你的，這個新的ID 會關聯到 EditText 元素。 一旦資源ID 以這種方式被聲明，以後再引用這個ID 就不需要 + 號。Using the plus sign is necessary only when specifying a new resource ID and not needed for concrete resources such as strings or layouts. See the sidebox for more information about resource objects.

android:layout_width and android:layout_heightInstead of using specific sizes for the width and height, the"wrap_content" value specifies that the view should be only as big as needed to fit the contents of the view. If you were to instead use "match_parent", then the EditText element would fill the screen, because it would match the size of the parent LinearLayout. For more information, see the Layouts guide.

android:hintThis is a default string to display when the text field is empty. Instead of using a hard-coded string as the value, the "@string/edit_message" value refers to a string resource defined in a separate file. Because this refers to a concrete resource (not just an identifier), it does not need the plus sign. However, because you haven't defined the string resource yet, you’ll see a compiler error at first. You'll fix this in the next section by defining the string. 當 文字編輯區域爲空時默認顯示的 字符串。

Add String Resources

---

When you need to add text in the user interface, you should always specify each string as a resource. String resources allow you to manage all UI text in a single location, which makes it easier to find and update text. Externalizing the strings also allows you to localize your app to different languages by providing alternative definitions for each string resource.

By default, your Android project includes a string resource file at res/values/strings.xml. Open this file and delete the <string> element named "hello_world". Then add a new one named "edit_message" and set the value to "Enter a message."

While you’re in this file, also add a "Send" string for the button you’ll soon add, called "button_send".

The result for strings.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My First App</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

For more information about using string resources to localize your app for other languages, see the Supporting Different Devices class.

Add a Button

---

Now add a <Button> to the layout, immediately following the <EditText> element:

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

The height and width are set to "wrap_content" so the button is only as big as necessary to fit the button's text. This button doesn't need the android:id attribute, because it won't be referenced from the activity code.

按鈕不需要 android 屬性，因爲 它不會在 activity中 被引用。

Make the Input Box Fill in the Screen Width

現在有了一個 編輯框 和一個 按鈕， 

但是 對於 文字編輯區來說 他的 content 隨着輸入變化，如果設置其 width 的屬性爲 —wrap_content  會出現如下情況：

因此 應給 TextView 定義 layout_weight 屬性，該屬性指定了一個 view 可以消費的剩餘空間，當然這個剩餘空間與 其他的View  消費的空間有關。

weigth 就是一個份額指定，如果給 button  值爲 2， TextView 值爲 1， 那麼 button 將佔據 2/3 的位置，而 TextView 則佔據 1/3 的位置，當然是先除掉其他沒有定義（默認爲0）的 view 的所佔的部分後再分配。

而 wrap_content 屬性要求系統計算可用空間，而這個計算最終也不會用到，故將 layout_wight 定義爲 0dp  。以提高效率， 

The default weight for all views is 0, so if you specify any weight value greater than 0 to only one view, then that view fills whatever space remains after all views are given the space they require. So, to fill the remaining space in your layout with the EditText element, give it a weight of 1 and leave the button with no weight.