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函式
@Override
public 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 216
Android 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
• Ｈandler物件
• 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 220
Android 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 222
Android 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