Android UI介面開發

11,465 views

Published on

Android UI介面開發

Published in: Technology

Android UI介面開發

  1. 1. Android UI 介面開發
  2. 2. 課程內 容  Android UI 設計  View Hierarchy ( 視圖層次結構 )  Layouts ( 佈局 )  Widgets ( 微件 )  Menu and Dialog ( 菜單和對話框 )  Adapter  Android UI 事件處理  AndroidManifest.xml 檔  Android 應用開發實例
  3. 3. Android UI 設計
  4. 4. Android UI 設計  Android 程式開發採用了 MVC(Model-View-Controller) 框架  M odel 就是應用程式中二進制的數據  View 就是用戶介面,直接採用 XML 文件保存,在界 面開發上很方便  Controller 就是控制數據和介面之間的關係的 Java 代 碼。一個 Activity 可以有多个界面,只需要將 View 的 ID 傳遞到 setContentView() ,就指定了以哪個視圖模 型顯示數據
  5. 5. Android UI 設計  View Hierarchy ( 視圖層次結構 )  在 Android 平台上,一個 Activity 的 UI 是由 View 和 ViewGroup 所組成的視圖層次結構 (view hierarchy tree) 所定義  你可以使用 Android 預設的 Views( 稱為W idgets 和 Layouts) ,或者自行建置客製 View  若要展開視圖層次結構,你的 Activity 必須針對結構的 root 呼叫 setContentView()
  6. 6. Android UI 設計  Layouts ( 佈 局 )  Layout 是一種 ViewGroup(view container) ,提供一 種 UI 元件的容器  最常用的方式,就是在一個 XML 檔案中描述 view hierarchy ,類似 HTML 中的 UI 架構
  7. 7. Android UI 設計  XML 元素的名稱是直接對應到它所代表的 Java 類別。 因此,一個 <TextView> XML 元素會在你的 UI 中產 生一個 TextView 物件,而一個 <LinearLayout> 元 素則會產生一個 LinearLayout view group 物件  四種常用的 Layout : • FrameLayout: 最簡單的排列方式-在螢幕上提供一個空間讓 你加入一個元件 • LinearLayout: 用橫向或直向的方式單方向排列 • TableLayout: 表格式的排列方式 • RelativeLayout: 讓子視圖指定自己和母視圖或其他子視圖的 相對位置 ( 用 ID 來指定 )
  8. 8. Android UI 設計 LinearLayout
  9. 9. Android UI 設計 TableLayout
  10. 10. Android UI 設計 RelativeLayout
  11. 11. 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-la
  12. 12. 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
  13. 13. Android UI 設計 Button, ImageButton, CheckBox, RadioButton, ToggleButton:
  14. 14. Android UI 設計 TextView, EditText , AutoCompleteTextView:
  15. 15. Android UI 設計 ListView, GridView, Spinner:
  16. 16. Android UI 設計 ImageView, Gallery, MapView, WebView:
  17. 17. Android UI 設計  Menu and Dialog ( 清單和對話框 )  Android 提供三種 Menu 物件: • Options Menu: 按下 MENU 鍵後顯示 • Context Menu: 長按 View 後顯示 • Submenu: 按下 Options Menu 或 Context Menu 中的選項後 顯示  Android 提供四種 Dialog 物件: • AlertDialog • ProgressDialog • DatePickerDialog • TimePickerDialog
  18. 18. Android UI 設計 Options Menu
  19. 19. Android UI 設計 Context Menu
  20. 20. Android UI 設計 Submenu
  21. 21. Android UI 設計 AlertDialog, ProgressDialog
  22. 22. Android UI 設計 DataPickerDialog
  23. 23. Android UI 設計 TimePickerDialog
  24. 24. Android UI 設計  R.java  R.java 是由 Android Development Kit 所自動產生的 資源索引檔( resource index )  「 R 」是一個類別,是 Android 應用程式資源的索引 類別。「 R.layout 」類別則是 UI 佈局的索引類別  R.layout 類別裡的「 main 」成員就是 Android 應用 程式的「主佈局索引」
  25. 25. Android UI 設計  Adapter  在 Android 上,我們不能直接將一種數據種類配置給 ListView 、 GridView 、 Spinner 、 Gallery 等 Widgets ;我們必須要靠 Adapter 來將數據轉換到W idgets 所能接受的資料格式  Adapter 是將數據綁定到 UI 界面的橋接類  Adapter 負責建立顯示每個項目的子 View 和提供對下 層數據的訪問  以下的例子是將一個字串陣列配置到一個 ListView
  26. 26. Android UI 設計  Version 1: Version 1
  27. 27. Android UI 設計 Version 2
  28. 28. Android UI 設計  常用的 adapters: • ArrayAdapter • BaseAdapter • CursorAdapter • SimpleAdapter • SimpleCursorAdapter • SpinnerAdapter  以下的例子是將一個字串陣列配置到一個 Spinner
  29. 29. Android UI 事件處理
  30. 30. Android UI 事件處理  Android UI 事件處理  在 Android 平台上,捕獲用戶在界面上的觸發事件有 很多種方法, View 類就提供這些方法  你在使用各種 View 視圖來佈局界面時,會發現幾個公 用的回調方法來捕捉有用的 UI 觸發事件,當事件在某 個 View 對像上被觸發時,這些方法會被系統框架通過 這個對象所調用  例如:當一個 View( 如一個 Button) 被點 擊, onTouchEvent() 方法會在該對像上被調用
  31. 31. Android UI 事件處理  Android UI 事件處理  所以,為了捕獲和處理事件,必須去繼承某個類,並 重載這些方法,以便自己定義具體的處理邏輯  顯然,你更容易明白,為什麼在你使用 View 類時會嵌 套帶有這些回調方法的接口類,這些接口稱為 event listeners ,它是你去獲取 UI 交互事件的工具在你繼承 View 類,以便建立一個自定義組  也許你想繼承 Button , 你會更普遍使用事件監聽來 捕捉用戶的互動,在種情況下,你可以使用類的 event handlers ,來預定義事件的處理方法
  32. 32. Android UI 事件處理  Event Listener:  Event listener 是 View 類中的介面,其中含有一個回 調方法  如何使用 Event listener: • 為你要捕獲的事件定義一個 Listener 。按照需求覆 載 Listener 的回調方法 • 將 Listener 註冊到你想要捕獲事件的 View 上
  33. 33. Android UI 事件處理 例:當我們點擊按鈕時,在視窗內顯示一個簡單的信息
  34. 34. Android UI 事件處理
  35. 35. 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 類 !)
  36. 36. AndroidManifest.xml 檔
  37. 37. AndroidManifest.xml 檔  每個 Android 應用程式在根目錄下都需要一個 AndroidManifest.xml 檔案  AndroidManifest.xml 是一個用來描述 Android 應用程 式「整體資訊」的設定檔。簡單來說,這是一個「自我介 紹」檔,我們可以向 Android 系統「介紹」我們的 Android 應用程式,以便讓 Android 系統完整地了解我 們的應用程式資訊。  例如: AndroidManifest.xml 描述了 Java 套件的信息、 程式的組件、系統受保護功能的使用權限 ( 例如:上網、 發送簡訊 ) 、或者所需要最低的 Android API 版本
  38. 38. AndroidManifest.xml 檔  AndroidManifest.xml 檔案架構
  39. 39. Q&A Thank you

×