Android進階UI控制元件

  • 1,226 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,226
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
19
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 第三堂:上午學習目標• Android進階UI控制元件• Android Thread運作機制 實戰教學 造就非凡的你 www.ittraining.com.tw進階UI控制元件-Adapter使用• Android 框架只負責應用程式的流程架構,框架設計師並不會知道最 終使用框架開發出的Application長的是什麼樣子。• 應用程式設計師並不能直接去修改Android框架的內容,如此會造成 相容性問題,因此無法直接透過框架修改來決定應用程式的長相.• 為解決上述兩個問題,在Android裡設計了Adapter類別來做為 Android框架與應用程式之間的橋樑• 為應付各種不同的資料數據來源,與不同的View元件,因此發展出各 式不同的Adapter元件。 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 187
  • 2. 進階UI控制元件-Adapt使用 Adapter• 常見的Adapter的類別 ListAdapter Li tAd t SpinnerAdapter S i Ad t BaseAdapter ArrayAdapter CursorAdapter SimpleAdapter ResourceCursorAdapter• 常見Adapter對應到UI端的類別 SimpleCursorAdapter ViewGroup AdapterView AbsListView AbsSpinner ListView GridView Gallery Spinner為你把關每一道 學習品質 實戰教學 造就非凡的你 www.ittraining.com.tw 188進階UI控制元件-Adapt使用• ArrayAdapter用途 • 作用為陣列與ListView之間的橋梁 作用為陣列與Li tVi 之間的橋梁 • 可將陣列中定義的資料逐一的對應到ListView之中顯示 • 一般ArrayAdapter中顯示的ListView每行通常只有一個TextView• SimpleAdapter用途 • simpleAdapter可以定製每一列ListView中要顯示的內容 • 一般ListView中每一列的版面配置(Layout)會撰寫在XML檔中,在 y , 由SimpleAdapter負責將內容(Data)填入Layout中的元件(View)。為你把關每一道 學習品質 實戰教學 造就非凡的你 www.ittraining.com.tw 189
  • 3. 進階UI控制元件-Adapt使用• 建構式ArrayAdapter (Context context, int resource, int textViewResourceId, T[] objects) • contex:要顯示的Context容器 • resource:layout定義,可以使用Android系統內建,或是自定layout. • textViewResourceId:位於layout中的textView,用來顯示data內容. textViewResourceId:位於layout中的textView 用來顯示data內容 • data:要顯示的資料內容• 建構式SimpleAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to) • contex:要顯示的Context容器 • data:基於Map的List. Map中包含了ListView每一列所需要的資料 • resource:顯示的Layout版型,此layout中至少要包含在to參數中所出現的 View。可使系統提供的layout,亦可自行定義 Vi 可使系統提供的l 亦可自行定義 • from:名稱陣列,每一個名稝都對應Data中的索引鍵。 • to:為TextView類形的陣列,必須要在layout中可以被索引到 to:為TextView類形的陣列 必須要在layout中可以被索引到。為你把關每一道 學習品質 實戰教學 造就非凡的你 www.ittraining.com.tw 190進階UI控制元件-Adapt使用• 自行定義Adapter內容 • 繼承(extended)BaseAdapter • 於建構式接收要處理的資料(Data)來源 • 覆寫(Override)以下四個Method • public int getCount() ; • 傳回Data的數量.(ListView的列數) • public Object getItem(int position); bli Obj t tIt (i t iti ) • 傳回指定的Data元件. • public long getItemId(int position); • 傳回Data的識別ID • public View getView(int position, View convertView, ViewGroup parent) t) • 傳回Layout與Data組合後的View元件(顯示於畫面上) • ※當Data內容有變更時 必須呼叫notifyDataSetChanged才會更新 ※當Data內容有變更時,必須呼叫notifyDataSetChanged才會更新 ListView中的內容。 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 191
  • 4. 進階UI控制元件-Adapter使用• Adapter與Android框架運作流程 Android Activity AdapterView Adapter 框架Application 2.setContentView() 2 setContentView() 3.gateView() 3 gateView() 1.onCreate() Map M MyAdapter M Ad t ListActivity Array Data Layout Cursor View XML 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 192進階UI控制元件-ListView• ListView為Android中用來顯示大量 資料的一個很重要的UI介面• 由於手機受限於螢幕大小,當欲顯示 的資料數量超過一個頁面可以顯示時, 就可以利用ListView來做資料顯示 就可以利用Li tVi 來做資料顯示• ListView需搭配Adapter使用, ListView會自動依顯示控制的需求透 過Adapter介面取得資料。• ListView提供OnItemClickListener() 方法,可以取得用戶的動件事件(例 如點選了那一個ListView元件) 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 193
  • 5. 進階UI控制元件-ListView• ListView使用方式 • set data source to Adapter • get ListView from R.layout • set adapter to Li tVi t d t t ListView • set click listener for each list item• ListView Event處理函式 • onItemClick(AdapterView<?> parent, View view, int position, long id) C ( ? ) • onItemLongClick(AdapterView<?> parent, View view, int position, long id) g ) • onItemSelected(AdapterView<?> parent, View view, int position, long id) 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 194 範例練習 範例專案名: ex03_1 練習目標:  了解各式adapter的使用  了解ListView與adapter之間的關係與運作流程 程式撰寫  設計一ListView元件,並練習接上各式不同的adapter與不 同的資料來源串接  SimpleAdapter, ArrayAdapter 操作練習  透過模擬器操作不同的Activity,每一個Activity代表一 個不同Adapter的連接範例。為你把關每一道 學習品質 195
  • 6. 進階UI控制元件-ListActivity• ListActivity使用時機 • 當一個Activity中只有顯示ListView,而且此ListView又會填滿 整個螢幕,此時可以直接使用ListActivity來代替Activity。 • ListActivity為一個包含了ListView的Activity,以wrapper的方 式將ListVIew包裝起來,方便更容易與直接的控制。 式將ListVIew包裝起來 方便更容易與直接的控制• ListActivity 預設ID元件 y • ListActivity使用的layout檔中必須定義一個ListView,且此 ListView的id必須固定為[ @id/Android:list ] • 另外可定義一個TextView當ListView裡沒有資料時可以顯示,此 另外可定義一個 當 裡沒有資料時可以顯示 此 TextView的id必須固定為[ @id/Android:empty] 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 196進階UI控制元件-ListView• ListActivity使用方式 • Application extended ListActivity • set data source to Adapter • get Li tVi f t ListView from ListActivity Li tA ti it • set adapter to ListView • set click listener for each list item t li k li t f h li t it• ListView Event處理函式 處理函式 • 在ListActivity中不用註冊Listener,而是直接以覆寫 (Override)來進行事件處理 • 可處理的Event函式與ListView相同 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 197
  • 7. 範例練習 範例專案名: ex03_2 練習目標:  了解ListActivity的應用 程式撰寫  修改前一隻範例程式,試著將其改寫成ListActivity  Activity直接繼承自ListActivity 操作練習  透過模擬器操作,注意ListActivity與ListView在對於 y listener event 處理的寫法是否有所不同?為你把關每一道 學習品質 198進階UI控制元件-ImageSwitch&Gallery• ImageSwitch ViewGroup • 主要用來做圖片切換與自動播放用 主要用來做圖片切換與自動播放用. AdapterView 可支援不同的進場與退場動畫特效 AbsSpinner• Gallery Gallery • 提供一個拖拉式圖片瀏覽與選擇介面 • 僅支援水平擺設方式 • 通常搭配ImageSwitch可用來做成簡 易的圖片瀏覽器。 易的圖片瀏覽器 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 199
  • 8. 進階UI控制元件-ImageSwitch&Gallery• ImageSwitch元件 • XML宣告方式 • 程式碼使用方式 功能 程式碼 package Import android.widget.ImageSwitch; Reference ImageSwitch sw1 = (ImageSwitch) findViewById(R.id.imsw1); set sw1.setFactory(ViewSwitch.ViewFactory factory) sw1.setInAnimation(Animation sw1 setInAnimation(Animation inAnimation) sw1.setOutAnimation(Animation outAnimation) sw1.setImageResource (int resid) 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 200進階UI控制元件-ImageSwitch&Gallery• Gallery元件 • XML宣告方式 • 程式碼使用方式 功能 程式碼 package Import android.widget.Gallery; Reference Gallery gal1 = (Gallery) findViewById(R.id.gallery); set t gal1.setAdapter(SpinnerAdapter adapter); l1 tAd t (S i Ad t d t ) Call back gal1.setOnItemSelectedListener(AdapterView.OnItemS e ected ste e ste e ); electedListener listener); 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 201
  • 9. 範例練習 範例專案名: ex03_3 練習目標:  透過Gallery與ImageSwitch設計一個簡易的相片瀏覽器  復習先前教過的Adapter的應用 程式撰寫  撰寫一個Activity包含ImageSwitch與Gallery元件 撰寫一個Activity包含ImageSwitch與Gallery元件。  撰寫一個ImageAdapter提供給Gallery。 操作練習  透過模擬器操作為你把關每一道 學習品質 202進階UI控制元件-GridView• GridView為網格檢視元件,可以將很很多圖片以固 ViewGroup 定的大小排列顯示在畫面上可用來做為相簿與圖片 瀏覽等應用 AdapterView• GridView的資料取至於ListAdapter,一般要用做 AbsListView 相簿使用需要自行實作ImageAdapter(繼承至 g p ( BaseAdapter). GridView 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 203
  • 10. 進階UI控制元件-GridView• GridView元件 • XML宣告方式 • 程式碼使用方式 功能 程式碼 package Import android.widget.GridView; Reference GridView grid= (GridView ) findViewById(R.id.grid); set grid.setAdapter(BaseAdapter adapter); Call back C ll b k grid.setOnItemSelectedListener(AdapterView.OnItem id tO It S l t dLi t (Ad t Vi O It SelectedListener listener); 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 204進階UI控制元件-Menu選單• Menu選單操作元件 • O ti M Option Menu • 按下menu建後顯示 • Context Menu • 長時間按下一個視 窗後顯示 • Submenu • 子選單,可被 option或context Menu所呼叫 所呼叫 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 205
  • 11. 進階UI控制元件-Option Menu• Option Menu • 選單位於整體畫面的下方 透過按下手機上的 選單位於整體畫面的下方,透過按下手機上的 Menu按鈕顯示 • 一個畫面最多可以安置6個選單項目 不支援 一個畫面最多可以安置6個選單項目,不支援 Checkbox及RadioButton • 超過6個選單的項目將會以擴充列的方式顯示 超過6個選單的項目將會以擴充列的方式顯示。• Option Menu 使用XML宣告 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 206進階UI控制元件-Option Menu• Inflating Option Menu Resource File • 透過MenuInflater inflate() 協助載入xml資源檔 透過MenuInflater.inflate() • public void inflate (int menuRes, Menu menu) @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); g () inflater.inflate(R.menu.game_menu, menu); return true; } 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 207
  • 12. 進階UI控制元件-Option Menu• 建立Option Menu 使用MenuItem add函式 Public boolean onCreateOptionsMenu(Menu menu){ menu.ad(0,MENU_ITEM_ID1, 0 “ MENU_ITEM_1”); menu.ad(0,MENU_ITEM_ID2, 0 “ MENU_ITEM_2”); return true; }• MenuItem add函式 • public abstract MenuItem add (int groupId, int itemId, int order, int titleRes) , , ) • groupid:群組ID • itemid:項目ID • order:排序方式 • titl R 每一個It 上的標題 titleRes:每一個Item上的標題 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 208進階UI控制元件-Option Menu• 建立Menu• Call Back Function 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 209
  • 13. 進階UI控制元件-Context Menu• Context Menu • 與在PC上的滑鼠右鍵功能類似 當按位某一個 與在PC上的滑鼠右鍵功能類似,當按位某一個 View 2秒鐘,就會出現一個浮動式的Context Menu Menu。 • 較常使用在ListView上。• 建立Option Menu 使用MenuItem add函式 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 210進階UI控制元件-Context Menu• Context Menu的callback函式 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 211
  • 14. 進階UI控制元件-Submenu • Submenu • C t t Menu與Option Menu可以在內嵌一個 Context M 與O ti M 可以在內嵌一個 子選單(Submenu)做為擴充。 • 子選單(S b 子選單(Submenu)不能在擴充子選單 )不能在擴充子選單 • 建立Submenu 使用xml 實戰教學 造就非凡的你 為你把關每一道 學習品質 www.ittraining.com.tw 212 進階UI控制元件-Submenu • 建立Submenu 使用SubMenu addSubMenu函式 @Overridepublic boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); SubMenu fileMenu = menu.addSubMenu(GALLERY, SUBMANU01, Menu.NONE, "File"); ( ) SubMenu editMenu = menu.addSubMenu(GALLERY, SUBMANU02, Menu.NONE, "Edit"); fileMenu.add(GALLERY, MANU01, Menu.NONE, "new"); fileMenu.add(GALLERY, MANU02, Menu.NONE, "open"); fileMenu.add(GALLERY, MANU03, Menu.NONE, save ); fileMenu add(GALLERY MANU03 Menu NONE "save"); editMenu.add(GALLERY, MANU04, Menu.NONE, "undo"); editMenu.add(GALLERY, MANU05, Menu.NONE, "redo"); return true;} 實戰教學 造就非凡的你 為你把關每一道 學習品質 www.ittraining.com.tw 213
  • 15. 進階UI控制元件-Submenu • 處理Callback函式@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case MANU01: case MANU02: case MANU03: case MANU04: case MANU05: String itemid = Integer.toString(item.getItemId()); String title = item.getTitle().toString(); showAlertDialog("項目ID = " + itemid + "n" + "標題 = " + title); return true; } return super onOptionsItemSelected(item); super.onOptionsItemSelected(item); } 實戰教學 造就非凡的你 為你把關每一道 學習品質 www.ittraining.com.tw 214 範例練習 範例專案名: ex03_04  練習目標:  學習各種Menu的應用場合與撰寫方式  程式撰寫  透過覆寫onCreateOptionsMenu函式來加入Menu選單  透過覆寫onOptionsItemSelected來接收使用者的選 擇  操作練習  透過模擬器操作,透過按下手機上的Menu鍵來呼叫出Menu 選單。 為你把關每一道 學習品質 215
  • 16. Android Thread運作機制-Looper與MQ• 在Android中Thread分為有Message Queue的循環Thread與 沒有Message Queue的循環Thread兩種。 g Q• 有Message Queue的循環Thread • 主執行緒(UI Thread)為有包含Message Queue的 Th d)為有包含M Q 的 Thread. • Looper會不斷循環的確認Message Queue裡是否有要處 理的Event. • 可透過Handler物件來將訊息丟到MQ中 Looper p• 無Message Queue的循環Thread • 由主執行緒產生的子執行緒並不 MQ 會具有Looper與MQ物件 Push Handler 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 216Android Thread運作機制-Looper與MQ• MQ可做為執行緒之間的溝通管道 • 子執行緒可透過Handler Push Message至主執行緒的MQ中來與主 執行緒溝通。 • 透過MQ傳遞Message為非同步方式,呼叫者並不會因此而被Lock住, Message Push至MQ後函式會立即返回 Push至MQ後函式會立即返回。 • 子執行緒本身不具有Looper與MQ,落其他執行緒(如主執行緒)需 要與子執行緒溝通時,必須先為子執行緒建立Looper與MQ物件。 message 主執行緒 message Looper UI Thread 子執行緒 Looper MQ MQ 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 217
  • 17. Android Thread運作機制-Looper與MQ • UI(主)執行緒 • UI Thread中所有的操作必須在5秒內回應, 否則系統會因愈時而強制關閉應用程式。 • 關於UI的操作只能在主執行緒(UI Thread)中處理, 子執行緒中只能進行數據資料等其他非UI的操作。 子執行緒中只能進行數據資料等其他非UI的操作 • 子執行緒若有需要做UI的控制,必須將需求傳送 給主執行緒的MQ,在由主執行緒負責做UI的變更。 主(UI)Thread onClick(View V){ new Thread().start(); } message handlerMessage(Message msg){File Text Data Looper textView.setText(“…"); } MQ 子Thread 搜尋讀取檔案中的文字,並顯示於UI textView.setText(“”); 為你把關每一道 學習品質 handler.sendMessage(m); 實戰教學 造就非凡的你218 www.ittraining.com.tw Android Thread運作機制-Looper與MQ • Handler物件 • Handler是由Android框架所提供的類別,用來協助將 Handler是由Android框架所提供的類別 用來協助將 Message物件送到MQ中。當Looper發現MQ中有Message, 便會呼叫handleMessage方法進行處理。 • Handler除了傳送Message物件外,也可以傳送實作 Runnable的介面的物件到MQ上。 • Handler宣告方式 Handler h = new Handler(){ @override public void handleMessage(Message msg){ 處理 //處理message } } 實戰教學 造就非凡的你 為你把關每一道 學習品質 www.ittraining.com.tw 219
  • 18. Android Thread運作機制-Looper與MQ• Handler建構與Callback方式(框架原始碼) public Handler(Looper looper, Callback callback) { mLooper = looper; mQueue = looper.mQueue; mCallback = callback; } public interface Callback { public boolean handleMessage(Message msg); } public void dispatchMessage(Message msg) { if (msg.callback != null) { ( g ) handleCallback(msg); } else { if (mCallback != null) { if ( C llb k h dl M (mCallback.handleMessage(msg)) { ( )) return; } } handleMessage(msg); }} 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 220Android Thread運作機制-Looper與MQ• 透過obtainMessage可取得Message物件 g g • public final Message obtainMessage (int what, int arg1, int arg2, Object obj)• 取得Message與傳送Message至MQ中 Handler h = new Handler(){ (){ public void handleMessage(Message msg){ //處理message } } h.removeMessage(0); h.obtainMessage(1,1,1,”my message); h.sendMessage(m); 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 221
  • 19. Android Thread運作機制-Looper與MQ public static final void prepare() {• 替子執行緒產生Looper與MQ if (sThreadLocal.get() != null) { throw new RuntimeException(Class subThread implements Runnable{ "Only one Looper may be created public void run(){ per thread"); } Looper.prepare(); 框架原始碼 sThreadLocal.set(new Looper()); } h = new Handler(){ public handlerMessage(Message msg){ //處理message } }; private Looper() { Looper.loop(); 框架原始碼 mQueue = new MessageQueue(); mRun = true; } mThread = Thread.currentThread();} } 實戰教學 造就非凡的你為你把關每一道 學習品質 www.ittraining.com.tw 222Android Thread運作機制-Looper與MQ• 如何取得執行緒的Looper物件 • Looper.myLooper () 可用來取得目前執行緒的L L L 可用來取得目前執行緒的Looper • Looper. getMainLooper() 可用來取得主執行緒的Looper• 如何控制Handler所要接收的Looper? p • 指定接收處理子執行緒Message Handler mHandler = new Handler(Looper.myLooper()){ public void handleMessage(Message msg){ //不可控制UI } }; } • 指定接收處理主執行緒Message(Current Thread) g Handler mHandler = new Handler(Looper.getMainLooper()){ public void handleMessage(Message msg){ //可控制UI } 實戰教學 造就非凡的你 };為你把關每一道 學習品質 223 www.ittraining.com.tw
  • 20. 範例練習 範例專案名: ex03_5 練習目標:  了解Android Thread的運作流程原理  了解UI Thread的操作方式  學習使用Handler操作 程式撰寫  建立Thread並指定給Looper與MQ,主執行緒透過Looper與 MQ與子執行緒進行雙向溝通 操作練習  透過模擬器操作練習為你把關每一道 學習品質 224