Android UI控制元件


Android應用程式的使用者介面是一切,使用者可以看到並與之互動。已經解了並用它定位在活動中的各種檢視的布局。本章會給詳細檢視的各方面。

檢視(View)是一個物件繪製在螢幕上,使用者可以互動的東西,ViewGroup 是一個物件,其中包含其他View(ViewGroup)的物件,並可以定義使用者介面的布局。

檢視可以定義在一個XML檔案,它提供了一個人類可讀的結構布局,類似於HTML布局。例如,一個簡單的垂直布局,文字檢視(TextView)和按鈕(Button)看起來像這樣:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent"
   android:orientation="vertical" >
   
   <TextView android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="I am a TextView" />
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="I am a Button" />
</LinearLayout>

Android UI控制元件

有一些 Android 提供的UI控制元件,允許建立應用程式的圖形化使用者介面。

S.N. UI控制元件與說明
1 TextView
這種控制用於顯示文字給使用者。
2 EditText
EditText是TextView預定義的子類,包括豐富的編輯功能。
3 AutoCompleteTextView
AutoCompleteTextView是一個檢視,它類似於EditText,不同之處是在使用者鍵入時,它會顯示自動完成建議的列表。
4 Button
按鈕式可以被按壓,或者點選 - 由使用者執行動作。
5 ImageButton
AbsoluteLayout使可以指定其子檢視的確切位置。
6 CheckBox
可以由使用者來切換開/關。提供一組可選擇的選項並不相互排斥時候呈現使用者,應該使用核取方塊。
7 ToggleButton
一個開/關按鈕帶有指示燈。
8 RadioButton
無線電鈕有兩種狀態:選中或取消選中。
9 RadioGroup
RadioGroup用於組織一個或多個無線電鈕。
10 ProgressBar
進度條檢視(ProgressBar)提供一些日常任務,當在後台執行任務時,給出視覺反饋。
11 Spinner
一個下拉選單,允許使用者選擇從一組一個值(類似HTML中的select)
12 TimePicker
TimePicker檢視允許使用者選擇一天中的時間,在24小時模式或AM/ PM模式。
13 DatePicker
TimePicker檢視允許使用者選擇一天中的時間,在24小時模式或AM/PM模式。

建立UI控制元件

正如在前面的章節中,檢視物件可能有一個唯一的ID分配給,這個唯一識別檢視樹內。一個檢視ID在XML標籤的語法是:

android:id="@+id/text_id"

要建立一個使用者介面控制元件/檢視/小工具,必須在布局檔案中定義一個檢視/部件,並將其分配一個唯一的ID如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent"
   android:orientation="vertical" >
   
   <TextView android:id="@+id/text_id"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="I am a TextView" />
</LinearLayout>

最後控制物件建立一個範例,並獲得它的布局,使用以下命令:

TextView myText = (TextView) findViewById(R.id.text_id);