Android UI 介面開發

課程內容

Android UI 設計 View Hierarchy ( 視圖層次結構 ) Layouts ( 佈局 ) Widgets ( 微件 ) Menu and Dialog ( 菜單和對話框 ) Adapter

Android UI 事件處理 AndroidManifest.xml 檔 Android 應用開發實例

Android UI 設計

Android UI 設計

Android 程式開發採用了 MVC(Model-View-Controller) 框架 Ｍ odel 就是應用程式中二進制的數據 View 就是用戶介面，直接採用 XML 文件保存，在界

面開發上很方便 Controller 就是控制數據和介面之間的關係的 Java 代

碼。一個 Activity可以有多个界面，只需要將 View的 ID 傳遞到 setContentView()，就指定了以哪個視圖模型顯示數據

Android UI 設計

View Hierarchy ( 視圖層次結構 ) 在 Android 平台上，一個 Activity 的 UI 是由 View

和 ViewGroup 所組成的視圖層次結構 (view hierarchy tree) 所定義

你可以使用 Android 預設的 Views( 稱為Ｗ idgets 和 Layouts) ，或者自行建置客製 View

若要展開視圖層次結構，你的Activity 必須針對結構的 root呼叫 setContentView()

Android UI 設計

Layouts ( 佈局 ) Layout 是一種 ViewGroup(view container) ，提供

一種 UI 元件的容器 最常用的方式，就是在一個 XML 檔案中描述 view

hierarchy ，類似 HTML 中的 UI 架構

Android UI 設計

XML 元素的名稱是直接對應到它所代表的 Java 類別。 因此，一個 <TextView> XML 元素會在你的 UI 中產生一個 TextView 物件，而一個 <LinearLayout> 元素則會產生一個 LinearLayout view group 物件

四種常用的 Layout ：• FrameLayout: 最簡單的排列方式－在螢幕上提供一個空間

讓你加入一個元件• LinearLayout: 用橫向或直向的方式單方向排列• TableLayout: 表格式的排列方式• RelativeLayout: 讓子視圖指定自己和母視圖或其他子視圖

的相對位置 ( 用 ID 來指定 )

Android UI 設計

LinearLayout

Android UI 設計

TableLayout

Android UI 設計

RelativeLayout

Android UI 設計

常用的 XML 屬性 :• android:id• android:layout_width, android:layout_height• android:layout_weight• android:text, android:textColor, android:testSize• android:textStyle, android:background• android:gravity, android:layout_gravity• android:orientation• android:stretchColumn, android:shrinkColumn• android:padding, android:layout_margin• android:clickable, android:visibility

欲知詳細描述，請參照 Android API 文件http://developer.android.com/guide/topics/ui/declaring-layout.html

Android UI 設計

Widgets ( 微件 ) Widget 是和用戶進行互動的 UI View 物件 定義在 android.widget.* 套件中 常用的 Android Widgets:

• Button, ImageButton, CheckBox, RadioButton, ToggleButton.

• TextView, EditText , AutoCompleteTextView• ListView, GridView, Spinner• ImageView, Gallary, WebView, MapView

Android UI 設計

Button, ImageButton, CheckBox, RadioButton, ToggleButton:

Android UI 設計

TextView, EditText , AutoCompleteTextView:

Android UI 設計

ListView, GridView, Spinner:

Android UI 設計

ImageView, Gallery, MapView, WebView:

Android UI 設計

Menu and Dialog ( 清單和對話框 ) Android 提供三種 Menu 物件：

• Options Menu: 按下 MENU 鍵後顯示• Context Menu: 長按 View 後顯示• Submenu: 按下 Options Menu 或 Context Menu 中的選

項後顯示 Android 提供四種 Dialog 物件：

• AlertDialog• ProgressDialog• DatePickerDialog• TimePickerDialog

Android UI 設計

Options Menu

Android UI 設計

Context Menu

Android UI 設計

Submenu

Android UI 設計

AlertDialog, ProgressDialog

Android UI 設計

DataPickerDialog

Android UI 設計

TimePickerDialog

Android UI 設計

R.java R.java 是由 Android Development Kit 所自動產

生的資源索引檔（ resource index ） 「 R 」是一個類別，是 Android 應用程式資源的索

引類別。「 R.layout 」類別則是 UI 佈局的索引類別 R.layout 類別裡的「 main 」成員就是 Android 應

用程式的「主佈局索引」

Android UI 設計

Adapter 在 Android 上，我們不能直接將一種數據種類配置給

ListView 、 GridView 、 Spinner 、 Gallery 等Widgets ；我們必須要靠 Adapter 來將數據轉換到Ｗidgets 所能接受的資料格式

Adapter 是將數據綁定到 UI 界面的橋接類 Adapter 負責建立顯示每個項目的子 View 和提供對

下層數據的訪問 以下的例子是將一個字串陣列配置到一個 ListView

Android UI 設計

Version 1:

Version 1

Android UI 設計

Version 2

Android UI 設計

常用的 adapters:• ArrayAdapter• BaseAdapter• CursorAdapter• SimpleAdapter• SimpleCursorAdapter• SpinnerAdapter

以下的例子是將一個字串陣列配置到一個 Spinner

Android UI 事件處理

Android UI 事件處理

Android UI 事件處理 在 Android 平台上，捕獲用戶在界面上的觸發事件有

很多種方法， View 類就提供這些方法 你在使用各種 View 視圖來佈局界面時，會發現幾個公

用的回調方法來捕捉有用的 UI 觸發事件，當事件在某個 View 對像上被觸發時，這些方法會被系統框架通過這個對象所調用

例如：當一個 View( 如一個 Button) 被點擊， onTouchEvent() 方法會在該對像上被調用

Android UI 事件處理

Android UI 事件處理 所以，為了捕獲和處理事件，必須去繼承某個類，並

重載這些方法，以便自己定義具體的處理邏輯 顯然，你更容易明白，為什麼在你使用 View 類時會嵌

套帶有這些回調方法的接口類，這些接口稱為 event listeners ，它是你去獲取 UI交互事件的工具在你繼承 View 類，以便建立一個自定義組

也許你想繼承 Button ， 你會更普遍使用事件監聽來捕捉用戶的互動，在種情況下，你可以使用類的event handlers ，來預定義事件的處理方法

Android UI 事件處理

Event Listener: Event listener 是 View 類中的介面，其中含有一個

回調方法 如何使用 Event listener:

• 為你要捕獲的事件定義一個 Listener 。按照需求覆載 Listener 的回調方法

•將 Listener註冊到你想要捕獲事件的 View 上

Android UI 事件處理

例：當我們點擊按鈕時，在視窗內顯示一個簡單的信息

Android UI 事件處理

Android UI 事件處理

View 類包含了幾個主要的回調方法：• onClick(): from View.OnClickListener. • onLongClick() : from

View.OnLongClickListener.• onFocusChange() : from

View.OnFocusChangeListener.• onKey() : from View.OnKeyListener.• onTouch() : from View.OnTouchListener.

如果要註冊一個 Event listeners ，只要將覆載回調方法的實體 (instance) 給對應的 View.set…Listener()即可(記得 : 所有的 widgets 和 layouts都是繼承 View類 !)

AndroidManifest.xml 檔

AndroidManifest.xml 檔

每個 Android 應用程式在根目錄下都需要一個AndroidManifest.xml 檔案

AndroidManifest.xml 是一個用來描述 Android 應用程式「整體資訊」的設定檔。簡單來說，這是一個「自我介紹」檔，我們可以向 Android 系統「介紹」我們的 Android 應用程式，以便讓 Android 系統完整地了解我們的應用程式資訊。

例如： AndroidManifest.xml 描述了 Java 套件的信息、程式的組件、系統受保護功能的使用權限 ( 例如：上網、發送簡訊 )、或者所需要最低的 Android API版本

AndroidManifest.xml 檔

AndroidManifest.xml 檔案架構

Thank you

Q&A