Jason 的 Android 應用程式快樂學習班 --- 第六堂 Youtube 播放 App (1)

1. 第六堂：
Youtube 播放 APP (1)
柯力中 Jason Ko
Jason的Android 快樂應用程式學習班

2. 課程內容
• Youtube 播放 APP 介紹
• YoutubePlay 的 Layout
• 設定 AndroidManifest.xml
• 測試 YoutubeAPI
• AsyncTask
• ListView 跟 Adapter
Jason的Android 快樂應用程式學習班

3. Youtube 播放 APP 簡介
Jason的Android 快樂應用程式學習班

4. Youtube 播放 APP 簡介
• APP 名稱 ： YoutubePlay
• 功能：連結並播放 Youtube 影片
• 作法：
透過 YoutubeAPI 取得資料, 顯示
在首頁的 ListView 上, 接著內頁
顯示影片細節。
Jason的Android 快樂應用程式學習班

5. 今天進度
• 學會使用 YoutubeAPI
• 完成影片的列表排列
Jason的Android 快樂應用程式學習班

6. YoutubePlay 的 Layout
Jason的Android 快樂應用程式學習班

7. 1. 在 activity_main.xml 設置 ListView
Layout 設置

8. 2. 在 res / layout 下新增 item_video_list.xml
Layout 設置

9. item_video_list.xml
ImageView TextView
TextView TextView
TextView TextView
125dp
110dp
60dp
15dp
15dp
LinearLayout
RelativeLayout

10. 測試 API
Jason的Android 快樂應用程式學習班

11. 1. 新增一個 class：VideoAPI
2. 到下方連結複製並貼上
https://github.com/KosbrotherSchool/Teach_Youtu
bePlayAPP/blob/master/app/src/main/java/com/jas
onko/newyoutubeapp/VideoAPI.java
3. 再新增一個 class： YoutubeVideo
4. 到下方連結複製並貼上
https://github.com/KosbrotherSchool/Teach_Youtu
bePlayAPP/blob/master/app/src/main/java/com/jas
onko/newyoutubeapp/YoutubeVideo.java
設置 VideoAPI

12. 測試 API
Jason的Android 快樂應用程式學習班
取 Videos
出現 Bug!
=> 取網路資料, 不能在 MainThread, 來看看什麼是
MainTread!

13. MainThread 與 Thread
Jason的Android 快樂應用程式學習班
• MainThread 是老大, 要照顧 UI 畫面, 看不到功勞
的事, 叫 Thread 小弟去做！
• MainThread 又叫 UI Thread
MainThread
老大 Thread
小弟
那個, 你去把事情
做一做

14. MainThread 與 Thread
Jason的Android 快樂應用程式學習班
MainThread (UI Thread) 負責主畫面
Thread 2
Thread 1
Thread 3
• 可以開同時開很多個 Thread

15. AsyncTask
Jason的Android 快樂應用程式學習班

16. AsyncTask
• Android 幫我們準備好了稱職的 Thread 小弟
AsyncTask!
• 有四個 method：onPreExecute,
doInBackground, onProgressUpdate,
onPostExecute
• 在 AsyncTask 的背景程式處理完, 可以在
onPostExecute() 更新 UI 畫面
Jason的Android 快樂應用程式學習班

17. AsyncTask
• Android 幫我們準備好了稱職的 Thread 小弟
AsyncTask!
Jason的Android 快樂應用程式學習班

18. AsyncTask 的 LifeCycle
Jason的Android 快樂應用程式學習班
• 要更新資料處理完後的 UI 元件, 要在 onPostExecute() 執行

19. MainThread 與 AsyncTask
Jason的Android 快樂應用程式學習班
MainThread (UI Thread) 負責主畫面
AsyncTask 2
AsyncTask 1
AsyncTask 2
• 可以開同時開很多個 AsyncTask

20. AsyncTask
建立元件：
Jason的Android 快樂應用程式學習班
p.s 程式碼有縮減, 請看
http://developer.android.com/reference/android/os/AsyncTask.html
Params Progress Result

21. 使用 AsyncTask
建立新的 AsyncTask 並執行：
Jason的Android 快樂應用程式學習班

22. 簡單版的 AsyncTask
Jason的Android 快樂應用程式學習班

23. 建立 AsyncTask 並執行：
Jason的Android 快樂應用程式學習班
使用簡單版的 AsyncTask

24. 在 AndroidManifest.xml 中加入 Permission
• 在 AndroidManifest.xml 中加入 Internet 的 Permission

25. ListView 與 Adapter
Jason的Android 快樂應用程式學習班

26. ListView
1. 用來列表顯示的元件, 一樣要宣告與取得物件
2. 要 setAdapter
Jason的Android 快樂應用程式學習班

27. Adapter
Jason的Android 快樂應用程式學習班
• Adapter 用來橋接 ListView 與資料, 告訴
ListView 每一格要填入什麼
• BaseAdapter 的主要方法有 getCount(),
getItem(), getView()
• getView() 即返回每一格列表, 所要顯示的資料
與形式

28. Adapter
Jason的Android 快樂應用程式學習班
• Adapter 用來取資料與產生 View, 告訴
ListView 每一格要顯示什麼
ListView
Adapter
data
View data

29. 完成程式碼
Jason的Android 快樂應用程式學習班
• https://github.com/KosbrotherSchool
/Teach_YoutubePlayAPP_part1