第六堂 youtube 播放 app (1)

第六堂：Youtube 播放 APP (1)

柯力中 Jason Ko

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

課程內容

• Youtube 播放 APP 介紹

• YoutubePlay 的 Layout

• 設定 AndroidManifest.xml

• 測試 YoutubeAPI

• AsyncTask

• ListView 跟 Adapter


Youtube 播放 APP 簡介


Youtube 播放 APP 簡介

• APP 名稱： YoutubePlay

• 功能：連結並播放 Youtube 影片

• 作法：透過 YoutubeAPI 取得資料, 顯示在首頁的 ListView 上, 接著內頁顯示影片細節。


今天進度

• 學會使用 YoutubeAPI

• 完成影片的列表排列


YoutubePlay 的 Layout


1. 在 activity_main.xml 設置 ListView

Layout 設置

2. 在 res / layout 下新增 item_video_list.xml

Layout 設置

item_video_list.xml

ImageView TextView

TextView TextView

TextView TextView

125dp

110dp

60dp

15dp

15dp

LinearLayout

RelativeLayout

測試 API


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

https://github.com/KosbrotherSchool/Teach_YoutubePlayAPP/blob/master/app/src/main/java/com/jasonko/newyoutubeapp/VideoAPI.java

https://github.com/KosbrotherSchool/Teach_YoutubePlayAPP/blob/master/app/src/main/java/com/jasonko/newyoutubeapp/YoutubeVideo.java

測試 API


取 Videos

出現 Bug!

=> 取網路資料, 不能在 MainThread, 來看看什麼是MainTread!

MainThread 與 Thread


• MainThread 是老大, 要照顧 UI 畫面, 看不到功勞

的事, 叫 Thread 小弟去做！

• MainThread 又叫 UI Thread

MainThread

老大 Thread

小弟

那個, 你去把事情做一做

MainThread 與 Thread


MainThread (UI Thread) 負責主畫面

Thread 2

Thread 1

Thread 3

• 可以開同時開很多個 Thread

AsyncTask


AsyncTask

• Android 幫我們準備好了稱職的 Thread 小弟

AsyncTask!

• 有四個 method：onPreExecute,

doInBackground, onProgressUpdate,

onPostExecute

• 在 AsyncTask 的背景程式處理完, 可以在

onPostExecute() 更新 UI 畫面


AsyncTask

• Android 幫我們準備好了稱職的 Thread 小弟

AsyncTask!


AsyncTask 的 LifeCycle


• 要更新資料處理完後的 UI 元件, 要在 onPostExecute() 執行

MainThread 與 AsyncTask


MainThread (UI Thread) 負責主畫面

AsyncTask 2

AsyncTask 1

AsyncTask 2

• 可以開同時開很多個 AsyncTask

AsyncTask

建立元件：


p.s 程式碼有縮減, 請看http://developer.android.com/reference/android/os/AsyncTask.html

Params Progress Result

http://developer.android.com/reference/android/os/AsyncTask.html

使用 AsyncTask

建立新的 AsyncTask 並執行：


簡單版的 AsyncTask


建立 AsyncTask 並執行：


使用簡單版的 AsyncTask

在 AndroidManifest.xml 中加入 Permission

• 在 AndroidManifest.xml 中加入 Internet 的 Permission

ListView 與 Adapter


ListView

1. 用來列表顯示的元件, 一樣要宣告與取得物件

2. 要 setAdapter


Adapter


• Adapter 用來橋接 ListView 與資料, 告訴

ListView 每一格要填入什麼

• BaseAdapter 的主要方法有 getCount(),

getItem(), getView()

• getView() 即返回每一格列表, 所要顯示的資料

與形式

Adapter


• Adapter 用來取資料與產生 View, 告訴

ListView 每一格要顯示什麼

ListViewAdapter

data

View data

完成程式碼


• https://github.com/KosbrotherSchool

/Teach_YoutubePlayAPP_part1

https://github.com/KosbrotherSchool/Teach_YoutubePlayAPP_part1

第六堂 youtube 播放 app (1)

Software