1. Android UI設計與元件控制 2. Activity與生命週期管理 3. 事件處理與多執行緒程式設計 4. 多媒體與繪圖功能介紹 5. 檔案資料儲存與資料庫應用設計 6. 網際網路連線資料傳輸設計

1. ANDROID
智慧型⼿手機程式設計
思創軟體 / 林彥宏
資深軟體⼯工程師
http://lyhcode.info
基礎實作課程

2. 建⽴立開發環境

3. ADT Bundle
• developer.android.com/sdk
• Eclipse IDE with built-in ADT
(Android DeveloperTools)

4. DDMS
Dalvik Debug Monitor Server

5. Android Screen Monitor
http://goo.gl/mnMeaS
java -jar asm.jar
ctrl + 1 = 100%
ctrl + 7 = 75%
ctrl + 5 = 50%
縮放
執⾏行

6. AirDroid
Install “AirDroid”
from
Google Play Store

7. 線上免費課程 from Coursera
Programming Mobile Applications for Android Handheld Systems

8. Android App 原始碼範例
https://github.com/aporter/coursera-android
從 GitHub 網站下載

9. 第⼀一課

10. 打造使⽤用者介⾯面

11. Activity
Life Cycle

12. UI
友善的

15. UI 的設計⽅方式
• 程序式（procedural）
在程式碼動態產⽣生畫⾯面 UI 元件
• 宣告式（declarative）
在 Layout XML 定義畫⾯面 UI 元件

16. 指
尖
操
作
⾏行
為

17. 手機程式的調色盤
Holo

18. Colors

19. Generator

20.
Action

21. Bar

22. Style

23. Generator

24.
Adobe

25. Color

26. CC

27. Create a new Android Project
• Target SDK:Android 4.x
• Using Blank Activity

28. 設定 API Level
• 編輯AndroidManifest.xml
• 設定 API Level 版本代號
uses-sdk
android:minSdkVersion=16
android:targetSdkVersion=16 /

29. Android API Level 對照表

30. • Change Layout =
LinearLayout
• Add RadioButton
• Add Button
• AddTextView

31. 畫⾯面佈置
• 修改 res/layout/activity_main.xml
• 調整 layout_width 為 fill_parent
Button
android:id=@+id/button1
android:layout_width=fill_parent
android:layout_height=wrap_content
android:onClick=showLocation
android:text=查詢地點 /

32. • Wrap Radio Buttons
with RadioGroup

33. Click Event
1
2
3
Button ... android:onClick=“clickOpenMap” ...
public void clickOpenMap(View view) { ...
button1.setOnClickListener(new Button.OnClickListener() { ...
4
class MyButtonListener implements OnClickListener
public class MainActivity extends Activity implements OnClickListener
按鈕點擊事件的四種處理⽅方式

34. 使⽤用 OnClickListener 類別
1. button1.setOnClickListener(new Button.OnClickListener() {
2. @Override
3. public void onClick(View v) {
4. ...
5. }
6. });
按鈕點擊後會執⾏行 onClick() ⽅方法

35. Show Location inTextView
1. public void showLocation(View view) {
2. switch (radioGroup1.getCheckedRadioButtonId()) {
3. case R.id.radioButton1:
4. textView1.setText(澄清湖的位置是 22.660665,120.3509745);
5. break;
6. case R.id.radioButton2:
7. textView1.setText(⻄西⼦子灣的位置是 22.629167,120.262778);
8. break;
9. }
10.}

36. Intent
1. Intent intent = new Intent();
2. intent.setClass(
3. MainActivity.this,
4. MainActivity2.class);
5. startActivity(intent);
參考資料
• http://ccckmit.wikidot.com/ga:intentexample

37. 常⾒見的 Intent ⽤用法
• http://google.com
• geo:22.660,120.350
• tel: 0800080123
打開網站
打開地圖
撥打電話

38. Open Map with Intent
1. public void openMap(View view) {
2. Uri uri;
3. Intent intent;
4. switch (radioGroup1.getCheckedRadioButtonId()) {
5. case R.id.radioButton1:
6. uri = Uri.parse(geo:22.660,120.350);
7. intent = new Intent(Intent.ACTION_VIEW, uri);
8. startActivity(intent);
9. break;
10. }
11.}

39. Intent Example
⼿手機常⽤用功能快捷鍵
程
式
實
作
【學習⺫⽬目標】
1. Button
2. Intent

40. RadioButton
Example
景點查詢⼯工具
程
式
實
作
【學習⺫⽬目標】
1. RadioButton
2. TextView
3. Intent

41. 第⼆二課

42. 顯⽰示訊息與偵錯記錄
Logging / Debugging

43. Dialog
對話框
彈出後等待使⽤用者確認後才消失

44. Dialog Example
1. AlertDialog.Builder builder;
2. builder = new AlertDialog.Builder(view.getContext());
4. builder
5. .setTitle(“Something Wrong)
6. .setMessage(“Incorrect value, try again.”)
7. .setNeutralButton(OK, null)
8. .create()
9. .show();
}builder
style

45. Toast
Toast.makeText(view.getContext(), You've 3 messages., Toast.LENGTH_LONG);
message body
停留時間彈出後過幾秒⾃自動消失

46. 訊息記錄（LOG）
• 給程式開發與測試⼈人員觀察程式執⾏行狀態
• 測試與除錯階段的重要資訊來源

47. 輸出除錯訊息
System.out.println
Log.println tagpriority
使⽤用標準輸出（stdout）
使⽤用 Android 系統的 Log 機制
缺點：無法對訊息進⼀一步分類

48. 訊息類型
PRIORITY 名稱 ⽤用途
DEBUG 僅供除錯
INFORMATION ⼀一般訊息
WARNING 資料或處理異常
ERROR 嚴重的錯誤；可能導致程式終⽌止

49. 使⽤用 Log 類別
Log.println(Log.WARN, MyActivity, User account not exists.);
tagpriority message body

50. Tag 的命名慣例
public class MainActivity extends Activity {
private static final String TAG = MainActivity;
Log.println(Log.WARN, TAG, User account not exists.);
…
通常使⽤用該記錄存在的類別名稱（Class Name）

51. Log 類別提供的⽅方法簡寫
• v(String, String) (verbose)
• d(String, String) (debug)
• i(String, String) (information)
• w(String, String) (warning)
• e(String, String) (error)
依其重要程度（優先度）區分
}常⽤用

52. 使⽤用 LogCat 監看除錯訊息
依照 Priority 篩選過濾

53. Dialog andToast
Example
景點查詢⼯工具
程
式
實
作
【學習⺫⽬目標】
1. Dialog /Toast
2. Log

54. 第三課

55. 多執⾏行緒與網路存取

56. 應⽤用程式沒有回應
• 程式執⾏行超過五秒，UI 仍未能與使⽤用者互動
• 常發⽣生在：
• 處理複雜的演算法
• 等待網路傳輸資料
Application Not Responding (ANR)

57. 處理 ANR 的⽅方法
• Thread / Runnable
• AsyncTask
• Handler
多執⾏行緒程式設計（Multithreading）

58. AsyncTask 範例
1. private class MyTask extends AsyncTaskVoid, Void, Void {
2. protected Long doInBackground(...) {
3. ...
4. }
5. }
KeepingYour App Responsive
http://developer.android.com/training/articles/perf-anr.html

59. 程式實作
• 修改 res/layout/activity_main.xml
• 加⼊入 Button 「顯⽰示地圖」
• 加⼊入 ImageView 在畫⾯面下⽅方

61. activity_main.xml
ImageView
android:id=@+id/imageView1
android:layout_width=fill_parent
android:layout_height=150dp
android:src=@drawable/ic_launcher /
Button
android:id=@+id/button3
android:layout_width=fill_parent
android:layout_height=wrap_content
android:onClick=showMap
android:text=顯⽰示地圖 /
Button
ImageView

62. findViewById
public class MainActivity extends Activity {
private RadioGroup radioGroup1;
private TextView textView1;
private ImageView imageView1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
radioGroup1 = (RadioGroup) this.findViewById(R.id.radioGroup1);
textView1 = (TextView) this.findViewById(R.id.textView1);
imageView1 = (ImageView) this.findViewById(R.id.imageView1);
}

63. 權限設定
使⽤用 Manifest 權限設定⼯工具

64. 權限設定（XML定義）
• 編輯 AndroidManifest.xml
uses-permission
android:name=android.permission.INTERNET/

65. 實作 showMap ⽅方法
public void showMap(View view) {
switch (radioGroup1.getCheckedRadioButtonId()) {
case R.id.radioButton1:
//...
break;
}
}

66. lat 與 lng 變數
Double lat = null, lng = null;
switch (radioGroup1.getCheckedRadioButtonId()) {
case R.id.radioButton1:
lat = 22.660;
lng = 120.350;
break;
}
if (lat != null lng != null) {
//...
}

67. AsyncTask 實作
if (lat != null lng != null) {
String url = ...;
new AsyncTaskString, Void, Drawable() {
@Override
protected Drawable doInBackground(String... params) {
try {
InputStream is = new URL(params[0]).openStream();
return Drawable.createFromStream(is, src);
} catch (Exception ex) {
ex.printStackTrace();
}
return null;
}
@Override
protected void onPostExecute(Drawable result) {
if (result != null) {
imageView1.setImageDrawable(result);
}
super.onPostExecute(result);
}
}.execute(url);
}

68. 2. 點擊「顯⽰示地圖」
1. 選擇景點
3. 地圖顯⽰示

69. 加⼊入「查詢天氣」按鈕
Button
android:id=@+id/button4
android:layout_width=fill_parent
android:layout_height=wrap_content
android:onClick=showWeather
android:text=查詢天氣 /

70. showWeather ⽅方法實作
public void showWeather(View view) {
Double lat = null, lng = null;
switch (radioGroup1.getCheckedRadioButtonId()) {
case R.id.radioButton1:
lat = 22.660;
lng = 120.350;
break;
case R.id.radioButton2:
lat = 22.629;
lng = 120.262;
break;
}
}

71. OpenWeatherMap API
http://openweathermap.org

72. Web Services 存取天氣資料
http://api.openweathermap.org/data/2.5/weather?
lat=22.629lon=120.262units=metric
http://api.openweathermap.org/data/2.5/weather?
q=Taipei,TWunits=metric

73. OpenWeatherMap
Web Services APIAndroid App
HTTP Request
Data Response
XML, JSON, HTML, …

74. AsyncTask 實作
if (lat != null lng != null) {
String url = ...;
new AsyncTaskString, Void, String() {
@Override
protected String doInBackground(String... params) {
//...
}
@Override
protected void onPostExecute(String json) {
//...
}
}.execute(url);
}

75. 存取 HTTP Web Services
protected String doInBackground(String... params) {
try {
BufferedReader reader = new BufferedReader(
new InputStreamReader(new URL(params[0]).openStream()));
String json = reader.readLine();
reader.close();
return json;
} catch (Exception ex) {
ex.printStackTrace();
}
return null;
}

76. 解析 JSON 資料
protected void onPostExecute(String json) {
if (json != null) {
try {
JSONObject jsonObject = new JSONObject(json);
Double temp = jsonObject.getJSONObject(main).getDouble(temp);
textView1.setText(temp + ℃);
}
catch (Exception ex) {
ex.printStackTrace();
}
}
super.onPostExecute(json);
}

77. 2. 點擊「查詢天氣」
1. 選擇景點
3. 顯⽰示地區氣溫

78. 第四課

79. 建⽴立新專案 MyBrowser

80. activity_main.xml

81. MainActivity
public class MainActivity extends Activity {
EditText editText1;
WebView webView1;
Button button1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
editText1 = (EditText) this.findViewById(R.id.editText1);
webView1 = (WebView) this.findViewById(R.id.webView1);
button1 = (Button) this.findViewById(R.id.button1);
}

82. 權限設定

83. WebView 設定
//設定只⽤用 WebView 開啟網址
webView1.setWebViewClient(new WebViewClient());
//打開 JavaScript
webView1.getSettings().setJavaScriptEnabled(true);

84. 按鈕 onClick 設定
Button
android:id=@+id/button1
android:layout_width=wrap_content
android:layout_height=wrap_content
android:layout_alignBottom=@+id/editText1
android:layout_alignRight=@+id/webView1
android:text=好⼿手氣
android:onClick=loadWebPage /

85. public void loadWebPage(View view) {
webView1.loadData(Loading..., text/plain, UTF-8);
String keyword = editText1.getText().toString();
try {
keyword = URLEncoder.encode(keyword, UTF-8);
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String url = http://ajax.googleapis.com/ajax/services/search/web?v=1.0q= + keyword;
new AsyncTaskString, Void, String() {
@Override
protected String doInBackground(String... params) {
return null;
}
@Override
protected void onPostExecute(String json) {
}
}.execute(url);
}

86. doInBackground
@Override
protected String doInBackground(String... params) {
try {
InputStream stream = new URL(params[0]).openStream();
InputStreamReader isr = new InputStreamReader(stream, UTF-8);
BufferedReader reader = new BufferedReader(isr);
String json = reader.readLine();
return json;
} catch (Exception ex) {
ex.printStackTrace();
}
return null;
}

87. onPostExecute
@Override
protected void onPostExecute(String json) {
if (json != null) {
try {
JSONObject jsonObject = new JSONObject(json);
JSONArray results = jsonObject.getJSONObject(responseData).getJSONArray(results);
if (results.length() 0) {
String url = results.getJSONObject(0).getString(url);
webView1.loadUrl(url);
}
else {
webView1.loadData(Not found..., text/plain, UTF-8);
}
}
catch (Exception ex) {
ex.printStackTrace();
}
}
}

88. 儲存紀錄
this.getPreferences(MODE_PRIVATE).edit().putString(LAST_QUERY,
editText1.getText().toString());

89. 讀取記錄
editText1.setText(this.getPreferences(MODE_PRIVATE).getString(LAST_QUERY,
PCHome));

91. 建⽴立新專案

92. 2D 繪圖
setContentView(new View(this) {
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
paint.setColor(Color.GREEN);
canvas.drawCircle(100, 100, 20, paint);
}
});

93. 使⽤用 Canvas 製作動畫
• 使⽤用 onDraw 更新畫⾯面
• 缺點：每次都要重新繪製整個畫⾯面

94. public class MyView extends View implements Runnable {
private Handler handler = new Handler();
private int x = 0;
private int y = 0;
private int offsetX = 5;
private int offsetY = 5;
public MyView(Context context) {
super(context);
this.setFocusable(false);
new Thread(this).start();
}
@Override
protected void onDraw(Canvas canvas) {
}
@Override
public void run() {
}
}

95. @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
paint.setColor(Color.GREEN);
canvas.drawCircle(x+=offsetX, y+=offsetY, 20, paint);
if (x canvas.getWidth() || x 0) {
offsetX = -offsetX;
}
if (y canvas.getHeight() || y 0) {
offsetY = -offsetY;
}
}

96. @Override
public void run() {
while (true) {
handler.post(new Runnable() {
@Override
public void run() {
invalidate();
}
});
}
}

98. Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.BLACK);
canvas.drawPaint(paint);
int clockX = canvas.getWidth() / 2;
int clockY = canvas.getHeight() / 2;
int clockRadius = (canvas.getWidth() - 150) / 2;
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(3);
paint.setColor(Color.RED);
canvas.drawCircle(clockX, clockY, clockRadius, paint);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
canvas.drawCircle(clockX, clockY, 10, paint);

100. private double getAngle(int index, int size) {
return Math.PI / size * 2 * (index - size / 4);
}
private int getStopX(int x, double angle, int radius) {
return (int)(x + Math.cos(angle) * radius);
}
private int getStopY(int y, double angle, int radius) {
return (int)(y + Math.sin(angle) * radius);
}