1-1

P R E F A C E 序 Visual Basic 語言是目前國內使用者最多的程式語言之一, 對於熟悉 Visual Basic 語言的使用者來說,Android App 開發雖然是當紅的軟體開發領域, 但是, 苦於不熟悉 Java 語法和物件導向程式設計, 根本無法馬上入門, 現在, 你不用學習 Java 語言的不同語法, 直接使用現有 Visual Basic 程式設計經驗, 一樣可以輕鬆開發 Android App Basic4android(B4A) 是一套整合開發環境 IDE, 可以讓 Visual Basic 語言的開發者直接使用 BASIC 語言來開發 Android App,B4A 能夠將開發者撰寫的 BASIC 程式碼編譯轉換成 Java 程式碼來建立原生 Android App 換句話說,B4A 專案最後仍然會編譯成原生 Java 程式檔案和類似 Eclipse IDE 的 Android 專案資料夾結構, 我們不只可以使用 B4A 開發 Android App, 更可以將它作為一個橋樑來進入進階 Java 語言的 Android 程式開發 本書在規劃上是一本 Basic4android 的入門與實作教材, 可以幫助現有 Visual Basic 語言的程式設計者輕鬆入門 Android App 開發 因為 B4A 使用的 BASIC 語言非常類似微軟.NET 的 Visual Basic 和 VB 6 語言 ( 雖然不是百分之一百相同, 不過差異不大 ), 只是額外增加很多物件的支援 事實上, 本書很多範例就是直接改寫自筆者 Visual Basic 語言相關圖書的範例, 如果讀者擁有一些現成的 VB 程式, 也一樣可以試著將它改寫成 Android 版本 不只如此,B4A 提供功能強大的 GUI 設計工具, 可以直接使用類似 Visual Studio 表單設計工具來建立使用介面, 而不用自行撰寫 XML 標籤碼, 換句話說, 我們可以輕鬆將 VB 控制項建立成 Android 版的介面元件, 只需加上 VB 語法的事件處理程序, 你會發現原來開發 Android App 一點都不難 如何閱讀本書 本書架構是循序漸進由 B4A 開發環境建立開始, 依序安裝 JDK Android SDK 和 Basic4android 開發工具, 然後在建立 2 個 Android App 後, 說明 B4A 的 Visual Basic 語法和正式進入 Android App 開發 ii

在第 1 章說明如何建立 B4A 開發環境 環境設定和 Android 模擬器的新增與使用, 第 2 章建立二個 Android App 範例來分別說明 B4A 開發步驟和 GUI 設計工具的使用, 最後說明 B4A 程式與專案的結構 第 3~4 章是 B4A 的 Visual Basic 語言, 筆者在第 3 章詳細說明 B4A 使用的 Visual Basic 語法, 第 4 章說明 B4A 內建物件和 IDE 介面的基本使用 在第 5 章說明基本使用介面的按鈕 標籤和文字方塊, 第 6 章是選擇功能的介面元件, 在第 7 章是選單 ListView 元件和對話方塊 在第 8 章詳細說明活動的生命周期和事件處理, 第 9 章說明建立多活動 App 和如何啟動內建應用程式, 與活動之間的資料交換 第 10~11 章是圖片顯示 繪圖 多媒體和動畫的建立, 在第 12 章說明文字檔案處理來儲存應用程式資料, 第 13 章說明服務模組和狀態列通知, 最後第 14 章是多個應用實例的綜合練習, 包含 : 質因數分解 解聯立方程式 分數的計算 換零錢機 井字遊戲和拉霸遊戲 附錄 A 是 Visual Basic 與 B4A 語法比較, 對於有經驗的 Visual Basic 程式設計者, 可以透過附錄快速了解語法之間的差異來將原來 Visual Basic 程式改寫成 Android App 編著本書雖力求完美, 但學識與經驗不足, 謬誤難免, 尚祈讀者不吝指正 陳會安於台北 hueyan@ms2.hinet.net iii

5 認識基本使用介面 5-1 B4A 的 GUI 設計工具 5-2 在 App 執行功能 - Button 元件 5-3 在 App 輸出資料 - Label 元件 5-4 在 App 輸入資料 - EditText 元件

簡單學 Basic4android 5-1 B4A 的 GUI 設計工具 B4A 的 GUI 設計工具可以連接 Android 模擬器或實機來幫助我們建立使 用介面的版面配置 基本上,GUI 設計工具主要是由兩個視窗組成, 即 Designer 和 Abstract Designer 視窗 5-1-1 Designer 視窗 在啟動 B4A 開發工具後, 點選上方功能表的 Designer 指令, 就可以 開啟 GUI 設計工具的 Designer 視窗, 如下圖所示 : 上述 Designer 視窗上方是功能表, 之下是連接 Android 模擬器或實機的狀態, 勾選右上方核取方塊, 可以讓 Designer 視窗永遠顯示在最上層, 在右下方是連接裝置的資訊 視窗中間是主要使用介面, 可以區分成三大區域, 如下所示 : 5-2

認識基本使用介面 5 屬性清單 : 在左上方選 Main 標籤, 可以看到選擇元件或活動 ( 在 Abstract Designer 視窗選取) 的屬性清單, 它是以群組方式分類, 點選之前 + 或 - 號可以展開或隱藏屬性清單, 每一個欄位是一個屬性, 在左邊是屬性名稱 ; 右邊是屬性值 圖檔清單 : 在版面配置加入元件或活動所需的圖檔清單, 例如 : 元件背景圖片, 按 Add Images 鈕加入圖檔, 在選擇後, 可以按 Remove selected 鈕刪除圖檔 版面配置變異 : 因為行動裝置的螢幕尺寸和解析度不同, 我們可以針對不同尺寸和解析度新增不同的版面配置變異 File 功能表 在 Designer 視窗的 File 功能表可以新增 開啟和儲存使用介面的版面配置檔, 其副檔名為.bal 請注意! 開啟 B4A 專案和 Designer 視窗有可能沒有自動載入版面配置檔, 此時, 請開啟 File 功能表, 可以在最後看到專案的版面配置清單, 點選即可開啟, 或執行 File>Open 指令自行開啟副檔名為.bal 的檔案, 在本書 B4A 專案預設名稱是 Main.bal Add View 功能表 在 Designer 視窗的 Add View 功能表可以新增版面配置所需的介面元件, 如右圖所示 : 執行上述指令可以在 Android 模擬器或實機的版面配置新增介面元件, 我們可以在 Abstract Designer 視窗看到新增的元件後, 就可以拖拉調整位置 尺寸和在 Designer 視窗修改元件的屬性值 5-3

簡單學 Basic4android Tools 功能表 在 Designer 視窗的 Tools 功能表可以自動產生成員(Generate Members) 調整元件前後的重疊位置(Bring to Front/Send To Back) 複製選擇元件 (Duplicate Selected Views) 和刪除選擇元件 (Remove Selected Views) 不只如此, 在 Tools 功能表還提供功能來連接或中斷連接 Android 模 擬器或實機, 如此, 就可以在 Android 模擬器或實機上檢視實際圖形使用介 面的外觀 5-1-2 Abstract Designer 視窗 在 B4A 開發工具點選上方功能表的 Designer, 可以進入 GUI 設計工具的 Designer 視窗, 並且同時開啟 Abstract Designer 視窗 ( 如果沒有看到, 請在 Designer 視窗執行 Tools>Show Abstract Designer 指令來開啟 ), 如右圖所示 : 上述視窗是以不同色彩方塊標示介面元件的位置和尺寸, 其內容是元件的 Name 屬性值 當在 Designer 視窗執行 Tools>Connect To Device/Emulator 指令成功連接 Android 模擬器或實機後, 可以執行 Layout>Match Connected Device 指令將它調整成連接裝置的尺寸 在選取元件上按滑鼠 右 鍵, 可以看到一個快顯功能表, 提供指令來複製 刪除元件和調整元件前後重疊位置, 我們可以將它移至最前或推至最後 最後一個 Generate 指令, 可以自動產生此元件的宣告程式碼, 或建立指定事件的事件處理程序 5-4

認識基本使用介面 5 請注意! 我們在 GUI 設計工具建立的介面元件, 如果在程式碼會使用到, 所有使用的介面元件都需要在活動類別的 Globals 程序中宣告, 變數名稱是 Name 屬性值, 因為這些介面元件已經預設初始化, 所以不需要呼叫 Initialize() 方法初始物件, 可以馬上使用, 如下所示 : Sub Globals Dim Button1 As Button Dim lbloutput As Label End Sub 5-1-3 Android App 的輸入與輸出 電腦程式通常都需要與使用者進行互動, 此類互動過程類似回答問題, 程式是提問者, 要求輸入特定資料 ; 使用者是回答者, 可以使用周邊輸入裝置來輸入資料, 當程式取得資料且處理後, 就會將執行結果顯示在電腦輸出裝置, 如右圖所示 : 一般來說, 程式在取得使用者鍵盤 ( 可能是虛擬鍵盤 ) 輸入的資料和執行後, 就會以指定格式在螢幕上顯示執行結果, 如下圖所示 : 對於 Android App 的輸出與輸入來說, 就是在活動版面配置上新增圖形使用介面的元件來執行資料的輸入與輸出, 如右圖所示 : 5-5

簡單學 Basic4android 在上述版面配置中擁有許多介面元件, 像是在一個大盒子中放入其他元件的小盒子, 以此例, 我們是使用文字方塊 (EditText) 元件輸入資料 ; 標籤 (Label) 元件輸出執行結果, 因為是事件驅動程式設計, 所以需要按鈕 (Button) 元件觸發 Click 事件來執行事件處理程序 5-1-4 介面元件的共同屬性 對於介面元件來說, 我們是在 Designer 視窗編輯選擇元件的屬性值, 所有 B4A 介面元件都擁有一些共同屬性, 其說明如下表所示 : 屬性 Name Type Event Name Parent Left Top Width Height Enabled Visible Tag 說明 元件名稱, 建議使用有意義的名稱, 而且在開頭使用 3 個字元來標示元件種類, 例如 :lbl btn edt 等 元件型態的唯讀屬性 處理事件的事件處理程序名稱, 預設與 Name 屬性值相同 事件處理程序名稱的格式是此屬性值加上 _ 符號, 再加上事件名稱, 例如 :Event Name 屬性值 Button1 的 Click 事件處理程序名稱為 Button1_Click 父元件名稱 ( 有些介面元件是容器元件, 可以包含子元件, 例如 :Panel 元件 ), 最上層是 Activity 活動 與父元件左方邊界的 X 軸座標, 單位是 dip 與父元件上方邊界的 Y 軸座標, 單位是 dip 元件寬度, 單位是 dip 元件高度, 單位是 dip 元件是否可以使用,True 是可以 ; 否為不可以 元件是否可見,True 是可見 ; 否為隱藏 儲存額外資訊, 可以簡化事件驅動程式設計, 來共用事件處理 上表 Top 和 Left 屬性可以決定元件位置,Width 和 Height 屬性決定元件尺寸 5-6

認識基本使用介面 5 5-2 在 App 執行功能 - Button 元件 Button 按鈕元件是 Android App 十分重要的元件, 它是實際執行功能的使 用介面 在日常生活中的按鈕也隨處可見, 例如 : 門鈴和遊戲控制器的按鈕, 按一下可以響起門鈴聲, 或發射子彈射擊 基本上, 我們建立的 Button 按鈕可以分為兩種 : 文字和圖形按鈕 在第 5-2-1 節是建立文字按鈕 ; 第 5-2-2 節是圖形按鈕 5-2-1 文字按鈕 Button 按鈕介面元件可以觸發 Click 事件來執行事件處理程序, 例如 : 在輸入資料後, 按下按鈕顯示計算結果或更改屬性等操作, 如下圖所示 : 上述按鈕元件預設使用文字顯示按鈕的標題文字, 即建立文字按鈕 按鈕的操作是按一下來表示按下按鈕 Button 元件的屬性 Button 元件的常用屬性說明, 如下表所示 : 屬性 Text TextStyle Pressed 按鈕的標題文字 說明 指定標題文字的樣式, 包含 :Typeface 字型 Style 字體 ( 正常 粗 斜和粗斜 ) Horizontal Alignment 水平對齊 Vertical Alignment 垂直對齊 Size 尺寸和 Text Color 的文字色彩 指定按鈕是否預設按下 5-7

簡單學 Basic4android Button 元件的 Click 事件處理 因為事件處理的詳細說明在第 8 章, 在此之前, 我們都是使用 Button 按鈕元件的 Click 事件來執行所需功能, 如下所示 : Sub Button1_Click Dim num1, num2 As Int num1 = Rnd(1, 13) ' 取得點數 num2 = Rnd(1, 13) Button1.Text = num1 & "*" Button2.Text = num2 End Sub 上述 Button1_Click 程序是 Button 元件 Click 事件的事件處理程序, 請注 意! 程式開頭的 Button1 是 Event Name 屬性值, 並不是 Name 屬性值 B4A 專案 Ch5-2-1\ 猜樸克牌點數.b4a 在 B4A 專案建立猜樸克牌點數大小的小遊戲, 使用 2 個 Button 元件模擬 2 張樸克牌, 按一下可以顯示點數, 讓我們猜測 2 張牌中, 哪一張牌的點數比較大 ( 點數是由亂數產生 ), 如右圖所示 : 按 樸克牌 1 鈕或 樸克牌 2 鈕, 可以顯示點數, 後面的星號表示是使用者按下的哪一個 Button 按鈕 GUI 設計工具 請建立 B4A 專案 Ch5-2-1\ 猜樸克牌點數.b4a, 專案屬性 ApplicationLabel 與活動標題 Title 同為 猜樸克牌點數, 套件名稱是 ch05.gui.b4a.example 5-8

認識基本使用介面 5 版面配置 :Main.bal 在版面配置新增與編排 2 個 Button 元件, 如右 圖所示 : 介面元件屬性 請選取各元件後, 更改各元件的屬性值, 如下表所示 : 介面元件 屬性 屬性值 Button1 Text 樸克牌 1 Button2 Text 樸克牌 2 程式碼編輯器 在 Main 模組輸入 Globals Activity_Create 和 Button1~2_Click 事件處理程序的程式碼, 如下所示 : 01: Sub Globals 02: Dim Button1 As Button 03: Dim Button2 As Button 04: End Sub 05: 06: Sub Activity_Create(FirstTime As Boolean) 07: Activity.LoadLayout("Main") 08: Activity.Title = " 猜樸克牌點數 " 5-9

簡單學 Basic4android 09: End Sub... 19: Sub Button2_Click 20: Dim num1, num2 As Int 21: num1 = Rnd(1, 13) ' 取得點數 22: num2 = Rnd(1, 13) 23: Button1.Text = num1 24: Button2.Text = num2 & "*" 25: End Sub 26: 27: Sub Button1_Click 28: Dim num1, num2 As Int 29: num1 = Rnd(1, 13) ' 取得點數 30: num2 = Rnd(1, 13) 31: Button1.Text = num1 & "*" 32: Button2.Text = num2 33: End Sub 程式碼說明 第 2~3 列 : 宣告名為 Button1 和 Button2 物件變數的 Button 元件, 它們是在 GUI 設計工具新增的介面元件, 因為程式碼需要使用這些物件, 所以需要在 Globals 程序宣告, 如此才能在 Button1~2_Click 事件處理程序中使用 請注意! 不同於第 4 章 StringBuilder List 和 Map 等物件, 在 GUI 設計工具 新增的元件, 預設就會呼叫 Initialize() 方法初始物件, 所以 Main 模組並不需要 初始這些在 GUI 設計工具加入的元件, 可以馬上使用 第 6~9 列 :Activity_Create 程序是在第 7 列指定載入的版面配置檔 Main.bal, 第 8 列指定活動的標題文字 第 19~33 列 :Button1~2_Click 事件處理程序是在第 21~22 列和第 29~30 列使用亂數取得 2 張牌的點數, 第 23~24 列和第 31~32 列指定 Text 屬性值 5-10

認識基本使用介面 5 5-2-2 圖片按鈕 圖片按鈕和文字按鈕的功能相同, 只是顯示外觀是一張圖片, 圖片支援 GIF JPG BMP 和 PNG 格式的圖檔 其相關屬性的說明, 如下表所示 : 屬性 Drawable 說明 選 StatelistDrawable 可以指定按鈕的圖片檔案來建立圖片按鈕, 而且還可以指定不同狀態顯示的圖片 上表 Drawable 屬性是介面元件使用的背景 當我們在 Drawable 屬性選 StatelistDrawable, 可以進一步指定相關屬性來指定不同狀態時顯示的 Drawable 物件, 其常用屬性說明, 如下表所示 : 屬性 Enabled Drawable Disabled Drawable Pressed Drawable Image file Gravity 說明 正常按鈕背景顯示的 Drawable 物件, 屬性值可以是 ColorDrawable GradientDrawable 或 BitmapDrawable 沒有作用按鈕顯示的 Drawable 物件, 屬性值可以是 ColorDrawable GradientDrawable 或 BitmapDrawable 按下按鈕顯示的 Drawable 物件, 屬性值可以是 ColorDrawable GradientDrawable 或 BitmapDrawable 當選擇 BitmapDrawable, 就可以在此欄位選擇我們在 Designer 視窗加入的圖檔 指定圖檔顯示方式是填滿 (Fill) 置中 (Center) 或位在左上角 (Top-Left) 選 ColorDrawable 指定顯示純色色彩 (Color) 四角的圓角半徑(Corner radius) 和透明度 (Alpha) 選 GradientDrawable, 可以指定第 1 和第 2 個色彩 (First Color/Second Color),Orientation 是漸層方向, 以便從第 1 個色彩以此方向漸層至第 2 個色彩 B4A 專案 Ch5-2-2\ 猜樸克牌人頭.b4a 在 B4A 建立猜樸克牌人頭的小遊戲, 這是 3 張樸克牌背面的圖形按鈕, 按下按鈕, 可以顯示樸克牌正面, 如下圖所示 : 5-11

簡單學 Basic4android GUI 設計工具 請建立 B4A 專案 Ch5-2-2\ 猜樸克牌人頭.b4a, 專案屬性 ApplicationLabel 與活動標題 Title 同為 猜樸克牌人頭, 套件名稱是 ch05.gui.b4a.example 版面配置 :Main.bal 在版面配置新增與編排 3 個 Button 元件, 如右 圖所示 : 5-12

認識基本使用介面 5 因為本節專案建立的是圖片按鈕, 我們需要新增按鈕顯示的圖檔, 其步 驟如下所示 : 請開啟 Designer 視窗, 可以在右上方看到 Image Files 框 按 Add Images 鈕, 可以看到 Choose image files 對話方塊 請切換至 B4A\Ch05 目錄選 Back.jpg, 按 開啟舊檔 鈕加入圖檔, 同樣方式, 請依序加 入 D13.jpg D8.jpg 和 H7.jpg 圖檔, 如右圖所示 : 5-13

簡單學 Basic4android 介面元件屬性 請依序選 3 個按鈕元件後, 更改 Button 元件的屬性值, 以 Button1 為例, 其屬性設定步驟, 如下所示 : 請在 Drawable 屬性選 StatelistDrawable, 可以看到下方展開的屬性清單, 如下圖所示 : 在 Enabled Drawable 屬性選 BitmapDrawable, 可以看到下方展 開的 Image file 屬性, 如右圖所示 : 請在 Image file 屬性選 Back.jpg 圖檔後, 在下方 Pressed Drawable 屬性選 BitmapDrawable, Image file 屬性選 D8.jpg, 如右圖所示 : 請重複上述步驟指定 Button2~3 的屬性,Enabled Drawable 都是 Back.jpg;Pressed Drawable 依序是 D8.jpg D13.jpg 和 H7.jpg 5-14