第2章 建立Android應用程式 2-1 Java語言、XML文件與Android 2-2 建立第一個Android應用程式

Presentation on theme: "第2章 建立Android應用程式 2-1 Java語言、XML文件與Android 2-2 建立第一個Android應用程式"— Presentation transcript:

1 第2章 建立Android應用程式 2-1 Java語言、XML文件與Android 2-2 建立第一個Android應用程式
2-4 Android Studio的使用介面 2-5 Android Studio專案結構

2 2-1 Java語言、XML文件與Android
2-1-2 Android與Java語言 2-1-3 Android與XML文件

3 2-1-1 Java語言的基礎 – 說明 「Java」（爪哇）是一種類似C++語言的編譯式語言，不過並不完全相同，因為它是結合編譯和直譯優點的程式語言。 「平台」（Platform）是一種結合硬體和軟體的執行環境，Java程式是在平台上執行，屬於一種與硬體配備無關且跨作業系統的程式語言，換句話說，Java平台是一種軟體平台，它是由JVM和Java API元件組成。

4 2-1-1 Java語言的基礎 – JVM虛擬機器 「JVM」（Java Virtual Machine）虛擬機器是一台軟體的虛擬電腦，Java原始程式碼使用Java編譯器（Java Compiler）編譯成JVM虛擬機器的機器語言，稱為「位元組碼」（Bytecode）。電腦作業系統需要安裝JVM，才可以使用Java直譯器（Java Interpreter）來直譯和執行位元組碼的程式，如下圖所示：

5 2-1-1 Java語言的基礎 – Java API Java API（Java Application Programming Interface）是軟體元件集合的函數庫，提供集合物件、GUI元件、檔案處理、資料庫存取和網路等相關的類別和介面，稱為「套件」（Packages）。

6 2-1-2 Android與Java語言 – 說明 Android應用程式是一種使用Java語法建立的應用程式，建立Android應用程式就是使用物件導向觀念和語法，繼承和擴充Android框架的Java現成類別，不過，Android和Java應用程式的執行方式是完全不同。

7 2-1-2 Android與Java語言 – 圖例 Java程式碼在編譯成位元組碼後，就可以在JVM上執行，不過，Android稍有不同，需要多一道手續才能在DalvikVM或ART上執行，如右圖所示：

8 2-1-2 Android與Java語言 – 圖例說明
左邊是Java應用程式的編譯與執行過程；右邊是Android應用程式，其差異在於Java程式編譯成Java位元組碼後，還需要使用Dex編譯器編譯成Dalvik位元組碼，4.4版之前是在DalvikVM直譯器上執行；Android 5.x版是使用ART（Android Runtime）來執行 請注意！ART是使用「AOT」（Ahead-of-time）編譯方式，也就是在安裝Android應用程式時，就將Dalvik位元組碼編譯成ELF（Executable and Linkable Format）的原生機器語言，讓ART可以直接執行。舊版DalvikVM直譯器在每次執行Android應用程式時，都需編譯後才能執行，ART只需在安裝時編譯一次，就可以執行原生機器語言的程式碼。

9 2-1-3 Android與XML文件 Android是一套支援多國語系和不同螢幕尺寸行動裝置的作業系統，為了簡化和方便管理使用在不同語系和尺寸的資源，Android切割使用介面和程式邏輯控制，採用XML文件來管理程式介面部分和相關的眾多資源，例如：圖示和背景圖形。 XML是一種類似HTML（Web網頁的原始碼）的標記語言，可以直接使用文字內容的標籤來定義Android使用介面的位置、尺寸和外觀，如同佈置房間時，描述桌子放在哪裡、衣櫃在哪裡和床面向哪個方向等。

10 2-2 建立第一個Android應用程式 – 說明
我們建立的第一個Android應用程式只是修改XML文件的內容來顯示「第一個Android應用程式」的一段文字內容，其主要目的是說明Android Studio專案結構、基本編輯介面和如何在Android模擬器測試執行Android應用程式。 Android Studio整合開發環境是使用專案（Project）管理Android應用程式開發，基本上，專案是一個目錄結構，內含Java程式碼檔案、XML文件檔、圖示和圖形等資源檔案。

11 2-2 建立第一個Android應用程式 – 步驟一：新增Android Studio專案(Step1)
Step 1：請執行「開始/所有程式/Android Studio/Android Studio」指令啟動Android Studio，可以看到「Android Studio」視窗。 Start a new Android Project

12 2-2 建立第一個Android應用程式 – 步驟一：新增Android Studio專案(Step2)
Step 2：點選【Start a new Android Studio project】選項新增Android Studio專案，可以看到「Create New Project」精靈畫面。

13 2-2 建立第一個Android應用程式 – 步驟一：新增Android Studio專案(Step3)
Step 3：請輸入應用程式名稱【Ch2_2】、公司網域【hueyan.example.com】和儲存路徑後，按【Next】鈕選擇應用程式種類。

14 2-2 建立第一個Android應用程式 – 步驟一：新增Android Studio專案(Step4)
Step 4：請勾選【Phone and Tablet】手機和平板，Minimum SDK使用預設值，按【Next】鈕使用活動範本來新增專案的活動。

15 2-2 建立第一個Android應用程式 – 步驟一：新增Android Studio專案(Step5)
Step 5：預設選【Blank Activity】空白活動範本，按【Next】鈕輸入活動的相關資訊。

16 2-2 建立第一個Android應用程式 – 步驟一：新增Android Studio專案(Step6-7)
Step 6：在【Activity Name】欄輸入活動名稱【MainActivity】，【Layout Name】欄是版面配置檔，預設值【activity_main】，【Title】欄是標題名稱，【Menu Resource Name】欄是選單資源檔【menu_main】，按【Finish】鈕建立專案。 Step 7：稍等一下，等到專案建立完成，就會看到「Tip of the Day」每日提示說明對話方塊。

17 2-2 建立第一個Android應用程式 – 步驟一：新增Android Studio專案(Step8)
Step 8：請按【Close】鈕，就可以進入Android Studio整合開發環境使用介面的主視窗。

18 2-2 建立第一個Android應用程式 – 步驟二：檢視與編輯Android應用程式檔案(Step1)
Step 1：在「Project」視窗展開【app】下的【java】目錄，可以看到套件名稱，展開後按二下【MainActivity】開啟Java程式碼編輯器，如右圖所示：

19 2-2 建立第一個Android應用程式 – 步驟二：檢視與編輯Android應用程式檔案(Step2-3)
Step 2：請展開import匯入類別與套件清單，刪除匯入android.view.Menu和android.view.MenuItem套件的2列程式碼。 Step 3：在Java類別宣告刪除類別宣告最後的onCreateOptionsMenu()和onOptionsItemSelected()兩個方法，如下圖所示：

20 2-2 建立第一個Android應用程式 – 步驟二：檢視與編輯Android應用程式檔案(Step4-5)
Step 4 ：專案預設開啟「app\res\layout」目錄下的【activity_main.xml】（按二下即可開啟），和以使用介面設計工具（Designer Tool）來開啟，因為已經開啟，請選上方【activity_main.xml】標籤切換至此檔案。 Step 5：選下方【Text】標籤切換至XML標籤碼檢視，如下圖所示：

21 2-2 建立第一個Android應用程式 – 步驟二：檢視與編輯Android應用程式檔案(Step6)
Step 6：當游標移至android:text屬性值"Hello

22 2-2 建立第一個Android應用程式 – 步驟二：檢視與編輯Android應用程式檔案(Step7-8)
Step Step 8：請展開「app\res\values」目錄，按二下【strings.xml】，可以看到XML文件的標籤碼，如下圖所示：

23 2-2 建立第一個Android應用程式 – 步驟二：檢視與編輯Android應用程式檔案(Step9-10)
Step 9：我們準備更改應用程式名稱和顯示字串，請更改【app_name】的標籤內容，從【Ch2_2】改成【Android範例一】。 Step 10：將hello_world標籤值從【Hello world!】改為【我的第一個Android應用程式】，如下圖所示：

24 2-2 建立第一個Android應用程式 – 步驟二：檢視與編輯Android應用程式檔案(Step11)
Step 11：展開「app\res\menu」目錄，在【menu_main.xml】上執行【右】鍵快顯功能表的【Delete】指令刪除此檔，此檔案是動作列選單項目的定義檔（目前我們不會使用到，進一步說明請參閱第7章），如右圖所示：

25 2-2 建立第一個Android應用程式 – 步驟二：檢視與編輯Android應用程式檔案(Step12)
Step 12：Android Studio預設會自動儲存內容變更，我們也可以執行「File/Save All」指令，儲存專案所有編輯過的內容變更。

26 2-2 建立第一個Android應用程式 – 步驟三：編譯與執行Android應用程式(Step1)
Step 1：請執行「Run/Run 'app'」指令或按Shift-F10鍵，稍等一下，可以看到「Choose Device」對話方塊。

27 2-2 建立第一個Android應用程式 – 步驟三：編譯與執行Android應用程式(Step2-3)
Step 2：因為尚未啟動模擬器，請選下方【Launch emulator】，然後選擇建立的模擬器，以此例是【Nexus 5 API 21 x86】，按【OK】鈕啟動模擬器。 Step 3：啟動模擬器需花費一些時間，等到完成啟動和安裝Android應用程式，在解鎖後，可以看到執行結果，如右圖所示：

28 2-3 建立第二個Android應用程式 – 說明
在本節的第二個範例，筆者準備說明如何建立「事件驅動程式設計」（Event-driven Programming）的Android應用程式。 事件驅動程式設計的執行流程需視使用者的操作而定，如同百貨公司開門後，需要等到客戶上門後，才有銷售流程的產生，所以，客戶上門就是觸發事件，應用程式依事件來執行適當的處理。 例如：在Windows作業系統啟動【記事本】後，程式需要等到使用者執行功能表的「格式/字型」指令後，才會顯示「字型」對話方塊，等到按下【確定】鈕才完成字型的設定。

29 2-3 建立第二個Android應用程式 – 範例
在第二個Android應用程式範例筆者準備使用介面設計工具來建立使用介面，我們準備在螢幕刪除預設TextView元件後，新增1個TextView和2個Button元件，然後撰寫2個按鈕元件的事件處理方法（Methods，即其他語言的程序），當使用者按下第1個按鈕，可以顯示計數的增加，按第2個按鈕則是歸零。

30 2-3 建立第二個Android應用程式 – 步驟一：新增Android Studio專案(Step1-2)
Step 1：請啟動Android Studio，可以開啟上一節Ch2_2專案，請執行「File/New Project」指令，可以看到「Create New Project」精靈畫面。 Step 2：在各步驟的精靈畫面依序輸入專案資訊，如下表所示： 專案欄位 欄位值 Application name Ch2_3 Company Domain hueyan.example.com Project location 「C:\Android\Ch02\Ch2_3」 Minmnm SDK API 15: Android 4.03 活動範本 Blank Activity Activity Name MainActivity Layout Name activity_main

31 2-3 建立第二個Android應用程式 – 步驟一：新增Android Studio專案(Step3-4)
Step 3：按【Finish】鈕建立專案，可以在全新的主視窗建立專案，我們可以看到新建的專案目錄。 Step 4：請參考第2-2節步驟二刪除動作列選單的相關程式碼和檔案。

32 2-3 建立第二個Android應用程式 – 步驟二：在版面配置檔新增介面元件(Step1)
Step 1：請展開【app\res\layout】，按二下【activity_main.xml】開啟介面設計工具，可以在右上方「Component Tree」元件樹視窗看到預設RelativeLayout版面配置元件和之下的TextView元件（位在版面配置元件中），如下圖所示：

33 2-3 建立第二個Android應用程式 – 步驟二：在版面配置檔新增介面元件(Step2)
Step 2：我們準備重頭開始建立，請選TextView元件，在其上執行【右】鍵快顯功能表的【Delete】指令刪除此元件。然後按右上方加號圖示放大螢幕顯示。

34 2-3 建立第二個Android應用程式 – 步驟二：在版面配置檔新增介面元件(Step3)
Step 3：在「Palette」工具箱選【Large Text】即大字型TextView元件後，拖拉至螢幕上的插入位置，在上方會顯示編排資訊，alignParentLeft是靠父元件左邊；Top是靠上，距離上方間距margin是40dp。

35 2-3 建立第二個Android應用程式 – 步驟二：在版面配置檔新增介面元件(Step4)
Step 4：然後在【Widgets】區段，拖拉【Button】元件至TextView之下，即below；間距40dp。

36 2-3 建立第二個Android應用程式 – 步驟二：在版面配置檔新增介面元件(Step5)
Step 5：新增第2個【Button】元件，toRightOf是位在第1個Button元件的右方；間距32dp，可以看到我們建立的使用介面。

37 2-3 建立第二個Android應用程式 – 步驟三：更改介面元件的屬性(Step1)
Step 1：按二下TextView元件，可以看到浮動視窗顯示的2個常用屬性（我們一樣可以在「Properties」視窗編輯屬性），在【text】屬性輸入【0】；【id】屬性輸入【lblOutput】，如下圖所示：

38 2-3 建立第二個Android應用程式 – 步驟三：更改介面元件的屬性(Step2)
Step 2：按二下Button元件，在【text】屬性輸入標題文字【增加計數】，如下圖所示：

39 2-3 建立第二個Android應用程式 – 步驟三：更改介面元件的屬性(Step3-4)
Step 3：按二下第2個Button元件，在【text】屬性輸入標題文字【計數歸零】。 Step 4：選第1個【Button】元件，在右下方「Properties」視窗找到【onClick】屬性，輸入屬性值【button_Click】。

40 2-3 建立第二個Android應用程式 – 步驟三：更改介面元件的屬性(Step5)
Step 5：選第2個【Button】元件，在「Properties」視窗找到【onClick】屬性，輸入屬性值【button2_Click】。

41 2-3 建立第二個Android應用程式 – 步驟四：在活動類別新增Button元件的事件處理方法(Step1)
Step 1：請展開「java」資料夾，按二下【MainActivity.java】開啟Java類別程式碼編輯器，輸入事件處理方法的程式碼，如下圖所示：

42 2-3 建立第二個Android應用程式 – 步驟四：在活動類別新增Button元件的事件處理方法(Step2-3)
Step 2：首先在MainActivity類別輸入事件處理的button_Click()和button2_Click()兩個方法，如下所示： public void button_Click(View view) { } public void button2_Click(View view) { Step 3：在輸入方法參數View view時，可以看到View是紅色字，表示有錯誤，同時看到浮動視窗的說明，因為沒有匯入android.view.View類別，請按Alt-Enter鍵，讓Android Studio自動匯入此類別。

43 2-3 建立第二個Android應用程式 – 步驟四：在活動類別新增Button元件的事件處理方法(Step4)
01: public void button_Click(View view) { 02: int count; 03: TextView output = (TextView) findViewById(R.id.lblOutput); 04: count = Integer.parseInt(output.getText().toString()); 05: count++; 06: output.setText(Integer.toString(count)); 07: } 08: 09: public void button2_Click(View view) { 10: TextView output = (TextView) findViewById(R.id.lblOutput); 11: output.setText("0"); 12 }

44 2-3 建立第二個Android應用程式 – 步驟四：在活動類別新增Button元件的事件處理方法(Step5)
Step 5：Android Studio預設會自動儲存內容變更，我們也可以自行執行「File/Save All」指令，儲存專案所有編輯過的內容變更。

45 2-3 建立第二個Android應用程式 – 步驟五：編譯與執行Android應用程式(Step1)
Step 1：請執行「Run/Run 'app'」指令或按Shift-F10鍵，稍等一下，可以看到「Choose Device」對話方塊。

46 2-3 建立第二個Android應用程式 – 步驟五：編譯與執行Android應用程式(Step2-3)
Step 2：因為上一節已經啟動模擬器，請選【Choose a running device】的【Nexus 5 API 21 x86】，按【OK】鈕選擇執行的模擬器。 Step 3：等到完成Android應用程式安裝，就可以看到執行結果，如下圖所示：

47 2-4 Android Studio的使用介面 2-4-1 Android Studio歡迎視窗 2-4-2 主視窗
2-4-3 程式碼編輯器 2-4-4 介面設計工具

48 2-4-1 Android Studio歡迎視窗 當啟動Android Studio，如果上一次啟動並沒有開啟專案，或已經關閉專案，就會看到「Android Studio」歡迎視窗。

49 2-4-2 主視窗 - 主視窗的使用介面 Android Studio的主視窗是對應專案，如果同時開啟多個專案，每一個專案都是一個獨立的主視窗，例如：Ch2_3專案，如下圖所示：

50 2-4-2 主視窗 - 主視窗的專案管理 在Android Studio主視窗提供相關指令來新增、開啟和關閉專案，我們可以執行「File/New Project」指令建立新專案（詳見第2-3節）。在主視窗執行「File/Open」指令開啟存在專案，可以看到「Open File or Project」對話方塊。

51 2-4-3 程式碼編輯器 – 說明 程式碼編輯器（Code Editor）是一個標籤頁視窗，可以用來編輯文字模式的Java程式碼和XML文件的標籤碼，如下圖所示：

52 2-4-3 程式碼編輯器 – 顯示程式碼前的行列號 在程式碼編輯器最前面的直行是用來顯示相關資訊和控制圖示，如果沒有看到行列號，請執行滑鼠【右】鍵快顯功能表的【Show Line Numbers】指令顯示行列號（只對目前的編輯的檔案有效），如下圖所示：

53 2-4-3 程式碼編輯器 – 自動程式碼完成 Android Studio程式碼編輯器支援自動程式碼完成（Code Completion），只需輸入名稱後，再輸入「.」符號，就可以顯示相關類別、物件、方法和屬性清單。例如：輸入System，再輸入「.」，就會顯示建議清單，只需按二下，即可輸入所需的Java程式碼，如下圖所示：

54 2-4-3 程式碼編輯器 – 顯示程式碼錯誤和即時分析結果
在程式碼編輯視窗輸入程式碼時，如果有錯誤，錯誤的程式碼或關鍵字下方會顯示紅色鋸齒線來表示有錯誤，同時在檔案和此檔案的目錄名稱下也都會顯示紅色鋸齒線，如下圖所示：

55 2-4-4 介面設計工具 – Design設計模式 在Android Studio開啟activity_main.xml檔案，預設是使用Design設計模式來編輯使用介面，如果沒有，請點選左下角【Design】標籤，如下圖所示：

56 2-4-4 介面設計工具 – Text文字模式 點選左下角【Text】標籤可以切換至文字模式，讓我們直接輸入XML標籤碼來編輯活動的版面配置，如下圖所示：

57 2-5 Android Studio專案結構 2-5-1 Android檢視 2-5-2 Project檢視
2-5-3 Packages檢視

58 2-5 Android Studio專案結構 Android Studio專案預設擁有多個目錄、子目錄和檔案，因為Android Studio工具預設使用Gradle建構工具（Build Toolkit）。 Gradle是一套自動化建構工具，可以幫助我們建構和管理Android Studio專案，定義如何建構Android Studio專案。在Android Studio的「Project」專案視窗提供多種檢視方式：【Android】、【Project】和【Packages】，預設是【Android】檢視，如下圖所示：

59 2-5-1 Android檢視 – 說明 Android Studio工具預設Android檢視的專案結構，以Ch2_3專案為例，如右圖所示：

60 2-5-1 Android檢視 – app\manifests目錄
位在此目錄下的AndroidManifest.xml檔案是十分重要的檔案，提供Android作業系統所有應用程式的基本資訊，一個功能清單。不同於Windows作業系統，Android作業系統需要透過AndroidManifest.xml檔案先認識這個應用程式，才能知道如何執行此應用程式。其主要提供的資訊有： 應用程式的完整名稱（包含Java套件名稱），一個唯一的識別名稱，可以讓Android作業系統和Google Play找到此應用程式。 應用程式包含的活動、內容提供者、廣播接收器和服務元件。 宣告應用程式執行時需要的權限，例如：存取網路和GPS等。 應用程式的目標和最小需求的API層級。

61 2-5-1 Android檢視 – app\java目錄
位在此目錄下是Java類別的原始程式碼檔案（.java），分別位在套件com.example.hueyan.ch2_3對應的路徑下，展開套件可以看到之下的Java檔案清單，以此例是MainActivity.java，即Android應用程式活動類別的Java程式碼檔。

62 2-5-1 Android檢視 – app\res目錄
子目錄 內容說明 anim 定義動畫效果的XML檔 color 定義色彩清單的XML檔 drawable 在目錄下是不同尺寸的JPEG或PNG格式圖檔案，ic_launcher.png是啟動圖示，hdpi是72x72點；mdpi是48x48點；xhdpi是96x96點；xxhdpi是144x144點，可以使用在高、中和低不同解析度的行動裝置螢幕 layout 定義使用介面版面配置的XML檔，例如：activity_main.xml menu 顯示應用程式選單的XML檔 raw 不需要壓縮的原始資料檔案，例如：視訊檔 values 定義程式使用的陣列、字串、尺寸、色彩和樣式的常數值，例如：dimes.xml是尺寸、strings.xml是字串和styles.xml是樣式

63 2-5-2 Project檢視 – 說明 Project檢視的Android Studio專案結構，以Ch2_3專案為例，如右圖所示：

64 2-5-2 Project檢視 – 主要目錄的說明 \.idea目錄：在此目錄擁有多個子目錄，這些內容都是IntelliJ IDEA使用的內部資訊。 \app\build目錄：在此目錄下是建構產生的檔案，例如：R.java檔案是位在「\app\build\generated\source\r\debug\」目錄下的套件名稱下。 \app\src\main目錄：在此目錄的內容就是對應Android檢視下的java和res目錄，drawable目錄依不同解析度分成多個子目錄。

65 2-5-3 Packages檢視 – 說明 Packages檢視的Android Studio專案結構是以套件來分類顯示目錄結構和檔案，以Ch2_3專案為例，如右圖所示：

66 2-5-3 Packages檢視 – 目錄說明 android.support.v7.appcompat套件
Android支援函數庫（Android Support Library）套件，此套件的目的是讓舊版Android可以相容使用新版功能，在v7 appcompat函數庫新增支援動作列（Action Bar）和Material Design使用介面實作。 com.example.hueyan.ch2_3套件 專案的應用程式套件，展開可以看到MainActivity.java和R.java檔案，R.java是Android Studio自動依據專案資源建立的索引類別檔，使用者並不允許更改檔案內容。

67 End