進階應用程式設計 2014/12/21

96
進階程式設計 哲輝

Upload: samael-wang

Post on 25-Jul-2015

189 views

Category:

Engineering


4 download

TRANSCRIPT

Page 1: 進階應用程式設計 2014/12/21

進階程式設計⺩王哲輝

Page 2: 進階應用程式設計 2014/12/21

在開始之前

Page 3: 進階應用程式設計 2014/12/21

Android Studio 1.0 發佈了

Page 4: 進階應用程式設計 2014/12/21

⾄至於那個棄嬰...

7⽉月開始看起來就沒什麼在維護

專案範本好像也壞掉了

Page 5: 進階應用程式設計 2014/12/21

⼀一定要知道的開發者網站

http://d.android.com

Page 6: 進階應用程式設計 2014/12/21

Android 程式設計

Page 7: 進階應用程式設計 2014/12/21

Android 程式設計

Page 8: 進階應用程式設計 2014/12/21

總之先建個專案吧

https://github.com/freesamael/npu-java-course-2014-fall/

Page 9: 進階應用程式設計 2014/12/21

匯⼊入專案

Page 10: 進階應用程式設計 2014/12/21

執⾏行專案

Page 11: 進階應用程式設計 2014/12/21

或⽤用 Android Studio 匯⼊入專案

Page 12: 進階應用程式設計 2014/12/21

執⾏行專案

Page 13: 進階應用程式設計 2014/12/21

專案結構⽐比較

Page 14: 進階應用程式設計 2014/12/21

專案結構⽐比較

Page 15: 進階應用程式設計 2014/12/21

專案結構⽐比較

manifest n. 載貨單, 運貨單, 旅客名單系統藉由讀取 manifest 檔案註冊 app 元件

Page 16: 進階應用程式設計 2014/12/21

專案結構⽐比較

Page 17: 進階應用程式設計 2014/12/21

專案結構⽐比較

java 原始碼檔案

Page 18: 進階應用程式設計 2014/12/21

專案結構⽐比較

Page 19: 進階應用程式設計 2014/12/21

專案結構⽐比較

資源檔 (字串、佈景、⾵風格、圖⽚片、動畫,...)

Page 20: 進階應用程式設計 2014/12/21

專案結構⽐比較

Page 21: 進階應用程式設計 2014/12/21

專案結構⽐比較

編譯設定 (Gradle vs. Ant)

Page 22: 進階應用程式設計 2014/12/21

Android App 組成

Page 23: 進階應用程式設計 2014/12/21

Android App 組成

Activity使⽤用者介⾯面

Page 24: 進階應用程式設計 2014/12/21

Android App 組成

Activity

Service

使⽤用者介⾯面

背景服務

Page 25: 進階應用程式設計 2014/12/21

Android App 組成

Activity

Service

Broadcast Receiver

使⽤用者介⾯面

背景服務

接收廣播通知

Page 26: 進階應用程式設計 2014/12/21

Android App 組成

Activity

Service

Broadcast Receiver

Content Provider

使⽤用者介⾯面

背景服務

接收廣播通知

內容提供

Page 27: 進階應用程式設計 2014/12/21

Android App 組成

Activity

Service

Broadcast Receiver

Content Provider

使⽤用者介⾯面

背景服務

接收廣播通知

內容提供

Activity

Page 28: 進階應用程式設計 2014/12/21

認識 App Manifest

http://developer.android.com/guide/topics/manifest/manifest-intro.html#filestruct

Page 29: 進階應用程式設計 2014/12/21

認識 Intent

Page 30: 進階應用程式設計 2014/12/21

認識 Intent

activity n. 活動, ⾏行動, 活躍, 活⼒力

Page 31: 進階應用程式設計 2014/12/21

認識 Intent

intent n. 意圖, 含義, 故意

activity n. 活動, ⾏行動, 活躍, 活⼒力

Page 32: 進階應用程式設計 2014/12/21

認識 Intent

intent n. 意圖, 含義, 故意

activity n. 活動, ⾏行動, 活躍, 活⼒力

“執⾏行特定活動,以讓使⽤用者完成特定意圖”

Page 33: 進階應用程式設計 2014/12/21

例:執⾏行⼀一個活動,讓使⽤用者得以觀看資管系網⾴頁

Page 34: 進階應用程式設計 2014/12/21

例:執⾏行⼀一個活動,讓使⽤用者得以觀看資管系網⾴頁

⺫⽬目的: 動作 (action) = 觀看 網址 (data_uri) = http://mis.npu.edu.tw

Page 35: 進階應用程式設計 2014/12/21

例:執⾏行⼀一個活動,讓使⽤用者得以觀看資管系網⾴頁

⺫⽬目的: 動作 (action) = 觀看 網址 (data_uri) = http://mis.npu.edu.tw

adb shell am start -a "android.intent.action.VIEW" -d "http://mis.npu.edu.tw"

Page 36: 進階應用程式設計 2014/12/21

斯斯有三種,Intent 分兩種

Page 37: 進階應用程式設計 2014/12/21

斯斯有三種,Intent 分兩種隱含意圖 (implicit intent): 不指定完成 intent 的程式或元件

Page 38: 進階應用程式設計 2014/12/21

斯斯有三種,Intent 分兩種隱含意圖 (implicit intent): 不指定完成 intent 的程式或元件

明確意圖 (explicit intent): 指定完成 intent 的程式或元件

Page 39: 進階應用程式設計 2014/12/21

斯斯有三種,Intent 分兩種隱含意圖 (implicit intent): 不指定完成 intent 的程式或元件

明確意圖 (explicit intent): 指定完成 intent 的程式或元件

adb shell am start -a "android.intent.action.VIEW" -d "http://mis.npu.edu.tw"

Page 40: 進階應用程式設計 2014/12/21

斯斯有三種,Intent 分兩種隱含意圖 (implicit intent): 不指定完成 intent 的程式或元件

明確意圖 (explicit intent): 指定完成 intent 的程式或元件

adb shell am start -a "android.intent.action.VIEW" -d "http://mis.npu.edu.tw"

adb shell am start -a "android.intent.action.VIEW" -d "http://mis.npu.edu.tw" com.android.browser

Page 41: 進階應用程式設計 2014/12/21

z

Page 42: 進階應用程式設計 2014/12/21

z

敘述意圖過濾器 (intent filter)

Page 43: 進階應用程式設計 2014/12/21

z

敘述意圖過濾器 (intent filter)

透過意圖匹配 (intent matching) 找到適當程式元件

Page 44: 進階應用程式設計 2014/12/21

Activity ⽣生命週期

Page 45: 進階應用程式設計 2014/12/21

任務(Task)與 返回堆疊(Back Stack)

Page 46: 進階應用程式設計 2014/12/21

Application ⽣生命週期 != Activity ⽣生命週期

Page 47: 進階應用程式設計 2014/12/21

Application ⽣生命週期 != Activity ⽣生命週期

但是有相關的

Page 48: 進階應用程式設計 2014/12/21

最常⾒見的⾃自動結束時機

Page 49: 進階應用程式設計 2014/12/21

⾃自動結束:OOM Killer

Android 系統在記憶體不⾜足的時候, 會由 OOM (out-of-memory) killer 結束 oom_adj 值較⼤大的程序。

http://developer.android.com/guide/components/processes-and-threads.html

Page 50: 進階應用程式設計 2014/12/21

⼿手動結束:Task Killer⼿手動滑開的時候:

Task 中的所有 Activity 會被結束, 如果某程序已經沒有其他正在執⾏行的元件,該程序會被結束。

Page 51: 進階應用程式設計 2014/12/21

⼿手動結束:Task Killer⼿手動滑開的時候:

Task 中的所有 Activity 會被結束, 如果某程序已經沒有其他正在執⾏行的元件,該程序會被結束。

也就是說,滑掉不保證⼀一定會導致程序結束;沒滑掉的也不⾒見得還在執⾏行。

Page 52: 進階應用程式設計 2014/12/21

⼿手動結束:Task Killer⼿手動滑開的時候:

Task 中的所有 Activity 會被結束, 如果某程序已經沒有其他正在執⾏行的元件,該程序會被結束。

也就是說,滑掉不保證⼀一定會導致程序結束;沒滑掉的也不⾒見得還在執⾏行。

所以它叫 recent apps,不稱為 running apps。

Page 53: 進階應用程式設計 2014/12/21

認識資源檔MyProject/ src/ MyActivity.java res/ layout/ main.xml info.xml layout-land/ main.xml info.xml

在 Android 上,可以針對不同的裝置,提供不同的 佈局、圖⽚片、字串、動畫、⾵風格等各種資源,藉以 呈現不同的 UI。

http://developer.android.com/guide/topics/resources/providing-resources.html

Page 54: 進階應用程式設計 2014/12/21

在程式碼中使⽤用資源

資源檔在 Android 編譯流程中會產⽣生成 R.java

Page 55: 進階應用程式設計 2014/12/21

圖形使⽤用者介⾯面

Page 56: 進階應用程式設計 2014/12/21

視窗 (Window) 圖形使⽤用者介⾯面的基礎

Macintosh (1984)

Page 57: 進階應用程式設計 2014/12/21
Page 58: 進階應用程式設計 2014/12/21
Page 59: 進階應用程式設計 2014/12/21

視窗內容 (Window Content): 完全由開發者⾃自⾏行設計的內容介⾯面

Page 60: 進階應用程式設計 2014/12/21

視窗裝飾 (Window Decoration): 由視窗管理員繪製的介⾯面,提供諸如 標題列、最⼤大化、最⼩小化、關閉、狀態列、⼤大⼩小調整等功能

Page 61: 進階應用程式設計 2014/12/21

Android 也有視窗嗎?

Page 62: 進階應用程式設計 2014/12/21

視窗內容

瀏覽列 (navigation bar)

狀態列 (status bar)動作列 (action bar)

Page 63: 進階應用程式設計 2014/12/21

控制項 (Widget / Control / Component / View)

Page 64: 進階應用程式設計 2014/12/21

常⾒見的佈局 (Layout)⽔水平

垂 直

格狀

Page 65: 進階應用程式設計 2014/12/21

控制項/佈局階層

Page 66: 進階應用程式設計 2014/12/21
Page 67: 進階應用程式設計 2014/12/21

Hierarchy Viewer (Demo)

Page 68: 進階應用程式設計 2014/12/21

Lab 1 - 佈局練習

試做出如左圖形式之佈局, 不需實作功能。

Page 69: 進階應用程式設計 2014/12/21

事件傳遞

Button.onTouchEvent() 該如何實作?

Page 70: 進階應用程式設計 2014/12/21

事件傳遞

public void onTouchEvent() {mCalculator.onClick();

}

Page 71: 進階應用程式設計 2014/12/21

事件傳遞

public void onTouchEvent() {mCalculator.onClick();

}

如何設定 mCalculator?

Page 72: 進階應用程式設計 2014/12/21

事件傳遞

public void onTouchEvent() {mCalculator.onClick();

}

如何設定 mCalculator?

如何⽀支援 Calculator 以外的型別?

Page 73: 進階應用程式設計 2014/12/21

事件傳遞

public void onTouchEvent() {mCalculator.onClick();

}

如何設定 mCalculator?

如何⽀支援 Calculator 以外的型別?

觀察者模式 (Observer Pattern)

Page 74: 進階應用程式設計 2014/12/21

觀察者模式

Page 75: 進階應用程式設計 2014/12/21

觀察者模式Button

Page 76: 進階應用程式設計 2014/12/21

觀察者模式ButtonOnClickListener

Page 77: 進階應用程式設計 2014/12/21

觀察者模式ButtonOnClickListener

MyOnClickListener

Page 78: 進階應用程式設計 2014/12/21

public class MyOnClickListener implements OnClickListener {public void onClick(View v) {

...}

}

實作觀察者

Page 79: 進階應用程式設計 2014/12/21

public class MyOnClickListener implements OnClickListener {public void onClick(View v) {

...}

}

實作觀察者

button.setOnClickListener(new MyOnClickListener());註冊觀察者

Page 80: 進階應用程式設計 2014/12/21

public class MyOnClickListener implements OnClickListener {public void onClick(View v) {

...}

}

實作觀察者

button.setOnClickListener(new MyOnClickListener());註冊觀察者

public boolean onTouchEvent(MotionEvent event) {if (...) {

for (OnClickListener listener : mListeners) {listener.onClick(this);

}return true;

}return false;

}

通知觀察者 (在 Framework 內)

Page 81: 進階應用程式設計 2014/12/21

接收點擊事件

+

或者

Page 82: 進階應用程式設計 2014/12/21

Lab 2 - 點擊事件

實作主要功能

Page 83: 進階應用程式設計 2014/12/21

Lenna ⼜又來了

loadLennaV1

Page 84: 進階應用程式設計 2014/12/21

Lenna ⼜又來了

loadLennaV1

Page 85: 進階應用程式設計 2014/12/21

Lenna ⼜又來了

loadLennaV1

loadLennaV2

Page 86: 進階應用程式設計 2014/12/21

Lenna ⼜又來了

loadLennaV1

loadLennaV2

Page 87: 進階應用程式設計 2014/12/21

Lenna ⼜又來了

loadLennaV1

loadLennaV2

loadLennaV3

Page 88: 進階應用程式設計 2014/12/21

Lenna ⼜又來了

loadLennaV1

loadLennaV2

loadLennaV3

Page 89: 進階應用程式設計 2014/12/21

Lenna ⼜又來了

loadLennaV1

loadLennaV2

loadLennaV3

loadLennaV4

Page 90: 進階應用程式設計 2014/12/21

AsyncTask

在背景執⾏行緒執⾏行 耗時間的任務,再適當 透過主執⾏行緒更新 UI

這圖⼀一看就知道⼤大陸網站偷來的...

Page 91: 進階應用程式設計 2014/12/21

Lab 3 - BMI 計算器實作⼀一 App,讓使⽤用者輸⼊入⾝身⾼高、體重,算出其 BMI。

Page 92: 進階應用程式設計 2014/12/21

實作⼀一 App,讓使⽤用者輸⼊入⾝身⾼高、體重,算出其 BMI。

Lab 3 - 沒品 BMI 計算器

Page 93: 進階應用程式設計 2014/12/21

實作⼀一 App,讓使⽤用者輸⼊入⾝身⾼高、體重,算出其 BMI。

Lab 3 - 沒品 BMI 計算器

• 若 BMI < 18.5,在畫⾯面上顯⽰示⼀一隻猴⼦子的圖⽚片,並⽤用 Toast 秀出「死猴⼦子,你太瘦了!」

Page 94: 進階應用程式設計 2014/12/21

實作⼀一 App,讓使⽤用者輸⼊入⾝身⾼高、體重,算出其 BMI。

Lab 3 - 沒品 BMI 計算器

• 若 BMI < 18.5,在畫⾯面上顯⽰示⼀一隻猴⼦子的圖⽚片,並⽤用 Toast 秀出「死猴⼦子,你太瘦了!」

• 若 BMI > 24,在畫⾯面上顯⽰示⼀一隻豬的圖⽚片,並⽤用 Toast 秀出「⼋八戒,該減肥了!」

Page 95: 進階應用程式設計 2014/12/21

實作⼀一 App,讓使⽤用者輸⼊入⾝身⾼高、體重,算出其 BMI。

Lab 3 - 沒品 BMI 計算器

• 若 BMI 介於兩者之間,在畫⾯面上顯⽰示⼀一隻河童的圖⽚片,並⽤用 Toast 秀出「不是猴⼦子不是豬,你沙悟淨唷!」

• 若 BMI < 18.5,在畫⾯面上顯⽰示⼀一隻猴⼦子的圖⽚片,並⽤用 Toast 秀出「死猴⼦子,你太瘦了!」

• 若 BMI > 24,在畫⾯面上顯⽰示⼀一隻豬的圖⽚片,並⽤用 Toast 秀出「⼋八戒,該減肥了!」

Page 96: 進階應用程式設計 2014/12/21

期末專案

⾃自由發揮準備單⾴頁簡報: 1. App 簡介 2. 組員名單及負責的功能