APPInventor實例及講解

1、第 1 章 H e l l o P u r r本章將開啟你的創(chuàng)建應(yīng)用之旅。 這里介紹了 AppInventor 的關(guān)鍵要素 組 件設(shè)計器及塊編輯器，并手把手地引導(dǎo)讀者創(chuàng)建第一個應(yīng)用： HelloPurr 。 在完成本章的學(xué)習(xí)之后，就可以開始創(chuàng)建自己的應(yīng)用了。每當(dāng)搭建了新的開發(fā)環(huán)境，通常運行的第一個程序就是顯示 “HelloWorld ，” 來證明系統(tǒng)已經(jīng)就緒。這個傳統(tǒng)可以追溯到 20 世紀(jì) 70 年代，從 BrianKernighan 在貝爾實驗室使用 C 語言開始（ Brian 現(xiàn)在是谷歌 AppInventor 團隊的訪問學(xué)者！）。使用 AppInventor ，即便是創(chuàng)建最簡單 的應(yīng)用，

2、也可以實現(xiàn)聲音的播放以及對屏幕觸摸的響應(yīng)， 而不只是顯示文字。 想想都令人感到興奮，那么，讓我們馬上開始吧。第一個應(yīng)用是 “HelloPurr （如圖 1-1 ），當(dāng)你觸摸這只貓時，它會發(fā)出 “喵嗚 ”聲；當(dāng)你搖晃它時，則 將發(fā)出嘟嘟的震顫。圖 1-1HelloPurr 應(yīng)用學(xué)習(xí)要點本章用到了以下組件和概念：? 選擇組件來創(chuàng)建應(yīng)用：決定了應(yīng)用的外觀；? 為組件設(shè)定行為：做什么以及何時做；? 使用組件設(shè)計器選擇組件， 在 Android 設(shè)備上， 有些組件可以顯示， 有些則 不可見；? 從本地計算機加載媒體文件（聲音或圖像），并添加到應(yīng)用中；? 用塊編輯器來組裝程序塊，以此來設(shè)定組件行為；? 用

3、 AppInventor 的實時測試功能對應(yīng)用進(jìn)行測試。 你可以一邊創(chuàng)建應(yīng)用， 一 邊在手機上看到它們外觀以及運行情況；? 將應(yīng)用打包并下載到 Android 設(shè)備上。AppInventor 的開發(fā)環(huán)境AppInventor 的編程環(huán)境包括以下三個重要組成部分，如圖 1-2 所示：? 如圖 1-2A 所示，組件設(shè)計器運行在瀏覽器中，創(chuàng)建應(yīng)用過程中，用它來進(jìn) 行組件的選擇，并進(jìn)行屬性設(shè)置；? 如圖 1-2B 所示，像組件設(shè)計器一樣，塊編輯器也在瀏覽器中運行，用于創(chuàng) 建組件的行為；? 測試設(shè)備： 在開發(fā)應(yīng)用過程中， 可以用 Android 設(shè)備對應(yīng)用進(jìn)行同步的運行 與測試；如果你手邊沒有 Andr

4、oid 設(shè)備，你可以使用系統(tǒng)中集成的 Android 模擬器來測試應(yīng)用。圖 1-2A 組件設(shè)計 器圖 1-2B 塊編輯器Inventor 。如果你是第一次使用 AppInventor ，你會看到彈出的項目 ( Projects ) 窗口，它多半是空的，因為你還沒有創(chuàng)建過任何項目。單擊頁面左上角的“Projectstart newproject創(chuàng)建一個項目，輸入“ HelloPurr作為項目名稱(注意不帶空格)，然后單擊 OK 。打開的第一個窗口是組件設(shè)計器( Designer )，你可以單擊窗口右上角的Blocks 按鈕來切換到塊編輯器。在 Project 右側(cè)的 Connect 下拉菜單中有

5、三個可選項（三類測試設(shè)備），如圖 1-3 所示。圖1-3單擊“Connect并選擇“AlCompanion”（應(yīng)用開發(fā)伴侶，或簡稱 AI伴 侶）如果手邊的 Android 設(shè)備可以通過 WIFI 訪問互聯(lián)網(wǎng)，用該設(shè)備訪問 GooglePlay ，搜索 MIT 的 AICompanion ，下載、安裝并啟動它。然后在“Connecf下拉菜單中選擇“AlCompanion”并按照彈出窗口以及 AI伴侶中 的提示進(jìn)行操作。 除此之外， 也可以使用 Android 模擬器來測試應(yīng)用， 選擇“ ConnectEmulator ”來加載 Android 模擬器，大約要等 30 秒鐘。設(shè)計組件我們使用的第一

6、個工具就是 （也只能是） 組件設(shè)計器。 組件是你用來創(chuàng)建應(yīng) 用的基本元素，就像菜譜中的原料。有些組件非常簡單，如“Label標(biāo)簽） 組件，它用于在屏幕上顯示文字；或者如 “ Butt on （按鈕）組件，輕按它則 引起一個動作。其它組件則要更復(fù)雜：一個繪圖的“Canvas” 畫布）組件可以容納靜止圖像或動畫； “ accelerometerSensor （”加速度傳感器）組件 是一種運動傳感器， 它的工作原理類似于 Wii 控制器， 它可以檢測到設(shè)備的 移動或搖晃； 還有的組件用于編寫并發(fā)送短信、 播放音樂和視頻以及從網(wǎng)站 獲取信息等等。當(dāng)你打開 Designer 時，其外觀如插圖 1-4 所

7、示。圖 1-4AppInventor 的組件設(shè)計器Designer 被劃分為如下幾個區(qū)域：? 中部的白色區(qū)域稱為預(yù)覽窗口（ Viewer ），用于放置應(yīng)用中所需的組件，你可以按照自己的喜好來安排這些組件。 預(yù)覽窗口只能粗略地顯示應(yīng)用的外 觀，例如，與測試設(shè)備中的應(yīng)用相比，在預(yù)覽窗口中，一行文字可能會在不 同的地方換行。 如果想看到應(yīng)用的實際外觀， 可以將應(yīng)用下載到測試設(shè)備上 （稍后我們會在 “打包應(yīng)用程序并下載 ”的部分詳細(xì)介紹），或者下載 AppInventor 自帶的模擬器。? 預(yù)覽窗口的左側(cè)是組件面板 （ Palette ），其中包含了可供選擇的各類組件。 該面板按類別劃分為幾個部分，

8、默認(rèn)情況下，只有用戶界面（ UserInterface ） 組件可見，可以通過點擊其他類別的標(biāo)題，如 Media （媒體）等，來查看其 他組件。? 預(yù)覽窗口的右側(cè)是組件列表（ Components ），顯示了項目中的所有組件， 拖動到預(yù)覽窗口中的任何組件都將顯示在該列表中。 目前，該項目中只有一 個組件： Screen1 ，它代表設(shè)備的屏幕。? 組件列表下方是媒體列表（ Media ），顯示項目中的所有媒體資源（圖像和 聲音）。本項目中尚未添加任何媒體資源，不過很快就會添加。 最右邊的部分用于顯示組件的屬性（ Properties ），在預(yù)覽窗口中單擊某個 組件，將在 Properties 下

9、方看到該組件的一系列屬性。屬性描述了組件的 詳細(xì)信息（如，單擊 Label 組件可以看到它的顏色、 文字內(nèi)容、字體的屬性。）， 可以修改屬性值。當(dāng)前顯示的是屏幕（名為 Screen1 ）的屬性，包括背景顏 色、背景圖像及標(biāo)題等。HelloPurr 應(yīng)用中需要兩個可視組件 （可以理解為應(yīng)用中確實可見的組件） ： Label 組件顯示文字 “寵物小貓 ”，而 Button 組件中有一張貓的圖片；還需要 一個非可視的 Sound （聲音）組件，用來播放聲音，如貓叫聲；還有一個 AccelerometerSensor （加速度傳感器） 組件，用于檢測設(shè)備的移動或搖晃。 不必?fù)?dān)心，我們將按一步一步地教你

10、使用這些組件。創(chuàng)建一個 Label （標(biāo)簽）添加的第一個組件是 Label ：1. 轉(zhuǎn)到組件面板（ Palette ），單擊 Label （列表中的第五個），并將其拖動到 預(yù)覽窗口（ Viewer ）中。你會看到一個矩形框出現(xiàn)在預(yù)覽窗口中，框里寫 著 TextforLabel1 。2. 看組件設(shè)計器右側(cè)的 Properties （屬性）框，它顯示了 Label 的屬性。在中 間位置有一個 Text 屬性，下面是 Label 中顯示的文字。將文字改為 “寵物小 貓”并按回車鍵。你會看到在預(yù)覽窗口中的文字也改變了。3. 單擊 BackgroundColor （背景色） 下面的方框來改變 Label

11、 的背景色， 目前 屬性值為 None （無背景色），從顯示的顏色列表中選擇藍(lán)色，并將Label的 TextColor （文字顏色）屬性改為黃色。最后將 FontSize （字號）屬性改 為 20 。Designer 的外觀如圖 1-5 所示：圖 1-5 應(yīng)用中有了一個 Label （標(biāo)簽）要確保 Android 測試設(shè)備或模擬器處于連接狀態(tài)。在設(shè)計器中添加的 Label 會在測試設(shè)備上顯示出來。 在 AppInventor 中，在設(shè)計器中為應(yīng)用添加組件， 等同于在設(shè)備上構(gòu)建應(yīng)用。 這樣一來， 你可以隨時看到應(yīng)用的外觀， 這就是所謂的實時測試， 你很快就會看到， 這樣的測試也同樣適用于在塊編輯

12、器中為組件添加行為。添加 Button （按鈕）組件HelloPurr 應(yīng)用中的貓咪用 Button 組件來實現(xiàn)： 創(chuàng)建一個普通 Button ，然后 將 Button 的圖像更改為貓咪。 在組件設(shè)計器（ Designer ）的組件面板（ Patatte ） 中單擊 Button （在列表的頂部），將它拖到預(yù)覽窗口（ Viewer ）中，置于 Label 下方。你會看到一個矩形按鈕出現(xiàn)在預(yù)覽窗口中。幾秒鐘后，該按鈕 就會出現(xiàn)在 Android 設(shè)備上。 試著輕擊設(shè)備上的按鈕， 有什么反應(yīng)嗎？不會 的，因為應(yīng)用沒有向 Button 發(fā)布命令。這是理解 AppInventor 的第一個要 點：添加

13、到設(shè)計器中的組件， 必須在塊編輯器中創(chuàng)建相應(yīng)的程序， 才能使組 件產(chǎn)生某種行為（在設(shè)計器中添加一個組件之后要做這件事）。我們希望當(dāng)點擊這個 Button 時，它會發(fā)出貓叫聲，但我們希望這個 button 開起來相隔小貓，而不是一個普通的方塊，因此需要為 button 設(shè)置圖片：1. 首先，需要下載的小貓的圖片， 并保存在你的電腦上。 從下載名為的圖片文 件（png是與jpg、gif等類似的標(biāo)準(zhǔn)圖像格式，在 Applnventor中，所有這 些都是有效的文件類型，與常用的標(biāo)準(zhǔn)聲音文件.mpg或.mp3 樣），同時 從下載聲音文件（選擇 “網(wǎng)頁另存為 ”來保存聲音文件）。2. 在預(yù)覽窗口中點擊該按

14、鈕，屬性框中將顯示其屬性。點擊中部 lmage 屬性（現(xiàn)在顯示的是 None ）。顯示“UploadFile 按鈕。3. 點擊“UploadFile 按鈕，再單擊彈出窗口中的 選擇文件”按鈕，瀏覽并選 擇之前下載的文件，然后單擊確定。4. 幾秒鐘之后，被列為Butt on的Image屬性的選項，單擊 “OK”與此同時,也出現(xiàn)在設(shè)計器窗口組件列表下面的Media區(qū)域中。在測試設(shè)備中，也將顯示貓咪的圖片，此時按鈕看起來像一只小貓咪。5. 注意到貓咪的圖片上顯示文字“ TextforButto n1，我們不希望在應(yīng)用中看到這些，因此將Button1的Text屬性改為 寵物小貓”一類的文字，或者干脆

15、刪除所有文字?，F(xiàn)在設(shè)計器看起來如圖1-6。圖1-6應(yīng)用中的一個Label和一個顯示為圖像的 Butt on添加貓叫聲我們希望當(dāng)點擊按鈕時，應(yīng)用會發(fā)出貓叫聲。為此需要添加貓叫的聲音文件， 并通過設(shè)定Butt on的行為來實現(xiàn)這一功能：1. 如果文件尚未下載，現(xiàn)在點擊鏈接下載；2. 在左側(cè)的組件面板中，單擊 Media類的標(biāo)題打開Media組件列表。向預(yù)覽 窗口中拖放一個Sou nd組件。無論你把它放在哪里，它都會出現(xiàn)在預(yù)覽窗口的底部，并被標(biāo)記為 “No-visiblecomponents （非可視組件）”。非可視 組件在應(yīng)用中發(fā)揮特定作用，但不會顯示在用戶界面中；3. 點擊Sound1以顯示其屬

16、性。設(shè)置其 Source屬性為。同貓咪圖片一樣，需 要從電腦中加載這個聲音文件。 加載完成后，Media列表中將出現(xiàn)與兩個文 件。表1-1中列出了現(xiàn)有的組件。表1-1HelloPurr中的組件組件類型面板中分組命名作用Butt onUserIn terfaceButto n1點擊發(fā)出貓叫聲LabelUser In terfaceLabel1顯示文本寵物小貓”Sou ndMediaSou nd1播放貓叫聲un defi ned添加組件行為剛剛添加了 Button、Label、以及Sou nd組件來構(gòu)建我們的第一個應(yīng)用，現(xiàn) 在使用塊編輯器來實現(xiàn)點擊 Butt on產(chǎn)生貓叫聲的功能。單擊設(shè)計器右上角

17、 的“Blocks按鈕切換到塊編輯器。在塊編輯器窗口中，可以為組件設(shè)定行為：做什么以及何時做。此處是讓小 貓按鈕在用戶點擊它時播放聲音。如果把組件比作菜譜中的原料，那么塊（Blocks ）則相當(dāng)于烹飪過程說明。發(fā)出貓叫聲在塊編輯器窗口的左側(cè)，“ Blocks標(biāo)題下面，可以看到許多分屬不同類別的按鈕，其中包括了我們在設(shè)計器中創(chuàng)建的所有組件：Screen1、Button1、Labell以及Sound1，點擊它們就像打開抽屜，將看到一組適用于該組件的 可選程序塊（Blocks ）。點擊Butto n1打開抽屜，顯示了與 Butt on有關(guān)的 程序塊，可以用它們來設(shè)置Butt on的行為，最上面的Bl

18、ock就是，如圖1-7 所示。圖1-7點擊Butt on1時顯示適用于Butt on組件的程序塊（Blacks）單擊標(biāo)有的塊并將其拖到工作區(qū)。注意，這個塊上包含了when。凡是包含when的塊都被稱為事件處理程序，用來定義當(dāng)組件上發(fā)生了某種特定事件 時，應(yīng)用該做什么。在本例中，當(dāng)用戶點擊貓咪（其實是按鈕）時發(fā)生了有趣的事情， 如圖 1-8 所示。下面我們將在程序中添加一些塊， 來響應(yīng)發(fā)生的 事件。圖 1-8 定義 “塊”來響應(yīng)用戶的點擊事件在塊編輯器中點擊 Sound1 打開抽屜，拖出 “塊”（之前將 Sound1 的 Source 屬性設(shè)置為）。注意，塊 的形狀恰好可以嵌入塊中標(biāo)有 “ dd

19、的缺口。AppInventor 的這種設(shè)置，確保只有特定的塊可以組合在一起，這樣確保了 連在一起的塊可以協(xié)同工作。 標(biāo)有 call 的塊用來定義組件的行為。 在本例中， 這兩個塊結(jié)合在一起，構(gòu)成一個單元，如圖 1-9 ，兩個塊連接到一起時，你 會聽到 “啪”的一聲。圖 1-9 點擊按鈕將播放貓叫聲 不同于傳統(tǒng)的程序代碼（通常像混亂的 “天書”一般） ，在 AppInventor 中， Blocks 拼出了行為。在本例中，我們等于說， “嘿， AppInventor ，當(dāng)有人點 擊小貓時，播放貓叫聲。 ”測試：讓我們通過檢查來確保一切正常 每當(dāng)向應(yīng)用中添加了新東西， 就 要進(jìn)行測試，這非常重要。

20、在測試設(shè)備上點擊該按鈕 （或在模擬器上單擊它） 。 你應(yīng)該聽到貓叫聲。恭喜你，你的第一個應(yīng)用跑起來了！。添加震動效果當(dāng)點擊按鈕時，讓貓咪發(fā)出“Purr聲和“meoW聲，這里用手機的振動來模擬“Pur聲。這聽起來很難，其實非常容易，因為播放 “meoW聲音組件也可以 使設(shè)備產(chǎn)生振動。 AppInventor 可以幫助你挖掘設(shè)備的核心功能，而無需考 慮它們?nèi)绾螌崿F(xiàn)振動?，F(xiàn)在只需要向 “塊”內(nèi)添加第二個行為：1. 進(jìn)入塊編輯器，單擊 Sound1 打開抽屜；2. 選擇塊，將其拖動到塊內(nèi)，置于塊下，恰好與原來的塊吻合；如果不吻合， 可嘗試拖動它，使塊頂部的凹陷恰好與塊底部的凸起相對。圖 1-10Cli

21、ck 事件引發(fā)了播放聲音及振動3. 注意：在塊的右下角寫著 millisecs （毫秒）。塊上的開放插槽表示需要插 入其他塊， 來設(shè)定行為的具體方式。 本例中，需要設(shè)定塊的振動時長。以毫 秒（千分之一秒）為單位輸入時長，毫秒是多數(shù)編程語言中慣用的時長單位。如果想讓設(shè)備振動半秒鐘，需要輸入數(shù)字塊“ 500?打開Math （數(shù)學(xué)）抽屜, 其中的第一個塊是 “0，這就是數(shù)字塊，如圖 1-11 所示。圖 1-11 打開 Math 抽屜4. 點擊 “ 0塊，藍(lán)色的 “ 0塊留在了工作區(qū)，如圖 1-12 所示?圖 11-12 選擇一個數(shù)字塊（ 0 為默認(rèn)值）5. 點擊數(shù)字 0，輸入新值 “ 500，如圖

22、1-13 所示?圖 11-13 將默認(rèn)值 0 改為 5006. 將“ 500數(shù)字塊插入塊右側(cè)的插槽內(nèi)，如圖 1-14 所示?圖 1-14 將數(shù)字塊 500 插入插槽 測試：試試吧！點擊設(shè)備上的按鈕，你會感覺到半秒鐘的嘟嘟聲（震動）?搖晃手機現(xiàn)在來添加最后一項， 在 Android 設(shè)備上實現(xiàn)一個很酷的功能： 搖晃設(shè)備時 發(fā)出貓叫聲。為此要用到 AccelerometerSensor （加速度傳感器）組件，它 可以檢測到設(shè)備的搖晃或移動。1. 在設(shè)計器中，展開組件面板中的傳感器（ Sensors ）分類，拖出一個 AccelerometerSensor （加速度傳感器）組件。不必介意把它放到哪里

23、，像 任何非可視化組件一樣， 無論你把它放在預(yù)覽窗口的什么地方， 它都會落到 預(yù)覽窗口底部的 “非可視組件 ”區(qū)域。2. 搖晃設(shè)備的事件需要與單擊按鈕事件分開處理。 這意味著需要一個新的事件 處理程序。進(jìn)入塊編輯器，打開 AccelerometerSensor1 抽屜，拖出塊。3. 像點擊按鈕時播放聲音一樣，將塊插入插槽，搖動設(shè)備試試看。圖 1-15 顯 示了完整的 HelloPurr 應(yīng)用中所用的塊。圖 1-15HelloPurr 應(yīng)用中的塊將應(yīng)用打包以供下載AppInventor 是一種云計算工具，這意味著你用谷歌的在線服務(wù)器存儲你的 應(yīng)用。所以當(dāng)關(guān)閉 AppInventor ，再重新返回

24、時，你的應(yīng)用還在；你不必在 個人電腦上保存任何東西， 像 Word 文件或音樂文件那樣。此外，如果連接 了測試設(shè)備， 無需向設(shè)備下載任何文件， 就可以輕松地測試應(yīng)用 （稱為實時 測試）；但問題是，如果設(shè)備與 AppInventor 斷開連接，那么應(yīng)用將停止運 行。由于從未在設(shè)備上安裝過應(yīng)用，因此無從找到應(yīng)用的圖標(biāo)?？梢詫?yīng)用下載并安裝到 Android 設(shè)備上， 以便在不連接計算機時， 應(yīng)用也 能運行。 首先，確保設(shè)備允許從 AndroidMarket 以外的地方下載應(yīng)用。 具體 做法是：在設(shè)備上選擇 設(shè)置t安全”并勾選Unknown Source （未知來源） 一項。然后回到 AppInve

25、ntor 設(shè)計器中，單擊 Build App （），此時窗口中 出現(xiàn)一個進(jìn)度條，這個過程大約需要一分鐘。進(jìn)度消失后， 幾秒鐘后，會顯 示打包應(yīng)用的 QR 碼。用條碼掃描軟件獲取 QR 碼之后， 設(shè)備會提示輸入谷 歌帳戶的密碼（如果設(shè)備之前登陸過 google 賬戶，此步驟不會出現(xiàn)）；密 碼輸入后，應(yīng)用被下載到設(shè)備上。如果你的設(shè)備中沒有條碼掃描軟件，去 GooglePlay 搜索并下載安裝一個。下載完成后，會詢問你是否安裝，請單 擊安裝。（如果設(shè)備上已經(jīng)安裝了 MITAI2Companion ，用其中的條碼掃描 功能，可以順利實現(xiàn)應(yīng)用的下載安裝。） 安裝完成后， 設(shè)備上出現(xiàn) HelloPurr

26、應(yīng)用的圖標(biāo) 這就是我們剛剛創(chuàng)建的 應(yīng)用， 點擊讓它開始運行。 （請確保運行的是新安裝的應(yīng)用， 而不是之前與 AppInventor 連接的應(yīng)用。）現(xiàn)在，你可以斷開連接甚至重新啟動設(shè)備，并 刪除 AppInventor 中的所有應(yīng)用，而新應(yīng)用依然存在。了解這一點很重要： 打包的應(yīng)用已經(jīng)與 AppInventor 中的項目分離。 你還可 以像之前一樣， 繼續(xù)在 AppInventor 中完善你的應(yīng)用， 并在測試設(shè)備上使用 AI 伴侶做實時測試，但這些都不會改變已經(jīng)安裝在設(shè)備上的應(yīng)用。如果在 AppInventor 中對應(yīng)用進(jìn)行了修改，那么修改結(jié)果必須重新打包，并下載安 裝新版本來替換設(shè)備上的原有版

27、本。馬上用 Android 設(shè)備下載安裝 HelloPurr 應(yīng)用吧，這樣，你就可以與家人和 朋友一起分享了！分享應(yīng)用 有兩種方式可以分享應(yīng)用： 第一，分享可運行的應(yīng)用。在 AppInventor 項目 中單擊 Build App （），此操作將擴展名為 apk 的文件保存到電腦。將 apk 文件上傳到 web 上，讓其他人可以下載并安裝。需要強調(diào)的是，設(shè)備的安 全設(shè)置中 “未知來源 ”一項必須選中， 才能安裝來源于 AndroidMarket 之外的 應(yīng)用。第二，與其它 AppInventor 開發(fā)者共享應(yīng)用的代碼塊：點擊Project MyProjects ，選中要共享的應(yīng)用（本例中是 H

28、elloPurr ），選擇project f Exportselectedproject（.aia）tomycomputer。此操作將擴展名為 aia 的文件 （）保存到電腦上默認(rèn)的下載文件夾中?？梢杂秒娮余]件把文件發(fā)給其他人，他們打開 AppInventor ，選擇 Project fImportproject ，并選擇 .aia 文件。 這樣， 使用者獲得了該應(yīng)用的完整備份， 對此備份的任何修改，都不 會影響原有版本。改進(jìn)現(xiàn)在，應(yīng)用已經(jīng)完成，并可以隨時運行它（或許還能下載與人分享），也許 還會感到什么地方有些欠缺。 來看看下面的問題， 并思考如何解決它們。 隨 著學(xué)習(xí)的進(jìn)展你會發(fā)現(xiàn)，通常是

29、先創(chuàng)建一個應(yīng)用，之后設(shè)法改進(jìn)、完善它， 并重新回到程序中來實現(xiàn)你的新想法。 不必?fù)?dān)心， 這很好，這正是一名優(yōu)秀 開發(fā)者的必經(jīng)之路！? 當(dāng)搖晃設(shè)備時，貓的叫聲聽起來有點兒奇怪，好像有回聲。這是因為在 1 秒鐘內(nèi)， 加速度傳感器多次觸發(fā)搖動事件， 所以貓叫聲是重疊的。 你會發(fā)現(xiàn) Sound 組件有一個屬性 Minimuminterval （最小間隔），它決定了兩次聲音 播放之間的時間間隔。當(dāng)前設(shè)置為 400 毫秒（約半秒鐘），這個間隔小于 單次貓叫的持續(xù)時間（ 500 毫秒）。通過改變播放的最小間隔，可以改變聲 音的重疊。? 如果你帶著安裝了應(yīng)用的手機到處走動， 每當(dāng)你突然移動時， 設(shè)備就會發(fā)出

30、貓叫聲， 這可能讓你覺得尷尬。 通常 Android 應(yīng)用會保持在運行狀態(tài)， 即使 你不去管它們， 應(yīng)用程序與加速度傳感器之間的通信也不會間斷， 因而貓叫 聲也會相繼傳來。要想真正退出程序，需要呼出 HelloPurr 應(yīng)用并按下設(shè)備 上的菜單按鈕，會呼出兩個選項，其中 stopthisapplication 用來停止并完全 關(guān)閉應(yīng)用。小結(jié)以下是本章中涵蓋的內(nèi)容：? 創(chuàng)建應(yīng)用的過程： 在組件設(shè)計器中選擇組件， 并在塊編輯器中設(shè)定它們的行 為 做什么及何時做；? 有些組件是可見的，有些則不可見?？梢娊M件會出現(xiàn)在應(yīng)用的用戶界面中； 不可見組件執(zhí)行像播放聲音這類的事情；? 通過在塊編輯器中組裝 “塊

31、”來定義組件的行為。先拖出一個像這樣的事件處 理程序，然后將這樣的命令塊嵌入其中。 這樣， 當(dāng)用戶點擊該按鈕時，塊中 的所有塊（命令）都將被執(zhí)行；? 有些塊（命令） 需要附加特定信息才能起作用。 例如震動就必須設(shè)定振動的 毫秒數(shù)。這些值被稱為參數(shù)。? 數(shù)字塊用來表示數(shù)字。你可以將這些數(shù)字塊插入到需要參數(shù)的命令塊中? AppInventor 提供傳感器組件， 加速度傳感器 （AccelerometerSensor） 可以檢 測到設(shè)備的移動。? 你可以將創(chuàng)建完成的應(yīng)用打包并下載到手機上，它們將獨立于 AppInventor 而運行。第 2 章油漆桶本章介紹Canvas組件，用它來生成簡單的二維（2

32、D）圖形，目標(biāo)是創(chuàng)建一個 PaintPot （油漆桶） 應(yīng)用， 讓用戶在手機屏幕上繪制圖畫， 并讓用戶用 手機給自己拍照，然后在自己的照片上繪圖。回顧歷史，早在 20 世紀(jì) 70 年代， PaintPot 是最早運行在個人電腦上的應(yīng)用之一， 目的是為了證明個人 電腦的潛力。那時候，開發(fā)這樣一款簡單的繪圖應(yīng)用是一項極其復(fù)雜的工作， 而且繪圖效果也略顯粗糙。但現(xiàn)在，使用 AppInventor ，任何人都可以快速 地創(chuàng)建一個有趣的繪圖應(yīng)用，這也是創(chuàng)建 2D 游戲的起點。如圖 2-1，油漆桶應(yīng)用將實現(xiàn)下列目標(biāo)：? 用手指點取顏色并繪圖；? 用手指在手機屏幕上畫線；? 用手指觸碰手機屏幕畫圓點；? 點

33、擊按鈕來擦凈屏幕；? 點擊按鈕來改變繪制圓點的大小；? 用相機拍攝照片，并在照片上畫圖。圖 2-1 油漆桶應(yīng)用學(xué)習(xí)內(nèi)容本章涵蓋了以下內(nèi)容：? 使用 Canvas 組件來繪制圖畫；? 處理屏幕上的觸摸及拖拽事件；? 使用 arrangement 組件來控制屏幕的外觀；? 使用帶有參數(shù)的事件處理程序；? 定義變量，來保存某些狀態(tài)，如用戶繪制的圓點的大小。準(zhǔn)備開始首先檢查測試用的 Android 設(shè)備是否已經(jīng)為使用 AppInventor 做好了準(zhǔn)備：? An droid設(shè)備中已經(jīng)安裝了 “ A伴侶”? 手機的 WiFi 連接已經(jīng)打開；再訪問網(wǎng)站。新建項目“PaintPot,點擊“ConnecAAI

34、Companion”，并按照 提示操作，連接測試設(shè)備。在正式開始之前，在組件設(shè)計器右側(cè)的屬性”面板中，將“Screen1的“Title屬性修改為 “油漆桶 ”。在測試設(shè)備上可以立即看到這一改變：應(yīng)用的標(biāo)題欄 將顯示 “油漆桶 ”。這樣做是否會混淆了項目名稱與屏幕標(biāo)題呢 （在英文版書中，將 Title 改為“PaintPot,與項目同名，因此才有此疑問，對中文讀者來說不存在這個疑問。 譯者注 ）？別擔(dān)心！在 AppInventor 中有三個非常重要名稱：? 項目名稱： 同時也是應(yīng)用發(fā)布時所使用的名稱。 提示：想修改項目名稱， 可 以點擊 Project-Saveprojectas ，可以將原有項

35、目賦予新的名稱，同時原有 項目依然得以保留；? 組件名稱：一般的組件名稱都可以修改，但 Screen1 例外，在當(dāng)前版本中 不能修改它的名稱；? 屏幕標(biāo)題：出現(xiàn)在設(shè)備的標(biāo)題欄中，是 Screen 組件的 Title 屬性，默認(rèn)值 是 Screen1 ，如第一章 HelloPurr 中所見，可以隨意修改它，如我們剛才將 其改為 “油漆桶 ”。設(shè)計組件創(chuàng)建“油漆桶 ”應(yīng)用需要以下組件：? 三個 Button 組件：用來選擇畫筆顏色：紅、藍(lán)或綠，放在 HorizontalArrangement 組件中；? 一個 Button 組件用來充當(dāng)橡皮；? 另外兩個 Button 組件用來改變畫筆的大?。?

36、一個 Canvas 組件，充當(dāng)畫布。 Canvas 具有 BackgroundImage 屬性，我 們將其設(shè)置為第一章 HelloPurr 中的，稍后還可以將背景圖片設(shè)置為用戶拍 攝的照片。創(chuàng)建顏色按鈕首先按照以下提示創(chuàng)建三個顏色按鈕：1. 拖一個 Button 組件到預(yù)覽窗口， 設(shè)置其 Text 屬性為 “紅 ”，BackgroundColor 屬性設(shè)為紅色；2. 在組件列表中選中 Button1 （可能已經(jīng)被選中） ，點擊 Rename 按鈕將組件 名稱改為 RedButton 。注意組件名稱中不允許有空格， 因此通常將組件名稱 中每個單詞的首字母大寫。3. 同樣，創(chuàng)建另外兩個按鈕，分別命

37、名為 BlueButton 和 GreenButton ，將它 們垂直地放在 RedButton 下方。對照圖 2-2 ，檢查一下你的操作結(jié)果。 圖 2-2 創(chuàng)建了 3 個按鈕的預(yù)覽窗口 注意：在項目中， 建議為組建起一個有意義的名稱， 而不是像第一章那樣采 用默認(rèn)名稱。 有意義的名稱增加了程序的可讀性， 尤其是在切換到塊編輯器 時，將有助于區(qū)分不同的組件。本書中，采用慣用的駱駝命名法（如 RedButton ），即多單詞無空格的首字母大寫命名方式。測試：如果你還沒有點擊 “ Conn ect來連接測試設(shè)備，那么做好連接，然后 檢查一下應(yīng)用在設(shè)備（如果已經(jīng)連接）上的表現(xiàn)。使用 Arrangem

38、ent 組件改善布局 現(xiàn)在三個按鈕排成一列縱隊， 我們希望它們能排成一行， 如圖 2-3 所示，使 用 HorizontalArrangement 組件來實現(xiàn)組件的水平排列：1. 在組件面板的 Layout 類中拖出 HorizontalArrangement 組件，放在按鈕下 方；2. 在屬性面板中，設(shè)置 HorizontalArrangement 的 width 屬性為 “ FillPare n（t 充”滿父容器），以便在水平方向上占滿整個屏幕；3. 將三個按鈕移動到 HorizontalArrangement 中。注意，當(dāng)你拖拽按鈕時，會看到一條藍(lán)色豎線，提示按鈕將會被放置在什么地方。圖

39、 2-3 在水平布局組件內(nèi)的三個按鈕 此時查看組件列表，你會發(fā)現(xiàn)三個按鈕縮進(jìn)排列在 HorizontalArrangement 項下，以顯示它們現(xiàn)在是次一級的組件。同時注意到所有組件都縮進(jìn)排在 Screen1 項下。測試：在測試設(shè)備的屏幕上， 你會看到三個按鈕排列成一行， 盡管看起來與 預(yù)覽窗口中略有不同。如，在預(yù)覽窗口中可見的 HorizontalArrangement 周 圍的輪廓線，在測試設(shè)備上則不可見。通常采用布局組件來創(chuàng)建簡單的垂直、 水平或表格布局， 也可以通過逐級插 入（或嵌套）布局組件來創(chuàng)建更加復(fù)雜的布局。添加 Canvas （畫布）Canvas 像一塊畫布，用戶可以在上面繪畫

40、 （畫圓、畫等）。添加一個 Canvas ， 并用第一章中的作它的背景圖片（設(shè)置 BackgroundImage 屬性），具體步 驟如下：1. 打開組件面板中的 DrawingandAmination （繪畫與動畫）類，將 Canvas 組件拖到預(yù)覽窗口中，改名為DrawingCanvas , Width設(shè)為“Fillparent, ”Height 設(shè)為 300pixels ；2. 如果你已經(jīng)完成了第一章的課程， 那么文件已經(jīng)下載； 如果沒有， 請在這里下載。3. 將 DrawingCanvas 的 BackgroundImage 設(shè)置為：在設(shè)計器的屬性面板中， BackgroundImage

41、 的默認(rèn)值為 None ，點擊 None 及 UploadFile 來添加文 件；4. 將 DrawingCanvas 的 PaintColor 屬性設(shè)置為 red ，以便當(dāng)用戶剛啟動應(yīng)用 但尚未點擊顏色按鈕時，畫筆為紅色。對照圖 2-4 檢查一下你的操作。 圖 2-4 背景圖片設(shè)為的 DrawingCanvas 組件 設(shè)置底部按鈕及照相機組件1. 從組件面板中拖出第二個 HorizontalArrangement ，放在 canvas 下方，再 拖兩個 Button 并置于屏幕底部的 HorizontalArrangement 中；將第一個按 鈕改名為 TakePictureButton ，

42、Text 屬性設(shè)為 “拍照 ”；第二個按鈕改名為 WipeButton ，Text 屬性設(shè)為 “清除 ”；2. 再拖兩個 Button 組件到 HorizontalArrangement 中，放在 “清除 ”按鈕后面；3. 兩個 Button 分別命名為 BigButton 、SmallButton ，Text 屬性分別設(shè)為 “大圓 ”、 “小圓”；4. 從組件的 Media 類中拖出一個 Camera 組件放在預(yù)覽窗口中，它將落在非 可視組件區(qū)。到此為止，應(yīng)用外觀已經(jīng)設(shè)置完成，如圖 2-5 所示。圖 2-5 油漆桶應(yīng)用的完整用戶界面 測試：在設(shè)備上檢查一下應(yīng)用， 貓的圖片是否在頂部的一行按鈕

43、的下方？底 部的按鈕是否正常顯示？為組建添加行為 下一步將定義組件的行為。 編寫一個繪畫程序的難度似乎是難以想象的， 但 無疑 AppInventor 已經(jīng)承擔(dān)了大部分繁重的工作： 這里有易于使用的塊語言， 不但可以處理用戶的觸摸及拖拽事件，也可以實現(xiàn)繪畫及拍照功能。Canvas 組件具有 Touched 及 Dragged 事件，你可以針對（觸碰）事件編 程，并調(diào)用（畫圓）程序；也可以對 （拖拽）事件編程來調(diào)用 （畫線）程序。 然后對按鈕編程，來設(shè)置（畫筆顏色）屬性、清除 DrawingCanvas ，以及 將 DrawingCanvas 的背景圖片修改為照相機拍攝的圖片。添加觸摸事件，繪制

44、一個圓點 首先設(shè)置觸碰行為：當(dāng)用戶觸碰 DrawingCanvas 時，在接觸點繪制一個圓 點：八、圖 2-6 帶有接觸點位置信息的 Toughed 事件1.在塊編輯器中，打開 DrawingCanvas 抽屜拖出塊，該塊有三個參數(shù) x、 y 及 touchedSprite ，如圖 2-6 所示。這些參數(shù)提供了接觸點的位置信息； 提示：在第一章 HelloPurr 應(yīng)用中已經(jīng)熟悉了事件，但對 Canvas 事件還很 陌生。 事件的發(fā)生很簡單， 不附帶任何其他信息；但有些事件則不然，它們 附帶了與事件有關(guān)的 “參數(shù)”信息。事件中的 x、y 代表接觸點在 DrawingCanvas 中的坐標(biāo)，而

45、touchedSprite 代表接觸點所碰到的 DrawingCanvas 中的對象 （在 AppInventor 中稱作 sprite 精靈），但在第 三章之前我們不會用到它。我們將利用接觸點的 xy 坐標(biāo)來繪制圓點。2. 從 DrawingCanvas 抽屜中拖出命令塊，放在事件處理程序中，如圖2-7所示；圖 2-7 用戶觸摸畫布時，應(yīng)用繪制一個圓點在塊的右側(cè)有三個插槽，需要填入三個參數(shù)：x、y、r。其中x、y用于指定繪制圓形的位置，r用于指定圓的半徑。在屏幕左下角帶感嘆號的黃色警告 顯示數(shù)字“ 1,”表示需要填滿這些插槽。從圖中看到，有兩組xy，這里要區(qū)分清楚：事件中的xy表示接觸點位置

46、（已知）；而命令塊的 xy插槽，用于 設(shè)定繪制圓形的位置 （待定） 。我們恰好要在用戶的接觸點繪制圓形，因此 事件中的xy值，可以作為的x、y參數(shù)，插入到插槽中。提示：可以從“wher塊中提取事件的參數(shù)值，將鼠標(biāo)懸停在參數(shù)上，將呼出“get及“se塊?？梢詫ⅰ癵etx塊拖出并插到x插槽中，作為DrawCircle 命令的 x 值。如圖 2-8 所示。圖2-8讀取事件參數(shù)：從事件中拖出“getx塊3. 將鼠標(biāo)懸停在x、y參數(shù)上可以喚出“ge塊，將“ge塊插入到的插槽中，如圖 2-8、 2-9 所示；圖 2-9 已經(jīng)設(shè)定了圓的位置（ x,y） ，尚未指定圓的大小圖2-10當(dāng)用戶觸碰DrawingC

47、anvas時，將在（x,y）點繪制一個半徑為5的 圓形4. 下面來設(shè)定圓的半徑r。長度的單位是pixel （像素），是屏幕上能夠繪制 的最小的點。設(shè)r=5 :點擊屏幕的空白區(qū)域，輸入 5然后回車（自動創(chuàng)建數(shù) 字塊“5）”并將其插入插槽 r 中。再看屏幕左下角的黃色三角形，數(shù)字由 1 變?yōu)?0，因為所有插槽都被填滿了。圖 2-10 顯示了事件處理程序最終的樣 子。提示：在塊編輯器中輸入 5 然后回車，這種操作叫做輸入塊 （typeblocking ）。 塊編輯器會根據(jù)你輸入的字符， 顯示與該字符相匹配的一系列塊； 如果輸入 的是數(shù)字，那么將創(chuàng)建一個數(shù)字塊。測試：看看測試設(shè)備上都有什么。觸碰 Dr

48、awingCanvas ，手指碰過的地方 會留下一個圓點。 如果在設(shè)計器中將屬性設(shè)置為紅色， 那么圓點也是紅色（否 則應(yīng)該是默認(rèn)的黑色）。添加畫線的拖拽事件下面添加拖拽事件處理程序，先看一下觸碰（ Toughed ）事件與拖拽 （Dragged ）事件的區(qū)別：? 觸碰事件：手指在 DrawingCanvas （畫布）上放下再抬起，其間手指沒有 移動。? 拖拽事件：手指在 DrawingCanvas （畫布）上放下，手指與屏幕保持接觸 并移動。在繪圖程序中， 手指在屏幕上拖動， 沿著手指移動的路徑， 將繪制出一條巨 大的曲線， 因為這條曲線實際上由數(shù)百個微小的線段構(gòu)成： 手指每次微小的 移動，都

49、將繪制一個微小的線段。1. 從 DrawingCanvas 抽屜中拖出事件處理程序塊， 如圖 2-11 所示；事件攜 帶了以下參數(shù)：? StartX 、StartY ：手指開始拖動時所在的位置（整個曲線的起點）；? currentX 、 currentY ：手指的當(dāng)前位置（微小線段的終點）；? prevX 、 prevY ：手指的上一個位置（微小線段的起點）；? draggedSprite ：布爾值，如果用戶直接拖動一個圖片，則其值為真。本章 不會用到這個參數(shù)。圖 2-11 比起 Toughed 事件， Dragged 事件攜帶了更多參數(shù)2. 從 DrawingCanvas 抽屜中拖出塊，插入

50、塊中，如圖 2-12 所示。圖 2-12 添加畫線功能塊有四個參數(shù)，兩點確定一線：設(shè)（X1 , Y1 ）為起點，（X2 , Y2）為終點。 你能確定每個參數(shù)中需要插入什么值嗎？記住，當(dāng)手指在 DrawingCanvas 上拖動時， 拖動事件將被調(diào)用很多次： 在應(yīng)用中， 手指的每次移動都會繪制 出一個微小線段，從（ Prevx,prevy ）到（ currentX,currentY ）?，F(xiàn)在把它 們填入塊。3. 拖出“ge塊來充當(dāng)畫線的參數(shù)。將 getprevX與getprevY分別插入到x1 和 y1 插槽；而 getcurrentX 與 getcurrentY 插入到 x2 和 y2 插槽，

51、如圖 2-13 所示。圖 2-13 用戶在屏幕上拖動手指，應(yīng)用就在前一位置與當(dāng)前位置之間畫一條 微小線段測試：在設(shè)備上測試一下剛剛設(shè)定的行為： 在屏幕上隨意拖動手指， 畫出線 段及曲線；觸碰屏幕畫出一個圓點添加按鈕事件處理程序 應(yīng)用已經(jīng)實現(xiàn)了畫線功能， 但現(xiàn)在只能畫紅線。 下面添加顏色按鈕的事件處 理程序，用戶可以改變畫筆的顏色；同樣設(shè)置清除按鈕 WipeButton ，以便 用戶可以清除畫面并重新開始。在塊編輯器中：1. 展開左側(cè)塊的（ Blocks ）列表；2. 打開 RedButton 抽屜，拖出塊；3. 打開 DrawingCanvas 抽屜。拖出塊（可能需要滾動塊的列表以便在抽屜里找

52、到它），并把它放在塊 “ dd”J位置；4. 打開 Colors 抽屜，拖出紅色塊，將其插入塊的插槽；5. 重復(fù)步驟 2-4 ，設(shè)置藍(lán)色和綠色按鈕；6. 最后設(shè)置 WipeButton 按鈕。從 WipeButton 抽屜中拖出塊。再從DrawingCanvas 抽屜里拖出塊， 并將其放在塊中。 確認(rèn)所有塊顯示如圖 2-14 所示。圖 2-14 單擊顏色按鈕改變 DrawingCanvas 的畫筆顏色；單擊清除按鈕清空屏幕讓用戶拍照片AppInventor 應(yīng)用可以與 Android 設(shè)備的強大功能進(jìn)行交互， 包括相機功能。 為了增加應(yīng)用的趣味性， 用戶可以將繪圖背景設(shè)置為他們用相機拍攝的照片

53、。1. Camera 組件有兩個關(guān)鍵的塊： 塊用來啟動設(shè)備上的拍照程序； 拍照完成將 觸發(fā)事件。在事件處理程序中，可以將剛剛拍攝的照片設(shè)置為。打開 TakePictureButton 抽屜并拖出事件處理程序；2. 從 Camera1 抽屜拖出放在事件處理程序中；3. 從 Camera1 的抽屜中拖出事件處理程序；4. 從 DrawingCanvas 抽屜拖出塊放在事件處理程序中；5. 事件有一個名為 image 的參數(shù)，代表剛剛拍攝的照片，將從塊中得到的getimage 塊插入塊。所有的塊如圖 2-15 所示。圖 2-15 拍完的照片被設(shè)置為 DrawingCanvas 的背景圖片 測試：在設(shè)

54、備上點擊 “拍照 ”按鈕并拍攝照片，貓的圖片變成了你拍的照片。 你可以在自己的照片上進(jìn)行繪畫。 （用 Wolber 教授的照片繪畫是學(xué)生們的 一大樂事，如圖 2-16 。）（ Wolber 教授是本書的作者之一。） 改變畫筆大小圖 2-16 帶有 Wolber 教授涂鴉照片的 PaintPot 應(yīng)用在 DrawingCanvas 上畫圓點，其大小由塊中參數(shù) r 決定。改變 r 值可以改 變圓點的大小。試試看將 5 改為 10 ，然后在測試設(shè)備上查看結(jié)果。另一個問題是，無論開發(fā)者如何設(shè)置參數(shù)r,用戶都只能用這個固定的尺寸。如何讓用戶來改變圓點的大小呢？為此我們來修改程序：當(dāng)用戶點擊 “大圓 按鈕

55、時,圓點半徑設(shè)為 8,當(dāng)點擊 “小圓 ”時半徑設(shè)為 2。我們要用不同的半徑畫圓, 但應(yīng)用怎么知道我們要用哪個值呢？必須通知應(yīng) 用我們選定的值,而應(yīng)用必須以某種方式記住（或保存）這個值,這樣才能 在需要的時候使用它。 之前我們所使用的值, 要么設(shè)定為屬性（如畫筆顏色） , 要么用固定的數(shù)字塊（如畫筆大?。?現(xiàn)在應(yīng)用需要記住一些屬性之外的、 不是固定不變的東西， 這就需要定義一個變量。 變量是一個存儲單元， 可以 把它想象成一個容器， 里面存儲著可變的數(shù)據(jù)， 如畫筆的大小 （有關(guān)變量的 詳細(xì)信息，請參見 AppInventor 指南第 16 章）。讓我們先來定義一個變量 dotSize ：1. 在

56、塊編輯器中， 從 Variables （變量）抽屜中拖出一個 initializeglobalnameto 塊。將 “name改為 “dotSize；2. 請注意， initializeglobaldotSizeto 塊有一個開放的插槽，可以在這里設(shè)定變 量的初始值，或者說是應(yīng)用啟動時的默認(rèn)值 （編程術(shù)語稱為 “初始化變量 ”）。 在本應(yīng)用中，用數(shù)字塊 2 來初始化變量 dotSize ，（創(chuàng)建塊 “2的”方法有兩種： 在空白區(qū)直接輸入 “2然”后回車；或從 Math 抽屜中拖出 “0塊” ，將 0改為 2。） 將其插到 initializeglobaldotSizeto 塊的插槽中，如圖 2

57、-17 所示。圖 2-17 將 dotSize 變量的初始值設(shè)為 2使用變量下一步，我們要修改事件處理程序，將其中塊的參數(shù) r 的固定值用變量 dotSize 來代替。 （我們先將 dotSize 的初始值設(shè)定為 “固定”的 2，但稍后我 們將改變 dotSize 的值，并同時改變畫筆的大小。）1. 從 initializeglobaldotSizeto 塊中拖出一個 getglobaldotSize 塊，用它來提供 變量的值；2. 轉(zhuǎn)到事件處理程序，將數(shù)字塊“ 5拖”出插槽并扔進(jìn)垃圾桶，用getglobaldotSize 塊來替換（見圖 2-18 ）。當(dāng)用戶觸摸到 DrawingCanvas 時，應(yīng)用將根據(jù) dotSize 的大小來確定圓點的半徑。圖 2-18 畫筆的大小取決于變量 dotSize 中保存的值修改變量值現(xiàn)在變量魔法登場， 變量 dotSize 允許用戶選擇畫筆的大小， 而事件處理程 序也將以 dotSize 為半徑來畫圓。 通過設(shè)計和的事件處理程序來實現(xiàn)此功能：1. 從 SmallButton 抽屜中拖出事件處理程序；再從 Variables 抽屜中拖出一個“se塊，下拉選擇globaldotSize，并將其插入塊；最后，創(chuàng)建一個數(shù)字塊“2” 并將其插入 setglobaldotSize