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