實驗五：多媒體播放器選單介面

實驗五 主題 目的 環境需求 練習製作一個多媒體播放器選單介面 根據不同的媒體類型顯示不同的圖示 學習如何設計自定義選單內容 透過SimpleAdapter將資料設定到ListView 學習如何使用OnItemClickListener事件監聽器 環境需求 Java SE Development Kit (JDK) Android SDK Eclipse ADT 本實驗為練習製作一個多媒體撥放器選單介面並可以根據不同的媒體類型顯示不同的圖示

實驗五範例 選單介面中，利用一個ListView元件，並將每一列顯示的項目內容利用自訂的佈局來做排列，最後利用Simple Adapter將對應的圖示資源路徑以及媒體名稱顯示出來。 當按下某首歌後，會在Log視窗顯示所選取的歌曲名稱

新增專案 1 2 3 1.新建一個Android專案 2.輸入專案名稱 MusicPlayer，套件名稱tw.edu.ncu.ce.bnlab.musicplayer 3.選擇SDK版本為 Android4.4 (API 19)，最低需求版本為 (API 19) Android 4.4 4.設定完成後點下一步 4

新增專案 5.按下一步，設定完Icon樣式後再按下一步 5

新增專案 6.設定新建活動的樣式，直接使用預設，並點選下一步。 6

新增專案 7.使用預設活動以及對應佈局檔案的名稱，直接按下完成，專案即建立專案。 7

主畫面 打開res/layout/activity_main.xml 將TextView元件刪除，佈局方式改為水平線性佈局，將ListView拖入線性佈局中 XML內容 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <ListView android:id="@+id/listView1" android:layout_height="wrap_content" /> </LinearLayout>

建立音樂列表佈局檔案 ８ 8.在佈局文件資料夾上 res/layout 點選右鍵→新建→Android XML Layout File(或Android XML File) 來新增一個音樂列表中一列的畫面佈局檔案。 Note:若在按右鍵選單中找不到Android XML Layout File或Android XML File，請選其他Android資料夾中即可找到 音樂列表佈局

建立音樂列表佈局檔案 ９ 9.在File欄位中輸入佈局檔案的名稱 list，並在下方點選LinearLayout作為初始的佈局方式。

res/layout/list.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/textView1" android:layout_height="wrap_content" android:text="TextView" /> </LinearLayout> 音樂列表畫面只需一個圖顯示音樂種類和一個文字描述音樂檔案名稱，因此打開剛新建的res/layout/list.xml檔案，將一個ImageView(在拖入ImageView時，會跳出選取圖片的視窗，請直接按視窗上的Clear按鈕即可)和TextView拖入水平的線性佈局中，XML檔案程式內容如投影片所示，請注意紅色屬性是否設定正確 音樂列表佈局

匯入音樂列表圖示資源 在專案的res資料夾內建立一個drawable資料夾

匯入音樂列表圖示資源 11.在 res/drawable資料夾上按右鍵 12.點選”匯入” 開啟匯入視窗 13.選擇General→檔案系統 14.選擇下一步

匯入音樂列表圖示資源 15.選瀏覽開啟瀏覽視窗 16.在瀏覽視窗中找尋要匯入專案中的圖片路徑(圖片可在本範例專案壓縮檔內的res/drawable中找到mp3.png和wma.png)

匯入音樂列表圖示資源 17.勾選要匯入的圖檔 18.完成後點選完成即會匯入到專案中

將音樂放入sdCard中 此實驗會從sdCard跟目錄資料夾中尋找副檔名為mp3或wma的音樂檔 將音樂檔放入手機或模擬器的sdCard中 先打開模擬器或先將手機與電腦連接(需安裝驅動程式) 模擬器開啟/裝置連接後，在eclipse的Devices視窗(在eclipse視窗下方，若未看見Devices請點選eclipse的視窗選單顯示視圖其他Android資料夾中點選Devices)中會顯示連接到電腦的裝置，選取要放入資料的裝置 打開eclipse中的FileExplorer(在eclipse視窗下方，若未看見FileExplorer請點選eclipse的視窗選單顯示視圖其他Android資料夾中點選FileExplorer)視窗 Note:若要放資料於模擬器的SDCard中，必須於建立模擬器時，建立模擬SDCard，請參見實驗1投影片

將音樂放入sdCard中 --在Devices視窗中選取要放入資料的裝置 --開啟FileExplorer視窗，選取sdcard資料夾，在FileExplorer視窗右上方，選取指向手機圖示按鈕，在跳出視窗中，選取要放入sdcard的資料，本範例放入投影片圈選的音樂檔

src/MainActivity.java 8 1 2 3 取出音樂檔案名稱的副檔名 4 比對音樂檔案名稱的副檔名 5 6 7 public class MainActivity extends Activity implements OnItemClickListener { ArrayList<String> musicList; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ArrayList<HashMap<String,Object>> list=new ArrayList<HashMap<String,Object>>(); musicList = findMusic(); for (int i = 0; i < musicList.size(); i++) { HashMap<String, Object> item = new HashMap<String, Object>(); String musicName=musicList.get(i); item.put("song", musicName); String extensionName=musicName.substring(musicName.lastIndexOf('.')+1); if (extensionName.equalsIgnoreCase("mp3")) item.put("icon", R.drawable.mp3); else if (extensionName.equalsIgnoreCase("wma")) item.put("icon", R.drawable.wma); list.add(item); } String from[] = { "icon", "song" }; int to[] = { R.id.imageView1, R.id.textView1 }; SimpleAdapter adapter = new SimpleAdapter(this, list, R.layout.list, from, to); ListView listView = (ListView) findViewById(R.id.listView1); listView.setAdapter(adapter); listView.setOnItemClickListener(this); 8 src/MainActivity.java 1 2 3 取出音樂檔案名稱的副檔名 4 比對音樂檔案名稱的副檔名 程式請使用alt+/快速鍵，幫助輸入程式 宣告musicList 變數，用來儲存音樂檔案名稱的清單 產生一個ArrayList<HashMap<String,Object>>物件list，用來儲存音樂列表資料 呼叫自訂的findMusic()方法，此方法在下頁投影片中，用來尋找sdcard中副檔名為mp3或wma的檔案，將檔案名稱利用ArrayList儲存 將sdcard中每一首音樂檔案的名稱和對應的音樂類型圖示放入HashMap<String, Object>物件 item中，音樂名稱的key為 song；對應音樂類型圖示的key為 icon，放入HashMap後，再將HashMap放入list中。 產生SimpleAdapter物件adapter ，設定列表畫面與資料List中的HashMap的key值對應到列表畫面的元件代號 將主畫面的ListView 找出，並設定其adapter 物件 將ListView 註冊監聽OnItemClick事件 讓程式實作OnItemClickListener介面(請利用滑鼠點擊產生，會自動在程式中加入onItemClick方法，在下頁投影片中) 5 6 7

找出sdcard路徑，並回傳File物件 ArrayList<String> findMusic(){ ArrayList<String> playList=new ArrayList<String>(); File dir=Environment.getExternalStorageDirectory(); File [] fileList=dir.listFiles(); for(File file : fileList ){ if(file.isFile()){ String fileName=file.getName(); String extensionName=fileName.substring(fileName.lastIndexOf('.')+1); if(extensionName.equalsIgnoreCase("mp3") ||extensionName.equalsIgnoreCase("wma")) playList.add(fileName); } return playList; public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { Log.i("list", "您選了:"+musicList.get(arg2)+"這首歌"); 儲存找到的音樂名稱 取回sdCard中的所有檔案和目錄的File物件陣列 將每個檔案或目錄取出 取出檔案名稱中的副檔名 判斷是否為檔案 取出檔案名稱 10 比對副檔名(忽略大小寫的比對)是否為mp3或wma，若是則加入playList中 9. 當點擊列表中某筆資料時，顯示Log訊息 10. 找出sdcard跟目錄中副檔名為mp3或wma的音樂名稱，並儲存在playList中，最後將playList回傳 9

增加使用權限 在Android 4.4要讀取sdCard資料需加入讀取權限 打開專案中的AndroidManifest.xml檔案，切換到Permissions頁籤

增加使用權限