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
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