基礎篇

任務1 Hi，喵星人!

在計算機屏幕上輸出“Hello World”這行字符串的程序,是幾乎所有編程語言中一個典型的入門程序, 它可以用來確定編譯器、程序開發環境, 以及運行環境是否安裝正確。這一傳統可以追溯到1970年, 由貝爾實驗室成員布萊恩·柯林漢和里奇在《C程序設計語言》(The C Programming Language) 書籍中使用而廣泛流傳。

通過AppInventor, 即使是最簡單的應用, 也不僅僅是打印出一行“Hello World”的消息。本任務將一步步的通過Component Designer (組件設計) 和Blocks Editor (塊編輯器) 來引導讀者完成你的第一個Android應用程序“Hi, 喵星人!”——當你觸摸手機屏幕中的“喵星人”時, 它將發出“喵喵”的聲音。本任務完成后, 讀者就可以開始嘗試創建屬于你自己的Android應用了。

學習目標

● 了解使用AppInventor開發安卓應用的基本流程；

● 掌握使用Component Designer（組件設計）和Blocks Editor（塊編輯器）；

● 掌握如何設定當一個按鈕被單擊時的事件。

任務描述

創建一個以貓的圖片 (ketty.jpg) 為背景的按鈕,當你用手觸摸屏幕中的“喵星人”圖片時, 你的手機將發出“喵喵”的聲音, 就如屏幕中的貓所發出的聲音。

“Hi, 喵星人!”應用程序的運行截圖如圖1-1所示。

開發前的準備工作

工欲善其事, 必先利其器。在做每件事之前, 我們都要先把要用到的資源準備好, 這樣做起事情來才會有條不紊, 在程序開發中也是同樣一個道理!

上面的簡單介紹中, 我們可以看到, “Hi, 喵星人!”應用僅使用了一張圖片, 如圖1-2所示; 既然要讓“喵星人”發出“喵喵”的聲音, 所以還要準備一個貓叫聲的音頻(meow.mp3), 如圖1-3所示。

進入AppInventor的Designer頁面, 通過單擊左下Media窗格中的按鈕, 上傳我們所準備的圖片、音頻資源到項目中, 如圖1-4所示。

任務操作

1. 創建你的第一個Android應用

通過“導語”部分的學習, 想必讀者已經在自己的電腦上搭建好了AppInventor的開發環境, 以及學會如何進入Designer (設計師) 和Blocks Editor (塊編輯器)。你準備好創建第一個安卓應用程序了嗎？

首先, 在瀏覽器中打開 MIT AppInventor 官網, 通過之前申請的 Google 賬號登錄AppInventor, 登錄后進入項目管理頁面, 單擊按鈕來創建你的第一個Android項目,在所彈出的對話框中輸入你的項目名稱如“First”, 最后單擊 OK 按鈕, 如圖1-5所示。(注意: 項目名只能由英文字母、數字以及下劃線組成)

單擊完OK按鈕后, 網頁將自動跳轉到ComponentsDesigner (組件設計師) 頁面, 如圖1-6所示, 代表你創建好了一個Android項目。

2. 選擇組件并設置組件屬性

AppInventor的所有Components (組件) 位于頁面左邊項目標題下方的Palette (調色板)。Components (組件) 是你制作Android應用的基本元素, 它們就好比藥品配方里的成分一樣。一些組件比較簡單, 比如一個Label標簽組件, 它只是用來在屏幕中顯示文本內容; 再如一個Button按鈕組件, 當你單擊Button按鈕時觸發一個動作。

如果在應用中使用一個組件, 需要從Palette (調色板) 中選擇并拖動它到窗口中部的Viewer (指示器)。下面, 你需要一個Button組件用來顯示“喵星人”的圖片, 具體操作如下:

(1) 從Basic調色板拖動一個Button組件到Screen1, 并將其命名為 Buttonpop,如圖1-7所示。

(2) 按鈕要顯示一張“喵星人”的圖片,單擊 Buttonpop 按鈕組件, 在頁面最右邊的Properties (屬性) 窗格中單擊Image選擇框, 選擇之前準備的“喵星人”(ketty.jpg) 圖片, 如圖1-8所示。

(3) 改變按鈕的 Text 屬性: 刪除 Text for Button1文本內容, 使 Buttonpop 按鈕的 Text 為空, 否則“喵星人”的按鈕上會顯示“Text for Button1”的字樣。完成這一步驟后, 你的Designer (設計師) 顯示可參考圖1-9所示。件到右邊“喵星人”圖片的下方, 并設置其BackgroundColor背景色為Light Gray, FontSize字號為30, Text文本屬性為“Hi, 我是喵星人!”, TextAlignment文本排列屬性為center, TextColor字體顏色為Yellow, Width寬度為“Fill parent…”, 如圖1-10所示。

(4) 從Basic調色板拖拽一個Label標簽組

(5) 在Palette (調色板) 窗格的下方選擇Media抽屜, 并從中拖拽一個Sound聲音組件到右邊的Viewer (指示器) 中去, 然后設置它的Source聲源為我們之前上傳的音頻文件meow.mp3, 如圖1-11所示。

3. 添加組件行為

到目前為止, 你已經在Web瀏覽器窗口中為你的應用設計好了布局, 接下來需要開始對你所添加的組件添加一些行為, 來使“喵星人”圖片組件發出“喵喵”的叫聲。單擊左上方的按鈕打開一個程序窗口, 進入Blocks Editor (塊編輯器) 開始添加組件的行為。如果你還無法打開Blocks Editor, 請回顧“導語”的內容。需要注意的是, Components Designer (組件設計師) 在你的網頁瀏覽器中運行, 而Blocks Editor (塊編輯器) 卻是在你的程序窗口中運行, 如圖1-12所示。

進入塊編輯區后, 單擊左邊的導航, 可以看到剛剛你在布局界面添加(定義) 的那些Button按鈕、Label標簽、Sound聲音等組件, 如圖1-13所示。

之前我們用了一張很萌的貓咪圖片填充Button按鈕組件, 現在要讓它發出“喵喵喵”的叫聲。首先單擊中的Buttonpop, 然后會彈出Buttonpop中很多關于Button組件的方法塊, 我們拖動其中的Buttonpop.Click塊到右邊的空白區, 如圖1-14所示。

上面綠色的方法塊成為“事件處理塊”, 在事件處理塊中可以實現各種程序完成針對一些特定的事件, 例如一個按鈕被單擊, 手機被移動, 用戶在 Canvas (畫布) 中滑動等處理。

Buttonpop.Click塊當中的單詞“when”和“do”表示的是: 當Buttonpop按鈕被單擊時要做的事情是什么, 比如現在要讓貓咪發出之前所導入的音頻文件 (meow.mp3), 這時要在Buttonpop.Click塊當中的do缺口里面添加播放音頻的行為, 從中的Sound1抽屜中拖拽Sound1.Play塊到Buttonpop.Click塊的do缺口中, 如圖1-15所示。

好了, 現在開始運行一下你的“Hi, 喵星人!”吧! 單擊 Blocks Editor 右上方 New emulator按鈕, 創建運行一個虛擬的Android設備; 或在Connect to Device中選擇一個已存在的Android設備, 如圖1-16所示。如果單擊后小貓發出了叫聲, 恭喜你的第一個Android應用開發成功了!

任務小結

希望讀者通過本章的學習，不僅能掌握使用AppInventor開發Android應用程序的基本流程，還能產生對安卓應用程序開發的興趣，嘗試邊設計，邊制作。在整個程序的開發中，界面的簡潔以及邏輯思維的清晰非常重要。

自我實踐

讀者可以根據自己的興趣，在此應用的基礎上進行功能增強，例如：

● 當單擊按鈕的時候手機發生震動；

● 搖晃手機后發出貓咪的叫聲。