標籤: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
在 Android Studio 中,從 res/layout
目錄開啟 content_my.xml
檔案。
上一節建立新項目時產生的 BlankActivity 包含一個 content_my.xml
檔案,該檔案根項目是一個包含 TextView 的 RelativeLayout。
在 Preview 面板點擊 關閉右側 Preview 面板。
在 Android Studio 中開啟布局檔案時,可以看到一個 Preview 面板。點擊這個面板中的標籤,可利用 WYSIWYG(所見即所得 (WYSIWYG))工具在 Design 面板看到對應的圖形化效果。但在本節中,我們將學習如何直接修改 XML 檔案。
刪除 [<TextView>] 標籤。
把 [<RelativeLayout>] 標籤改為 [<LinearLayout>]。
為 [<LinearLayout>] 添加 android:orientation 屬性並設定值為 "horizontal"
。
去掉 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 的屬性值。以下是應該線上性布局裡指定的一些屬性元素:
在 content_my.xml
檔案的 [<LinearLayout>] 標籤內定義一個 [<EditText>] 標籤,並設定 id
屬性為 @+id/edit_message
。
設定 layout_width
和 layout_height
屬性為 wrap_content
。
設定 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”。
在 Android Studio 裡,編輯 res/values
下的 strings.xml
檔案。
添加一個名為 "edit_message"
的字串,值為“Enter a message”。
再添加一個名為 "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。
更多關於不同語言本字串資源本地化的問題,請參考 相容不同的裝置。
添加一個按鈕
在 Android Studio 裡,編輯 res/layout
下的 content_my.xml
檔案。
在 [<LinearLayout>] 內部的 [<EditText>] 標籤之後定義一個 [<Button>] 標籤。
設定按鈕的 width 和 height 屬性值為 "wrap_content"
以便讓按鈕的大小能完整顯示文字。
定義按鈕的文本使用 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 充滿剩餘空間,做如下操作:
在 content_my.xml
檔案裡,設定 [<EditText>] 的 layout_weight
屬性值為 1
。
設定 [<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,運行看下效果:
下一小節將學習有關如何對按鈕做出相應,同時讀取文本中的內容,啟動另外一個 Activity 等。
3) 十分鐘學會android--建立第一個APP,建立簡單的使用者介面