建立 Android App [ 兒童數學訓練 (I)] 2-1 使用 B4A 開發 Android App 2-2 建立第一個 Android App 2-3 建立第二個 Android App 2-4 B4A 的程式與專案結構
2-1 使用 B4A 開發 Android App 使用 B4A 開發 Android App 的方式和使用 Visual Studio 建立 Windows 應用程式的步驟十分相似, 因為它們都是使用事件驅動程式設計 (Event-driven Programming) 來建立應用程式 雖然我們可以在 Windows 作業系統使用 B4A 開發 Android App, 不過, Windows 作業系統並不能直接執行 Android App, 我們需要使用 Android 模擬器或直接連接實機來測試執行結果 2-1-1 開發 Android App 的基本步驟 對於 Windows 應用程式和 Android App 等圖形使用介面的應用程式來說, 使用的是事件驅動邏輯 (Even-driven Logic), 其執行流程需視使用者的操作而定, 如同百貨公司開門後, 需要等到客戶上門後, 才會有銷售流程的產生, 換句話說, 客戶上門是觸發事件, 應用程式依事件來執行適當的處理 在實務上,Android App 使用介面設計是一項十分重要的工作, 所以 B4A 提供功能強大的 GUI 設計工具 (Designer) 來幫助我們建立使用介面, 介面元件在 Visual Studio 稱為控制項 ;Android 稱為視圖 (View, 本書稱為使用介面元件或直接稱元件 ) 使用 B4A 開發 Android App 的基本步驟, 如下所示 : 新增 B4A 專案 :B4A 是使用專案來管理 Android App 的開發, 建立 Android App 的第一步是建立 B4A 專案, 和替每一個 B4A 專案新增專屬的資料夾 建立圖形使用介面 : 在建立和儲存 B4A 專案後, 就可以開啟 GUI 設計工具建立圖形使用介面, 只需依照規劃的版面配置新增所需的介面元件, 即可輕鬆編排出 Android App 使用介面 設定介面元件的屬性 : 在使用介面的版面配置新增元件後, 就可以設定屬性值來調整尺寸 字型 色彩和外觀等 2-2
建立 Android App 2 建立和撰寫事件處理程序的程式碼 : 我們可以依照活動 服務或介面元件觸發的事件, 例如 :Button 的 Click 事件, 建立所需的事件處理程序和撰寫處理的程式碼 編譯與執行 Android App:B4A 可以在 Windows 開發電腦編譯 Android App, 和連接實機或啟動 Android 模擬器來測試執行 2-1-2 測試執行 Android App 因為 Android App 是一種在 Android 行動作業系統上執行的應用程式, 並不能直接在微軟 Windows 視窗作業系統的開發電腦上執行, 換句話說, 我們需要在 Windows 作業系統建立與啟動 Android 模擬器, 或購買一台實機的行動裝置, 才能測試 Android App 的執行結果 使用 Android 模擬器測試執行 Android App 在第 1 章已經說明過如何安裝 建立和啟動 Android 模擬器,B4A 在編譯執行專案前, 只需啟動 Android 模擬器和完成開機, 就可以將編譯建立的 Android App 安裝至模擬器來執行, 詳見第 2-2 節的說明 連接實機來測試執行 Android App 讀者如果擁有實機且支援 USB 裝置除錯 ( 部分不支援 ), 我們可以透過 USB 連接線連接電腦與實機 ( 在 Windows 電腦需要安裝 Google USB Driver), 將 B4A 編譯建立的 Android App 安裝至實機來執行, 詳見第 2-3-2 節的說明 2-3
2-2 建立第一個 Android App 在第 1 章已經說明過如何在 Windows 開發電腦安裝 Basic4android 整合開發工具所需的開發與測試環境, 現在, 我們就可以建立第一個在 Android 行動裝置執行的 Android App 本節建立的 Android App 十分簡單, 這只是一個 Hello World 程式, 主要目的是說明使用 B4A 開發 Android App 的步驟 步驟一 : 新增與儲存 B4A 的 Android App 專案 在 B4A 建立 Android App 的第一步是新增與儲存 B4A 的 Android App 專案, 簡稱 B4A 專案, 我們準備在 Main 活動模組編輯修改程式碼來建立第一個 Android App, 同時指定套件名稱和新增資料夾來儲存專案, 其步驟如下所示 : 請啟動 B4A 整合開發工具, 可以看到預設建立名為 Main 活動模組 (Activity Module), 或執行 File > New 指令新增專案, 如下圖所示 : 2-4
建立 Android App 2 請在左上角選 Release 模式後, 在 Activity_Create 程序修改 Msgbox() 方法的程式碼 ( 完整版需自行新增 Msgbox() 方法這行程式碼 ), 第 1 個參數是訊息視窗顯示的內容, 第 2 個參數是上方標題文字, 如下所示 : 27: Sub Activity_Create(FirstTime As Boolean) 28: 'Do not forget to load the layout file created with the visual designer. For example: 29: 'Activity.LoadLayout("Layout1") 30: Msgbox(" 我的第一個 Android 程式!", "Information") 31: End Sub 執行 Project > Package Name 指令指定套件名稱( Project > Choose Icon 指令可以選擇 App 圖示, 此指令需儲存專案後才能執行 ), 可以看到 Set package name 對話方塊 請在 Package name 欄輸入套件名稱, 以此例是 ch02.b4a.example, 按 Ok 鈕完成設定 套件名稱 (Package name) 是 Android App 的識別字串, 它是用來區分不同的應用程式, 通常是使用公司或組織相反的網域名稱字串作為套件名稱, 而且必須為小寫英文, 例如 : 公司網址是 www.company.com.tw, 套件名稱可以是 tw.com.company 如果 Android App 的套件名稱相同, 對於 Android 作業系統來說, 就是同一個應用程式, 當重複安裝此程式時, 作業系統會自動取代原來已經安裝的同名程式 2-5
在編譯和執行專案前, 我們需要先儲存專案 ( 不然會顯示請先儲存專案的錯誤訊息 ), 請執行 File > Save 指令, 可以看到 另存新檔 對話方塊 B4A 專案需要儲存在獨立資料夾, 以此例是先按上方 新增資料夾 鈕新增名為 Ch2-2-1 資料夾後, 才將 B4A 專案儲存在 D:\Basic4android\Ch02\Ch2-2-1 資料夾, 名稱為 HelloWorld.b4a, 按 存檔 鈕儲存專案 步驟二 : 啟動 Android 模擬器 B4A 是在 Windows 開發電腦上編譯建立 Android App 後, 安裝至 Android 模擬器來測試執行, 所以, 開發 Android App 的第二步驟就是啟動 Android 模擬器, 其步驟如下所示 : 請在 B4A 執行 Tools > Run AVD Manager 指令, 可以看到 Android Virtual Device Manager 對話方塊( 如果看到的是 Android SDK Manager 對話方塊, 請再執行 Tools > Manage AVDs 指令) 2-6
建立 Android App 2 選 GPhone 模擬器後, 按右邊 Start 鈕, 可以看到 Launch Options 起動選項對話方塊 按 Launch 鈕啟動 Android 模擬器, 稍等一下, 等待 Android 作業系統完成開機 步驟三 : 編譯與執行 Android App 當 Android 模擬器完成開機後, 就可以在 B4A 編譯與執行 Android App, 其步驟如下所示 : 請在 B4A 執行 Project > Compile & Run 指令 + 鍵或工具列最後藍色箭頭鈕, 可以看到 Compile & Debug 對話方塊顯示的編譯資訊 2-7
訊息顯示已經完成剖析與程式碼編譯 ( 將 BASIC 程式碼轉換成 Java 程式碼 ), 等到完成編譯且安裝至 Android 模擬器後, 就會顯示 Completed successfully 訊息文字 如果 Tools > Remote Compilation Mode 選項有勾選, 請執行指令取消勾選此選項, 不使用遠端編譯模式 開啟 Android 模擬器和解鎖後, 就可以看到 Android App 的執行結果, 如右圖所示 : 2-8
建立 Android App 2 如果編譯過程顯示錯誤訊息沒有找到裝置, 請確認 Android 模擬器已經啟動且完成開機, 或執行 Tools > Restart ADB Server 指令後, 再試一次 2-3 建立第二個 Android App B4A 的 GUI 設計工具 (Designer) 是一套功能強大的視覺化設計工具, 可以如同使用 Visual Studio 表單設計工具一般建立 Android App 的使用介面 ( 即版面配置 ), 支援連接實機 模擬器或 B4A 抽象設計工具 (Abstract Designer) 來預覽和建立版面配置 2-3-1 GUI 設計工具 在這一節筆者準備從啟動 B4A 開發工具和新增專案開始, 使用一個完整實例來說明 GUI 設計工具的使用, 和如何連接 Android 模擬器 範例專案是一個訓練兒童加法的簡單 Android App, 其步驟如下所示 : 步驟一 : 啟動 B4A 新增專案 我們準備從啟動 B4A 開始新增本節範例專案, 專案名稱是 兒童數學訓練, 套件名稱為 ch02.gui.b4a.example, 其步驟如下所示 : 請啟動 B4A 整合開發工具後, 執行 File > New 指令新增專案, 可以看到和啟動時相同的範本程式碼 執行 Project > Package Name 指令指定套件名稱, 可以看到 Set package name 對話方塊 2-9
在 Package name 欄輸入套件名稱, 以此例是 ch02.gui.b4a.example, 按 Ok 鈕完成設定 指定專案屬性的應用程式標籤 (Application Label), 這是 App 顯示的標題文字, 請在程式碼編輯器展開 Project Attribute 區塊( 按一下之前的 + 號 ), 如下圖所示 : 將 #ApplicationLabel: 的值從 B4A Example 改為 兒童數學訓練 執行 File > Save 指令儲存專案至 D:\Basic4android\Ch02\Ch2-3-1 資料夾, 名稱為 兒童數學訓練.b4a 步驟二 : 啟動 Android 模擬器 請參閱第 1-6-1 節或第 2-2 節步驟二來啟動 Android 模擬器和完成開機 步驟三 : 開啟 GUI 設計工具連接 Android 模擬器 在成功啟動 Android 模擬器和完成開機後, 就可以開啟 GUI 設計工具和連接 Android 模擬器來建立版面配置, 其步驟如下所示 : 請在 B4A 選功能表的 Designer 指令, 可以開啟 Designer 和 Abstract Designer 視窗( 對應實機的模擬畫面 ) 2-10
建立 Android App 2 在 Designer 視窗勾選右上角 Top Most 核取方塊, 可以讓視窗永遠顯示在最上層 在 Designer 執行 Tools > Connect To Device/Emulator 指令, 請稍等一下, 準備建立連接, 成功連接, 可以在 Designer 視窗上方顯示狀態為 Connected, 右下方是連接裝置的資訊, 如下圖所示 : 2-11
Android 應用程式如果啟動 Google 地圖, 在 Android 模擬器需要支援 Google API 請開啟 Android Virtual Device Manager 對話方塊, 選擇建立的 AVD, 按右邊 Edit 鈕, 以本書為例是在 Target 欄選 Google API (Google Inc) API Level 17 如果 Android 模擬器明明有啟動, 但 Designer 一直無法成功連接且顯示找不到裝置的錯誤, 請在 B4A 執行 Tools > Restart ADB Server 指令重新啟動 ADB 伺服器後再試一次 目前 Abstract Designer 視窗尺寸是 320 X 480, 請在此視窗執行 Layout > Match Connected Device 指令, 可以將視窗變更成為連接裝置的尺寸, 即模擬器或實機的尺寸, 如下圖所示 : 2-12
建立 Android App 2 在連接裝置顯示名為 Activity 標題的畫面 ( 如果是實機, 因 Android 版本不同, 有些會詢問安裝 B4A Designer), 如右圖所示 : 步驟四 : 在 GUI 設計工具新增介面元件 當開啟 GUI 設計工具 Designer 和成功連接 Android 模擬器後, 就可以開始新增介面元件, 其步驟如下所示 : 請切換開啟 Designer 視窗, 在上方 Add View 功能表包含支援的介面元件指令, 如下圖所示 : 2-13
執行 Add View > Label 指令在 Abstract Designer 視窗新增一個 Label 介面元件 ( 即 Android 的 TextView 元件 ), 如下圖所示 : 選取後, 可以看到四周定位點, 請使用定位點來調整尺寸, 或拖拉調整其位置, 同時, 在連接裝置也會顯示名為 Label1 標籤的介面元件, 這是實際顯示結果, 如下圖所示 : 2-14
建立 Android App 2 同樣方式, 請再新增 3 個 Label2~4( 或在 Label 標籤上執行 右 鍵快顯功能表的 Duplicate Selected Views 指令複製介面元件), 和分別調整尺寸與位置, 如下圖所示 : 接著, 在 Designer 視窗依序執行 Add View > EditText 和 Add View > Button 指令, 新增 EditText 文字方塊 ( 即 VSE 的 TextBox 控制項 ) 和 Button 按鈕元件, 和分別調整尺寸和位置, 如下圖所示 : 2-15
在 Abstract Designer 視窗顯示的介面元件只是抽象外觀, 切換至連接裝置可以顯示介面元件的實際外觀, 如右圖所示 : 步驟五 : 在 GUI 設計工具設定介面元件的屬性 在完成介面元件的新增後, 就可以一一設定各元件的屬性, 其步驟如下所示 : 請在 Abstract Designer 視窗選 Button1, 可以在 Designer 視窗的 Main 標籤更改所需的屬性值, 如右圖所示 : 2-16
學習評量 ( ) 1. 請問下列哪一個 B4A 開發 Android App 的步驟是設定屬性值來調整尺寸 字型 色彩和外觀等? A. 新增專案 B. 建立版面配置 C. 設定元件屬性 D. 建立事件處理程序 ( ) 2. 請問下列哪一個 B4A 開發 Android App 的步驟是處理觸發的事件? A. 新增專案 B. 建立版面配置 C. 設定元件屬性 D. 建立事件處理程序 ( ) 3. 請問下列哪一個系統並不能用來測試 Android App 的執行? A.Windows 8 B.Android 手機 C.Android 模擬器 D.Android 平板 ( ) 4. 請問下列哪一個不是 B4A 處理活動事件的程序? A.Activity_Create C.Activity_Pause B.Activity_Resume D. 全部都是 ( ) 5. 請問下列哪一個是 Btn 元件處理 Click 事件的事件處理程序名稱? A.Btn.Click C.Button_Click B.Btn_Click D.Button.Click 6. 請問我們要如何測試執行 B4A 開發的 Android App? 7. 請簡單說明 B4A 活動模組的基本程式結構? 8. 請直接使用 B4A 測試版的標準範本來編譯 安裝和執行 Android App, 請分別在實機或模擬器上測試執行 2-28