Android UI 元件架構

最基礎的 UI 元件是 android.view.View，負責顯示其他UI元件與事件處理(某些複雜的View必須配合特定的Activity 才能使用)

EX : ListActivity、MapActivity

Widget : 互動式元件 (例如 : Button)

Layout : 負責元件在畫面的顯示位置

在Activity內加入UI元件 :

XxxView view = new XxxView(this);

setContentView(view);

//利用物件參考變數view控制XxxView元件

使用Layout中XML設定檔在Activity內加入UI元件 :

Layout XML設定檔 :

<?xml version=”1.0” encoding=”utf-8”?>

<XxxView .../>

在Activity呼叫XML的java程式 : setContentView(R.layout.main)

注意 : 使用XML設定Layout符合MVC架構，便於維護

Layout中XML設定檔範例 :

<?xml version=”1.0” encoding=”utf-8”?>

<XxxView

xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

………………>

</XxxView>

<XxxView …></XxxView> : 所有XML都有的Root元素，對應到Android API的Layout或是Widget元件

Layout中XML設定檔說明 :

xmlns:android=”http://schemas.android.com/apk/res/android”

Android系統的namespace，Layout XML 的Root標籤必須有此屬性

android:layout_width、Android:layout_height :

UI元件的寬度(width)與高度(height)，每個UI元件都必須有此屬性

參數值 : wrap_content、fill_parent(android2.2新增 : match_parent)

wrap_content : 控制UI元件僅包住元件本身的資料內容

fill_parent : 控制UI元件填滿整個上層(Parent)元件，所謂上層(Parent)元件所指的是包住此UI元件的元件(EX : LinearLayout)

Android2.2之後，fill_parent之外新增match_parent，兩者意義相同

常用的Android互動式元件 : Widget

android.widget.TextView : 僅用來顯示文字資料的元件資料無法修改

android.widget.EditText  : TextView的字類別，顯示可以修改文字資料的元件

android.widget.Button    : TextView的子類別，顯示按鈕元件

android.widget.CheckBox : Button的子類別，可夫重勾選

android.widget.RadioButton : Button的子類別，通常與RadioGroup搭配用來提供單選選項元件

android.widget.Spinner   : 下拉選單

其他常見的Widget : AutoCompleteTextView、Gallery、ListView、MapVew、WebView

android.widget.TextView的常見XML屬性 :

android:text : 要顯示的文字資料

android:capitalize : 自動大寫

android:cursorVisible : 游標自否可見

android:inputType : 設定輸入資料

android:password : 輸入password的欄位

android:numeric : 只能輸入數字

android:phoneNumber : 輸入電話號碼的欄位

android:singleLine : 無法換行

android:typeface、android:textStyle : 字體字型

在Android應用程式內使用UI元件 :

在Layout XML內設定新增UI元件的id : @+id/name

 <XxxView ...android:id=”@+id/name” .../>

透過ID在Layout中XML設定檔抓取其他UI元件 : @id/name

 <XxxView ...android:layout_toRightOf=”@id/name” .../>

在java程式中透過UI元件的id取得使用 : R.id.name

//呼叫UI元件的程式碼必須放在setContentView(R.layout.main)之後

//必須等Layout中XML設定檔截入後才能取得UI元件

XxxView view = (XxxView)findViewById(R.id.name);

//利用物件參考變數view控制XxxView元件