Embed Size (px)
DESCRIPTION
人機介面 Android Programing. 進一步介紹開發環境. Emulator. Debug Tools. 建立第一個 App – BMI. Demo Code. Plan & Design. Coding- UI 描述 與設計. 程式流程解讀. 與使用者對話 - Dialog. Activities & Intent. Data Storage. 多媒體 - 圖片與聲音. 後續延伸 -Web Service. Emulator. 為什麼需要模擬器 ? 方便開發 特定情況下 , 可透過模擬器模擬 (EX: 兩支手機 ) - PowerPoint PPT Presentation
Citation preview
人機介面Android Programing
1
進一步介紹開發環境
建立第一個 App – BMI
Emulator
Debug Tools
Plan & Design
Coding- UI 描述 與設計
程式流程解讀
與使用者對話 - Dialog
Activities & Intent
Data Storage
多媒體 - 圖片與聲音
Demo Code
後續延伸 -Web Service
Emulator
為什麼需要模擬器 ?– 方便開發– 特定情況下 , 可透過模擬器模擬 (EX: 兩支手
機 )
啟動與使用 Android 模擬器更改模擬器的設定 - 外觀 , 方向切換
練習 : Emulator's Communication
Reference:http://developer.android.com/guide/developing/tools/emulator.html
ADB (android debug bridge)
甚麼是 adb ?相關指令 :– 檔案檢視 -ls– 將檔案上傳到模擬器 - adb push 001.jpg /sdcard– 將檔案從模擬器上下載 - adb pull /sdcard/001.jpg– 刪除檔案 rm xxx.jpg– 建立模擬器– 操作模擬器– 安裝 apk
4
關於 BUG
5
Developers
Bug
Android 提供的 Debug 環境Debug View設定 / 觀察中斷點留 Log : Logcat– Logcat with Console monitor
TraceView
6
開發工具簡介 - DDMS
透過 DDMS 模擬手機的各種狀況– try: 傳簡訊– try: 打電話Reference : http
://code.google.com/intl/zh-TW/android/reference/ddms.html
7
REFERENCE:Debug Tasks – android/docs/guide/developing/debug-tasks.html
Logcat– http://developer.android.com/intl/zh-TW/guide/developing/tools/adb.ht
ml#logcat
• Filtering Log Output• Controlling Log Output Format
輔助開發工具 -OpenIntents : – http://code.google.com/p/openintents/wiki/SensorSimulator
使用 Android 虛擬機器– http://code.google.com/p/androidbmi/wiki/PlayEmulator
ADB 指令 :– http://developer.android.com/intl/zh-TW/guide/developing/tool
s/adb.html
8
進一步介紹開發環境
建立第一個 App – BMI
Emulator
Debug Tools
Plan & Design
Pratice01- UI LayOut
Pratice02- 完成程式邏輯
Pratice03- 進行重構
Pratice05-Activities & Intent
Pratice06-Data Storage
Pratice07- 圖片與動畫
Pratice04-Menu,Dialog
怎麼做一個 App?
Reference : http://whoswho.openfoundry.org/workshop/details/61-kalug--android-.html
今日目標 -
完成一個簡單的應用程式–Weight / BMI 計算器– 參考來源 :• http://sites.google.com/site/gasodroid/Home
/androidentry3
11
BMI ?
身高體重指數（又稱身體質量指數，英文為 Body Mass Index ，簡稱 BMI ）是一個計算值，主要用於統計用途。當我們需要比較及分析一個人的體重對於不同高度的人所帶來的健康影響時， BMI 值是一個中立而可靠的指標
12
Plan - 想法輸入身高與體重 , 輸出 BMI 值 , 以及建議記下每天的體重可以設定目標 , 決定日期與目標體重 , 在每天輸
入時 , 告訴我一些建議提醒功能 : 顯示一個小機器人 , 變胖時跟著變胖 ,
變瘦時跟著變瘦 , 同時發出鼓勵 / 沮喪的音效提醒功能 : 透過提醒列 , 提醒我監督功能 : 如果一直過重超過 xx 天 , 自動送出
簡訊 (SMS) 告訴朋友anything else ?
13
先完成 Prototype:
輸入身高與體重 , 取得 BMI 值的建議顯示結果 , 以及建議調整顯示內容的方式– 資料儲存– 動畫顯示
14
針對目標 , 我們要做的事 :需求分析– 輸入
• 體重• 身高
– 輸出• BMI 結果• 建議
LayOut- 介面設計 , UI 決定 , 操作方式決定– 各種可用介面元件列表
• http://developer.android.com/guide/tutorials/views/index.html– Edit Text
• http://developer.android.com/intl/zh-TW/reference/android/widget/EditText.html– Get/setText method– EditText Attributes
» android:numeric– TextView– Button 15
針對目標 , 我們要做的事 :需求分析– 輸入
• 體重 (EditText)• 身高 (EditText)
– 輸出• BMI 結果 ((TextView)• 建議 (TextView)
LayOut- 介面設計 , UI 決定 , 操作方式決定– 各種可用介面元件列表
• http://developer.android.com/guide/tutorials/views/index.html– Edit Text
• http://developer.android.com/intl/zh-TW/reference/android/widget/EditText.html– Get/setText method– EditText Attributes
» android:numeric– TextView– Button 16
進一步介紹開發環境
建立第一個 App – BMI
Emulator
Debug Tools
Plan & Design
Pratice01- UI LayOut
Pratice02- 完成程式邏輯
Pratice03- 進行重構
Pratice05-Activities & Intent
Pratice06-Data Storage
Pratice07- 圖片與動畫
Pratice04-Menu,Dialog
專案架構檢視
18
最初的程式碼
19
LayOut
Editbox : 輸入身高Editbox: 輸入體重Button: 開始計算TextView: 顯示結果TextView: 顯示建議
20
長這樣
21
進一步介紹開發環境
建立第一個 App – BMI
Emulator
Debug Tools
Plan & Design
Pratice01- UI LayOut
Pratice02- 完成程式邏輯
Pratice03- 進行重構
Pratice05-Activities & Intent
Pratice06-Data Storage
Pratice07- 圖片與動畫
Pratice04-Menu,Dialog
範例 (Project_Workshop)
Study02 : 完成程式邏輯部分 ,Study03 : 進行重構 ,Study04 : 加入選單 , 並且透過選單 , 建立
Dialog.Study05 : 建立 Activity , 並透過 Intent 呼叫 ,
以及 activity 之間的資料傳遞Study06 : – 1. Preference – 2. Daily widget Record ->SQLite
Study07 : Frame Animation 機制介紹23
目標 :
功能 :– 處理按下 " 確定 " 按鈕後 , 會發生的事 - 計算
BMI, 給予建議與結果實際上要做的事 : – 導入用到的模組、取得介面元件、對按鈕指定
動作。
24
開發期間可以參考的文件官方 Reference 文件– http://developer.android.com/intl/zh-TW/reference/pack
ages.html
官方的開發基礎教學文件• http://developer.android.com/intl/zh-TW/guide/index.html
有哪些 Views (LayOut 和 UI) 可以使用– http://developer.android.com/intl/zh-TW/guide/tutorials/views/index.ht
ml
<AndroidSDK 目錄 >\docs\ 底下有相同的文件 , 不用上網查也可以– EX: C:\Android\docs\
25
LayOut- 將描述字串抽離到 String.xml
" 請輸入身高 " 改到 Strings.xml 裡的 msg_Height"170" 改到 String.xml 裡的
value_Height.....
26
LayOut- 使 EditText 只能輸入數字EditText->Property-> Numeric, 選擇
Integer
27
Code- 入口
28
Code- UI 類別的宣告
29
宣告一個 Button Instance
Code- 與 UI 資源檔的Binding
存取 UI 的識別符號
30
–main.xml
– 程式
Button 事件處理的方式 - Listener
31
程式邏輯 - 計算 BMI 值的實作
32
Result
33
進一步介紹開發環境
建立第一個 App – BMI
Emulator
Debug Tools
Plan & Design
Pratice01- UI LayOut
Pratice02- 完成程式邏輯
Pratice03- 進行重構
Pratice05-Activities & Intent
Pratice06-Data Storage
Pratice07- 圖片與動畫
Pratice04-Menu,Dialog
重構 - 讓程式碼更容易閱讀
findViews()SetListener()重新命名變數針對建議描述的部分 -> 新增 XML 來描述字串
35
建立 Alert Dialog
http://developer.android.com/intl/zh-TW/reference/android/app/Dialog.htmlhttp://developer.android.com/intl/zh-TW/guide/topics/ui/dialogs.html
36
建立 Alert Dialog
37
建立清單 , 透過清單呼叫 Dialog
38
39
40
41
Result
42
Result
43
進一步介紹開發環境
建立第一個 App – BMI
Emulator
Debug Tools
Plan & Design
Pratice01- UI LayOut
Pratice02- 完成程式邏輯
Pratice03- 進行重構
Pratice05-Activities & Intent
Pratice06-Data Storage
Pratice07- 圖片與動畫
Pratice04-Menu,Dialog
目標 :
改良顯示的方式 - 我們想將結果獨立顯示在新的頁面
將會使用到 :– another Activity– Intent
Reference : http://code.google.com/p/androidbmi/wiki/LifeCycle
先來複習 Activity
Activity 的生命週期獨立 Activity / 相依 Activity 的差異 ,
以及使用時機– EX: 2 Activity • 1. MainActivity• 2. Report
46
– MainActivity: onCreate -> onStart -> onResume
• 呼叫 Report: onPause(1) -> onCreate(2) -> onStart(2) -> onResume(2) -> onStop(1)
• 回到 MainActivity :onPause(2) -> onRestart(1) -> onStart(1) -> onResume(1) -> onStop(2) -> onDestroy(2) 47
開始 - 預備建立新的 Activity
5.1 建立新的 Activity class5.2 建立新的 LayOut xml file
48
Intent 的使用 - 呼叫新的 Activity, 資料的傳遞
5.4. Intent(意圖 ) 初始化5.5 透過 Bundle 記錄要傳遞的參數5.6. 將 Intent 傳入 Android 框架中–修改 AndroidManifest.xml• 註冊 Activity• 事先註明會用到的服務
49
Intent 的使用 - 呼叫新的 Activity, 資料的傳遞
AndroidManifest.xml– 註冊 Activity,service, receiver,provider – uses-permission : 存取 SMS 、能否存取聯絡簿、相
機功能 ,…Reference– Android manifest • http://developer.android.com/reference/andr
oid/R.styleable.html#AndroidManifest– Intent Action • http://developer.android.com/reference/andr
oid/content/Intent.html
50
Result
51
進一步介紹開發環境
建立第一個 App – BMI
Emulator
Debug Tools
Plan & Design
Pratice01- UI LayOut
Pratice02- 完成程式邏輯
Pratice03- 進行重構
Pratice05-Activities & Intent
Pratice06-Data Storage
Pratice07- 圖片與動畫
Pratice04-Menu,Dialog
目標儲存資料方式 , 甚麼時候適合用哪種方式 ( 身高 ,
體重記錄的方式 )– Preference– text file read/write– SQLite
我們想做到的 ..– 把不會變的身高記錄下來
• Preference
– 把體重按照日期 , 記錄下來• Database
53
Preference- 取得 / 記錄偏好設定
Step01Step02
54
[Optional]Database
Reference: HandOut_Day2 : 6-4~6-8記錄每天的體重 - SQL Lite on Android日期的選擇 - DatePicker UI 的使用
55
進一步介紹開發環境
建立第一個 App – BMI
Emulator
Debug Tools
Plan & Design
Pratice01- UI LayOut
Pratice02- 完成程式邏輯
Pratice03- 進行重構
Pratice05-Activities & Intent
Pratice06-Data Storage
Pratice07- 圖片與動畫
Pratice04-Menu,Dialog
目標初探 Android 中的圖像處理 - 瞭解圖像的基本操作
57
變胖或變瘦的動畫顯示
ImageView Animation Script
58
Step:
將圖形匯入 resource/drawable建立 Frame Animation XML 在 report.xml 中加入 ImageView在程式中建立實體– ImageView– AnimationDrawable
設定動畫播放的 xml, 指定OnTouch Event 中觸發動畫事件
59
Pratice
開啟 Pratice_Study07, 將圖形匯入 , 建立 anim/, 撰寫 XML編輯動畫行為 , 完成程式碼中對動畫物件的操作
完成”太瘦”以及”剛剛好”兩段動畫 ,加入到程式中[Optional] 加入聲音
60
開發演練
進階應用介紹
在程式中使用 Location
使用 Location Manager 取得經緯度直接使用 MapView– 取得 Google Map 授權金鑰– 在程式中使用 MapView
62
使用locationManager實作 LocationLinster– void onLocationChanged(Location)– voidonProviderDisabled(String)– void onProviderEnabled(String)– void onStatusChanged(String, int,
Bundle)
63
Example
實作 LocationLinsterpublic class MapActivity extends Activity implements LocationListener {
public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);
}
@Overridepublic void onLocationChanged(Location location) {
...}...
}
64
Example
使用 LocationManagerprivate LocationManager mgr;
// 使用現在最好的定位方式mgr = (LocationManager) getSystemService(LOCATION_SERVICE);Criteria criteria = new Criteria();best = mgr.getBestProvider(criteria, true);mgr.requestLocationUpdates(best, updateTime, 10, this);
// 僅使用 GPS 定位// mgr.requestLocationUpdates(LocationManager.GPS_PROVIDER, updateTime, 10, this);// 僅使用 Network(wifi 或是 cell tower) 定位// mgr.requestLocationUpdates(LocationManager.NETWORK_PROVIDER, updateTime, 10, this);
65
Example
實作 onLocationChanged@Overridepublic void onLocationChanged(Location location) {
latView.setText(getString(R.string.lat) + location.getLatitude());longView.setText(getString(R.string.longt) + location.getLongitude ());
proView.setText(getString(R.string.provider) + location.getProvider());
}
66
Example - Result
67
記得設定權限 修改 AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/><uses-permission android:name="android.permission.INTERNET"/><!－—如果要使用 GPS 定位 --><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
使用 Google Map API
取得 Google Map 授權金鑰在程式中使用 MapView
69
取得 Google Map API 金鑰
70
1st •Execute DOS and get MD5•keytool –list –keystore “keystore path”
2nd •http://code.google.com/android/maps-api-signup.html•Enter MD5
3rd •Use the Maps API key in your MapActivity or MapView
Window → Preference → Android → Build → Default
debug keystore
Find MapView
MapView map =(MapView) findViewById(R.id.myMapView);
MapController mc = map.getController();
71
設定 Google Library 與權限 修改 AndroidManifest.xml
<manifest>
<application > <uses-library android:name="com.google.android.maps" /></application>
<uses-permission android:name="android.permission.INTERNET” >
</manifest>
Google Map API Result
73
