[Android5 系列—] 1. 構建一個簡單的使用者介面

標籤：

前言

安卓應用的使用者介面是構建在View 和ViewGroup 這兩個物件的層級之上的。 View 就是一般的UI組件，像按鈕，輸入框等。 viewGroup 是一些不可見的view的容器，用來定義子View 如何布局， 類似在一個網格或是一個垂直列表。

安卓提供了一套XML的標籤詞彙用來定義UI的頁面顯示。

定義一個線性布局

1. 在 res/layout 目錄下。開啟 activity_my.xml (my 是您定義的activity 的名字)

在建立工程師包含的 BlankActivity 模板檔案，包含一個 RelativeLayout 的根視圖和一個  TextView 的子視圖。

2. 刪除  <TextView> 元素

3. 將 <RelativeLayout> 修改成 <LinearLayout>.

4. 添加 android:orientation  屬性 ，並把值設定成  "horizontal".

5. 移除 android:padding 和 tools:context 的屬性

修改後的檔案類似：

<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把子視圖布置成水平或豎直方向。

android:layout_width 和 android:layout_height  這兩個屬性用來設定布局的大小。這個值設定成 "match_parent" 就會撐開他的長寬和父View 適應。

過多關於布局的內容，可以參考官方介紹：

http://developer.android.com/guide/topics/ui/declaring-layout.html

添加一個文本輸入框

1. 在 activity_my.xml ，在<LinearLayout> 中，定義<EditText>元素，屬性 “id”的值設定成 @+id/edit_message.

2. layout_width 和 layout_height的屬性值設定成"wrap_content"

3. 定義 hint 的屬性，值為 edit_message.

res/layout/activity_my.xml  ， 完整的定義類似：

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

屬性及屬性值說明

android:id  -- 

@+id/edit_message

@ 的意思是： 但需要從XML 讀取資源物件時

  +: 但首次定義一個資源ID時，需要加上 "+“號。 在編譯APP的時候, SDK 工具會通過ID 名字在gen\R.java中建立一個新的資源ID/

  id: 是類型(處理id類型， 還有string 等類型)

  edit_message: 這個下面就會介紹如何建立

android:layout_width 和 android:layout_height

"wrap_content"

替代設定實際的寬度和高度， wrap_content 這個值可以讓view 填充整個內容。

android:hint

當 輸入框為空白時， 設定的預設顯示字串。

添加字串資源
預設狀況， 安卓工程會匯入字串資源檔  res/values/strings.xml. 這裡就添加以下上面用到的   "edit_message" 等1.  開啟 res/values/strings.xml2.  添加一行 "edit_message"， 值設定成  "Enter a message".3. 再添加一行， "button_send" 值設定成 "Send".res/values/strings.xml， 結果類似

<?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="action_settings">Settings</string>    <string name="title_activity_main">MainActivity</string></resources>

添加一個按鈕
1. 開啟 activity_my.xml2. 在 <LinearLayout> 中，在<EditText> 後添加一個<Button> 元素3. 設定按鈕的寬度和高度的屬性值為 "wrap_content"4. 定義    android:text 用來定義按鈕的顯示。
res/layout/activity_my.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>

使輸入框填充整個螢幕
以上的部分， 運行後效果如下：


可以看到， 輸入框並沒有佔滿這個螢幕。設定 <EditText> 的屬性  layout_weight  和  layout_width

<EditText    android:layout_weight="1"    android:layout_width="0dp"    ... />

再運行看一下 ....

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

[Android5 系列—] 1. 構建一個簡單的使用者介面