c android - 碁峰資訊epaper.gotop.com.tw/pdfsample/ael013100.pdfchapter 10 android...

CHAPTER 1100

Android 的學習秘訣

從 Android 的開發工具就可得知，要學習 Android 的開發，至少須同時掌

握好三個要素：

1. Java 程式語言：是否對於本書 Part 1 的基本語法以及 Part 2 的物件導

向程式設計能融會貫通並運用自如？

2. Eclipse SDK：是否對於 Android SDK 所選為附加（Add-in）平台的

Eclipse 能有效處理相關編輯、編譯、執行、甚至系統更新的問題？

對於 Android SDK 所提供的調色板（Template）GUI 設計工具，能否

妥善運用？

3. Android API：對於 Android 推陳出新的 API，特別是 SDK 工具包內

所包含的範例 Sample 如 APIDemo 等，能否加以參考運用得宜？

不僅如此，Android 的學習還有其它的秘訣，像是：

官方網站1：包含參考文件（Reference）、學習教程（Tutorials）、還有

影片（Videos）與部落格（Blog）。

1 http://developer.android.com

第一次學 Android 就上手

從 Java 程式設計到行動裝置專題製作

10-2

第三方（Third-party）開放之開發工具：許多知名如臉書（Facebook）、噗浪（Plurk）、推特（Twitter）、Google+、Dropbox 等軟體都有提供。

專業書籍與補教課程：一般而言，書籍以靜態、課程以動態方式呈現。

本書則是希望能在觀念上透過實例對讀者有所幫助。

新興開發工具2：這種工具雖然某種程度看來屬於教育性質的開發工

具，但程式人員多少還是能從中學到一些觀念與技巧。

本章計畫以實例為讀者建立一些活用工具的觀念，由本章開啟 Part 3 之

『Android 必學技巧』，接著從架構、手機通訊工具、多媒體工具、地圖與導

航等面向呈現各種技巧，最後以一篇精彩的付費機制教學作為收尾，全力讓讀

者感覺物超所值！

10.1 學習 Android 的捷徑

不禁要問：『學習 Android 真有捷徑嗎？』筆者要帶大家以下方之 3+1的角度切入此議題：

Case 1：從移植 Java GUI 程式來看

Case 2：從引入高度整合之 GUI 元件來看

Case 3：從 Facebook SDK 的引入來看

Case 4：從運用新興開發工具來看

其實，從軟體工程（Software Engineering）的角度來看，就是希望能讓軟

體的『建設』好像蓋房子一樣，萬丈高樓平地起，是能夠一塊一塊地堆積起來

的，所以，模組化（Modularized）一直是這方面的最高指導原則。

而這四組案例將會帶給讀者怎麼樣的刺激與提示呢？

2 http://www.appinventorbeta.com/about/

10-3

Android 的學習秘訣 10

10.1.1 移植 Java GUI 程式

在第一章我們已經介紹過 Android SDK 如何協助開發者從無到有建立一

個 Hello 程式，它自動產生一個 java 檔以及一個 main.xml 資源檔，其中，

main.xml 可以同時以文字和圖形方式呈現，這有點類似 NetBeans 的作法。

例如，在第 9 章的時候我們就以 NetBeans 的調色板開發介面建立了一些

帶有 Frame 的 GUI 程式，現在，我們就嘗試將 9.3.2 的 ClientGUI 專案改成

Android 版的 HelloLogin 專案，如圖 10-1(a)所示，藉由 SDK 從無到有建立好

一個 HelloLogin Activity 框架之後，就可以在 src 與 res/layout 資料夾內各自找

到 .java 與 .xml 檔案，這時，讀者可以參考隨書光碟內的 HelloLogin 專案，嘗

試如圖 10-1(b)將相關 main.xml 文字拷貝到自己練習的專案，或是仿傚圖

10-1(c)的調色板編輯方式，將適當的元件配合適當的 LinearLayout 加以佈局。

LinearLayout 顧名思義就是以『線性佈局』元件，它是一種『袋狀』或稱

『容器』之元件，有垂直與水平兩種方向。以 10-1(c)為例， ID 文字標籤（在

此稱為 TextView）及其右側之文字區塊（在此稱為 EditText）兩者就應當以

『水平方向』的 LinearLayout 加以群組起來，以此類推，是所謂『適當』！

(a) (b)



10-4

(c)

圖10-1 HelloLogin 程式之設計： (a) .java 與 .xml 是主要編輯之對象； (b) res/layout

資料夾內的 main.xml 可以文字形式呈現； (c) main.xml 也可以圖形呈現。

相信在此過程中，對於原來已熟悉 Java GUI 程式的開發者應該特別有感

受，而它與 NetBeans 之開發環境比較起來，其異同列舉如下：

調色板威力仍待加強：例如，點兩下 Button 在 NetBeans 可以帶出『控

制函式樣板』之程式編輯畫面，但 Android SDK 並沒有作到

NetBeans 之內定版面（ layout）格式相當於 Android 為『AbsoluteLayout』，但 Android 之內定版面為『LinearLayout』

除了繪圖介面 (GUI)不同之外，基本上兩者皆支援相同的 Java 語法

和函式庫

因此，接著將 Java 的 ClientGUI 的連線部份移植到 HelloLoginV2，如圖

10-2 所示，兩者連線部份的程式都相同，但記得將 IP 從 127.0.0.1 改成 Server所在的實體或虛擬 IP，不能再用本機 IP，即使與 Server 同在一台電腦上。

10-5


(a) (b)

(c)

圖10-2 HelloLoginV2 程式之設計： (a)初始畫面； (b)登入成功； (c)以

TotalCommander 工具比較 ClientGUI 與 HelloLoginV2 兩者，其中連線部份的

Java 程式都相同。



10-6

10.1.2 引入高度整合之 GUI 元件

所謂『高度整合之 GUI 元件』是指『非低階』的 GUI 元件如 Button、TextView、EditText 等，而像是 VideoView、ImageSwitcher、MapView、TabHost等，通常整合多項功能於單一元件中。

後續篇章所介紹的 MapView，也就是我們在 PC 或手機上有名的 Google Map，它至少就整合了地圖、縮放、網路連線等功能於一身，這就是一種典型

的『高度整合之 GUI 元件』；另外，像是許多系統設定以及應用類程式都愛

用的 TabHost，也會在後續章節介紹。

在這一小節我們就以 VideoView 為例作示範，它的元件設計可以利用調

色板達成，如圖 10-3(a)所示，然而，光靠調色板來設計卻是不夠的。

原來媒體的播放無論是影像或是聲音都有一個播放介面稱作 Playback，其

主要功能有播放（Play）、暫停（Pause）、停止（Stop）、快轉（Forward）、

倒轉（Backward）等，卻需要以寫程式的方式來達成，如圖 10-3(b)所示。

(a)

10-7


(b)

(c) (d)

圖10-3 HelloVideo 程式之 VideoView 設計與使用： (a)選取調色板中的媒體播放元件

並放入版面編輯區中； (b)補充調色板編輯區未能達成之相關程式碼； (c)無

控制面板之執行畫面； (d)有控制面板之執行畫面。



10-8

當 VideoView 的播放面板以 setMediaController()命令設定好，並將所要播

放的影片媒體來源以 setVideoURI()指令也設定好之後，使用者就可以開始播

放影片如圖 10-3(c)所示，而當使用者希望對 HelloVideo 範例中的 14 秒短片作

播放設定時，只要對著影片螢幕區域（黑色背景區域不算）輕輕一點，就能叫

出播放面板如圖 10-3(d)所示，來進行播放的控制。

從這個例子我們可以得到『光靠調色板元件還不夠』的心得，因為：

有一些屬性在調色板的屬性編輯區中『仍未』提供，例如：Video 的

URI

有一些功能在調色板的屬性編輯區中『無法』提供，例如：Video 的

Controller 設定

解決辦法為：必須同時能掌握『調色板』之電腦輔助設計，以及系統或第

3 方提供者之『元件程式庫 API』，才能徹底處理問題！

10.1.3 引入第三方開放之 SDK

近年來由於社群軟體蓬勃發展，因此，在開放原始碼的『大環境』中出現

了一種新的現象，就是幾乎所有知名的社群軟體都免費提供所謂的 SDK，整

合相關之 API 程式庫以及認證機制的原始碼之後，以平台為對象，如 Android、iPhone 等，釋出讓開發人員易於上手的環境，達成 win-win 雙贏的目標，這個

現象對於智慧型手持裝置的發展更為有利。

但也因為如此，這些社群軟體都會提出一套申請金鑰的機制，有的稱為

API Key，也有的稱為 APP Key 或 APP ID；有些只有一組 Key 值，有的卻是

成對出現。這一節，筆者就先以時下最流行的臉書（它曾被拍成電影，說它最

夯也不為過吧！）為例提出解說。

當然，開放原始碼（Open Source）或自由軟體（Freeware）的案子多得不

勝枚舉，另一方面，這些社群軟體的 SDK 也不算真正的開放原始碼，頂多部

份開放，因為它也常以 jar 檔型式提供資源，不妨就以它作為說明吧！

10-9


首先，到 Facebook Developer 網站登錄以獲取 API 鑰匙3：

1. 點擊『建立新的應用程式』鈕，輸入應用程式顯示名稱

2. Import Facebook SDK4，複製所獲得的 API Key，貼到 SDK 範例程式

內的 Example.java 之 APP_ID 字串值內

登錄以獲取 API 鑰匙的步驟可參見圖 10-4，作者於隨書光碟內所提供的

SDK 專案就以畫面中出現的『MyPaulChengApp』為名，但不提供 APP_ID。

(a)

(b)

圖10-4 到 Facebook Developer 網站登錄以獲取鑰匙： (a)輸入名稱； (b)獲取鑰匙。

3 https://developers.facebook.com/apps 4 https://github.com/facebook/facebook-android-sdk



10-10

(a)

(b) (c)

圖10-5 引入 Facebook SDK 的兩大關鍵步驟： (a)先將 facebook lib 從 source 位置納

入； (b)並確認其 properties 對話框之『 Is Library』選項被核實； (c)將 SDK 引

入，修改專案名稱，並確認其 properties 對話框有參照 facebook lib。

10-11


至於圖 10-5 除顯示引入 SDK 的關鍵步驟以外，還能見到典型 SDK 的提

供方式，那就是將 LIB 切割出來，讀者可解開隨書光碟 URL.txt 中所指向的

facebook-facebook-android-sdk-OOOOOOO.zip，就可看到此 LIB 原始碼。

圖 10-6 則顯示執行時的認證畫面以及關鍵程式碼出處，如同許多社群軟

體 SDK 的作法，都採用 WebView 指向某個既定的認證網頁進行帳號密碼登入。

(a) (b) (c)

(d)

圖10-6 以 Facebook SDK Example 執行登入之畫面： (a)初始畫面； (b)SDK 以

WebView 形式進行認證； (c)認證成功之後的畫面； (d)以 WebView 認證之程

式碼出處。



10-12

10.1.4 運用新興開發工具

為何作者於 10.1 節一開始稱呼要以『3+1 的角度』切入議題？是因為 10.1.1至 10.1.3 三小節所介紹的方法皆能以 Java 程式語言進行程式開發，本節所要

介紹的新興開發工具『App Inventor』雖然也是基於 Java，但目前卻未能將所

『自動』產生的 Java 程式碼提供給開發人員，因此以『3+1 的角度』而非『4個角度』來稱之！

介紹本節的最大目的就是讓讀者快速鳥瞰 Android 各項功能之分類。首

先，圖 10-7 就是以 Google Service 帳號密碼認證成功之後的設計畫面，是一

個名為 HelloPurr 的示範專案，讀者可一參考影片5，配合隨書光碟範例完成。

沒錯！Android SDK 如前所述也的確提供了元件的『調色板』讓開發者一

窺元件的樣貌，但像是 App Inventor 這種『程式自動產生器』則讓整個開發過

程更加自動化與視覺化。

圖10-7 App Inventor 之 Design 頁面。

5 影片網址：http://www.youtube.com/watch?feature=player_embedded&v=8ADwPLSFeY8

10-13


表10-1 App Inventor 之調色板（Template）類別及其所包含元件的內容列表

調色板類別名稱包含元件內容

Basic Button, Canvas, CheckBox, Clock, Image, Label, ListPicker,

PasswordTextBox, Screen, TextBox, T inyDB

Media Camera, ImagePicker, Player, Sound, VideoPlayer

Animation Ball, ImageSprite

Social ContactPicker, EmailPicker, PhoneCall, PhoneNumberPicker, Texting,

Twitter

Sensor AccelerometerSensor, LocationSensor, OrientationSensor

Screen Arrangement HorizontalArrangement, TableArrangement, VerticalArrangement

LEGOR MINDSTORMSRNxtDirectCommands, NxtColorSensor, NxtLightSensor,

NxtSoundSensor, NxtTouchSensor, NxtUltrasonicSensor, NxtDrive

Other ActivityStarter, BarcodeScanner, BluetoothClient, BluetoothServer,

Notifier, SpeechRecognizer, TextToSpeech, T inyWebDB, Web

Not ready for prime time FusiontablesControl, GameClient, SoundRecorder, Voting,

WebViewer

表格 10-1 列舉作者至截稿前 App Inventor 所提供的調色板元件，有興趣

進一步參考學習的讀者可以逕往學習，或參考筆者相關著作有說明開發細節6。

10.2 Back 鍵與 Menu 鍵

Back 鍵與 Menu 鍵是現今大部份 Android 手機上一眼就可以看到的兩個按

鍵（參考圖 10-8a），其它像照相機的快門鈕就不一定了，可見其重要性。

Back 鍵通常扮演相當於 PC 上的 Esc 鍵，也就是『脫離』、『返回』，事

實上，模擬器也確實以此 Esc 鍵模擬 Android 的 Back 鍵。

Menu 鍵之效用等同於 PC 上之視窗程式的『功能選單』，也就是相當於

Java Swing 之 JMenuBar 物件的使用，其 JMenuBar 內含 JMenu，而 JMenu 則

又內含 JMenuItem。Android 有相似的選單邏輯，將一一陸續介紹。

6 觸控設計之觀念與創意應用 -- 嵌入式系統、人機介面與Android專題實作，碁峰，2010



10-14

(a) (b)

圖10-8 (a)模擬器之 Back 鍵與 Menu 鍵位置，以及程式列表 10-1 的執行畫面；(b)在

Eclipse 中程式列表 10-1 內，點擊滑鼠右鍵，選擇 Source => Override/Implement

Methods 選項，再勾選 onBackPressed()方法即可自動載入樣板於程式中。

程式列表 10-1：MyBackKeyActivity.java

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

public class MyBackKeyActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button btn = (Button) findViewById(R.id.button1); btn.setOnClickListener(new OnClickListener(){ @Override public void onClick(View arg0) { finish(); }}); } @Override public void onBackPressed() { //super.onBackPressed(); Log.i("MyBackKeyActivity", "Back key pressed!"); } }



10-28

10.4 思考與練習

讀完本章之後，可以嘗試思考與練習以下題目：

1. 試仿照程式列表 10-3，建立另一種『上下文選單（Context Menu）』

//建立上下文選單

@Override

public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo);

//處理上下文選單

@Override

public boolean onContextItemSelected(MenuItem item);

並加上以下註冊指令：

registerForContextMenu(某個 View);

就能在手指長按（Long Press）該物件時，出現上下文選單供選擇。

2. 試簡化程式列表 10-4 與 10-5，讓傳送方將 Name 與 Passwd 兩個參數

以下面的 putExtra()函式進行傳遞：

public Intent putExtra (String name, String value);

public Intent putExtra (String name, int value);

讓接收方將 Name 與 Passwd 兩個參數以下面的 putExtra()函式進行

接收：

String Name = b.getString(“NAME”);

String Passwd = b.getInt(“PASSWD”);

使新改寫的程式能得到原程式專案的相同結果。

3. 試觀察程式列表 10-7 第 22 行

<data android:mimeType="image/jpeg" />

改成其它類的 MIME TYPE，並改寫程式使能讀取該類型之檔案。

c android - 碁峰資訊epaper.gotop.com.tw/pdfsample/ael013100.pdfchapter 10 android...

Documents