3) 十分鐘學會android--建立第一個APP,建立簡單的使用者介面

來源:互聯網
上載者:User

標籤:viewgroup   nes   run   螢幕   線性   parent   注意   hid   大小設定   

在本小節裡,我們將學習如何用 XML 建立一個帶有文本輸入框和按鈕的介面。下一節課將學會使 APP 對按鈕做出響應——按鈕被按下時,文字框裡的內容被發送到另外一個 Activity。

Android 的圖形化使用者介面由多個視圖(View)和視圖組(ViewGroup)構建而成。View 是通用的 UI 表單小工具,如:按鈕(Button)、文字框(Text field);而 ViewGroup 則是用來定義子視圖布局的不可見的容器,如:網格組件(grid)、垂直列表組件(vertical list)。

Android 提供了一系列對應於 View 和 ViewGroup 子類的 XML 標籤,以便我們用 XML 建立自己的 UI。

Layouts 是 ViewGroup 的子類。我們將在接下來的教程中練習如何使用 LinearLayout。

圖 1 關於 ViewGroup 對象如何組織布局分支和包含其他 View 對象。

可選的布局檔案

有很多理由使得我們選擇在 XML 中定義介面布局,而不是在運行時動態產生布局。其中最重要的一點是——這可以讓你為不同大小的螢幕建立不同的布局檔案。例如,你可以建立兩個版本的布局檔案,告訴系統在小螢幕上使用其中一個布局檔案,在大螢幕上使用另外一個布局檔案。參見 相容不同的裝置。

建立一個 LinearLayout
  1. 在 Android Studio 中,從 res/layout 目錄開啟 content_my.xml 檔案。

    上一節建立新項目時產生的 BlankActivity 包含一個 content_my.xml 檔案,該檔案根項目是一個包含 TextView 的 RelativeLayout。

  2. 在 Preview 面板點擊  關閉右側 Preview 面板。

    在 Android Studio 中開啟布局檔案時,可以看到一個 Preview 面板。點擊這個面板中的標籤,可利用 WYSIWYG(所見即所得 (WYSIWYG))工具在 Design 面板看到對應的圖形化效果。但在本節中,我們將學習如何直接修改 XML 檔案。

  3. 刪除 [<TextView>] 標籤。

  4. 把 [<RelativeLayout>] 標籤改為 [<LinearLayout>]。

  5. 為 [<LinearLayout>] 添加 android:orientation 屬性並設定值為 "horizontal"

  6. 去掉 android:padding 屬性和 tools:context 屬性。

修改後結果如下:

res/layout/content_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:showIn="@layout/activity_my">

LinearLayout 是 ViewGroup 的子類,用於放置水平或者垂直方向的子視圖組件,放置方向由屬性 android:orientation 決定。LinearLayout 裡的子布局按照 XML 裡定義的順序顯示在螢幕上。

所有的 Views 都會用到 android:layout_width 和 android:layout_height 這兩個屬性來設定自身的大小。

由於 LinearLayout 是整個視圖的根布局,所以通過指定 width 和 height 屬性為 "match_parent" 可以使其寬度和高度充滿整個螢幕。該值表示子 View 擴張自己寬度和高度來 匹配 父控制項的寬度和高度。

更多關於布局屬性的內容,請參考 布局嚮導。

添加一個文本輸入框

與其它 View 一樣,我們需要定義 XML 裡的某些屬性來指定 EditText 的屬性值。以下是應該線上性布局裡指定的一些屬性元素:

  1. 在 content_my.xml 檔案的 [<LinearLayout>] 標籤內定義一個 [<EditText>] 標籤,並設定 id 屬性為 @+id/edit_message

  2. 設定 layout_width 和 layout_height 屬性為 wrap_content

  3. 設定 hint 屬性為一個名為 edit_message 的字串。

代碼如下:

res/layout/content_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

這是視圖的唯一識別碼。可以在程式碼中通過該標識符引用對象。例如對這個對象進行讀和修改的操作(在下一課裡將會用到)。

當需要從 XML 裡引用資來源物件時,必須使用 @ 符號。緊隨 @ 之後的是資源的類型(這裡是 id),然後是資源的名字(這裡使用的是 edit_message)。

+ 號只在第一次定義一個資源 ID 的時候需要。它是告訴 SDK——此資源 ID 需要被建立。在應用程式被編譯之後,SDK 就可以直接使用這個 ID。edit_message 是在專案檔 gen/R.java 中建立一個新的標識符,這個標識符和 EditText 關聯。一旦資源 ID 被建立了,其他資源如果引用這個 ID 就不再需要 + 號。

android:layout_width 和 android:layout_height

不建議指定寬度和高度的具體尺寸,應使用 "wrap_content"。因為這樣可以保證視圖只佔據內容大小的空間。如果你使用了 "match_parent",這時 EditText 將會布滿整個螢幕,因為它將適應父布局的大小。參見 布局嚮導。

android:hint

當文字框為空白的時候,會預設顯示這個字串。對於字串 "@string/edit_message" 的值所引用的資源應該定義在單獨的檔案裡,而不是直接使用字串。因為使用的值是存在的資源,所以不需要使用 + 號。當然,由於你現在還沒有定義字串,所以在添加 @string/edit_message 的時候會出現編譯錯誤。在下一節的教程中你將學會如何定義字串資源,到時候就不會報錯了。

資來源物件

資來源物件是與 APP 資源(如:位元影像、布局檔案、字串)關聯的唯一整數。

在專案檔 gen/R.java 中,每個資源都有一個與之對應的資來源物件。你可以使用 R 類中的對象名稱代指資源(如:在指定 android:hint 屬性時需要的字串)。同時,也可以通過 android:id 屬性隨時為 View 建立資源 ID,以便在代碼中引用這個 View。

每次編譯 APP 時,SDK 工具都會產生 R.java 檔案。所以,請永遠不要修改這個檔案。

參閱 資源配備。

:該字串資源與 ID 使用了相同的名稱(edit_message)。然而,對於資源的引用是區分類型的(比如 id 和 字串),因此,使用相同的名稱不會引起衝突。

增加字串資源

預設情況下,你的 Android 項目包含一個字串資源檔,即 res/values/string.xml。開啟這個檔案,為 "edit_message" 增加一個定義,其值為“Enter a message”。

  1. 在 Android Studio 裡,編輯 res/values 下的 strings.xml 檔案。

  2. 添加一個名為 "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></resources>

當你在使用者介面定義一個文本時,應該把每一個文本字串列入資源檔。這樣做的好處是:對於所有字串值,字串資源能夠單獨的修改,在資源檔裡你可以很容易的找到並且做出相應的修改。通過選擇定義每個字串,還允許你用不同語言本地化 APP。

更多關於不同語言本字串資源本地化的問題,請參考 相容不同的裝置。

添加一個按鈕
  1. 在 Android Studio 裡,編輯 res/layout 下的 content_my.xml 檔案。

  2. 在 [<LinearLayout>] 內部的 [<EditText>] 標籤之後定義一個 [<Button>] 標籤。

  3. 設定按鈕的 width 和 height 屬性值為 "wrap_content" 以便讓按鈕的大小能完整顯示文字。

  4. 定義按鈕的文本使用 android:text 屬性,設定值為相似上一節中定義好的 button_send 字串資源。

此時的 [<LinearLayout>] 看起來應該是這樣:

res/layout/content_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:showIn="@layout/activity_my">    <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>

:寬和高被設定為 "wrap_content",這時按鈕佔據的大小就是按鈕裡文本的大小。這個按鈕不需要指定 android:id 的屬性,因為 Activity 代碼中不會引用該 Button。

當前 EditText 和 Button 組件只是適應了他們各自內容的大小, 2 所示:

圖 2 EditText 和 Button 表單小工具使用 "wrap_content" 作為寬度屬性的值。

這樣設定對按鈕來說很合適,但是對於文字框來說就不太好了,因為使用者可能輸入更長的常值內容。因此如果能夠佔滿整個螢幕寬度會更好。LinearLayout 使用 權重 屬性達到這個目,即 android:layout_weight 屬性。

權重的值指的是每個組件所佔剩餘空間的大小,該值與同級組件所佔空間大小有關。這就類似於飲料的成分配方:“兩份伏特加酒,一份咖啡利口酒”,即該酒中伏特加酒佔三分之二。例如,我們定義一個權重為 2 的 View,另一個 View 的權重是 1,那麼總數就是 3;這時第一個 View 佔據 2/3 的空間,第二個佔據 1/3 的空間。如果再加入第三個 View,權重設為 1,那麼第一個 View(權重為 2 的)會佔據 1/2 的空間,剩餘的另外兩個 View 各占 1/4。(請注意,使用權重的前提一般是給 View 的寬或者高的大小設定為 0dp,然後系統根據上面的權重規則來計算 View 應該佔據的空間。但在很多情況下,如果給 View 設定了 match_parent 的屬性,那麼在計算權重時則不是通常的正比,而是反比。也就是說,權重值大的反而佔據空間小)。

對於所有的 View 預設的權重是 0,如果只設定了一個 View 的權重大於 0,則該 View 將佔據除去別的 View 本身佔據的空間的所有剩餘空間。因此這裡設定 EditText 的權重為 1,使其能夠佔據除了按鈕之外的所有空間。

讓輸入框充滿整個螢幕的寬度

為讓 EditText 充滿剩餘空間,做如下操作:

  1. 在 content_my.xml 檔案裡,設定 [<EditText>] 的 layout_weight 屬性值為 1

  2. 設定 [<EditText>] 的 layout_width 值為 0dp

res/layout/content_my.xml

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

為了提升布局的效率,在設定權重時,應該把 EditText 的寬度設為 0dp。如果設定寬度為 "wrap_content",系統需要計算這個組件所佔用的寬度;而此時的 EditText 因為設定了權重,所以會佔據剩餘空間;所以,最終導致的結果是:EditText 的寬度成了不起作用的屬性。

設定 EditText 權重後的效果 3:

圖 3 因 EditText 表單小工具被設定了全部權重,所以佔據了 LinearLayout 的剩餘空間。

現在看一下完整的布局檔案內容:

res/layout/content_my.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:showIn="@layout/activity_my">    <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>
運行應用

整個布局預設被應用於建立項目的時候 SDK 工具自動產生的 Activity,運行看下效果:

  • 在 Android Studio 裡,點擊工具列裡的 Run 按鈕 。

  • 或者使用命令列,進入你項目的根目錄直接執行:

    $ ant debugadb install -r app/build/outputs/apk/app-debug.apk

下一小節將學習有關如何對按鈕做出相應,同時讀取文本中的內容,啟動另外一個 Activity 等。

3) 十分鐘學會android--建立第一個APP,建立簡單的使用者介面

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.