本文截取自《Android開發權威指南》 轉發微博有機會贏得《Android開發權威指南》
從AppInventor本身的名字來看，可將其拆成兩個單詞：App和Inventor。App表示應用程序，而Inventor是發明家。Inventor這個單詞充滿了藝術氣息。那麼將這兩個單詞連接來，就是發明程序（要注意，不是編寫程序，而是發明程序），而且要用藝術的方法。下面先來看一看用AppInventor發明出的程序是個什麼樣。圖1是一個用AppInventor發明的程序。功能很簡單，隨機產生一個1至100的整數，如果隨機數的值大於50，則將按鈕的背景色設爲綠色，否則將按鈕的背景色設爲紅色。
很多讀者一開始看到這個程序，肯定以爲是拼圖。但這的的確確是一段程序，只是看上去有些像藝術品。看到這，肯定很多讀者和我一樣按耐不住了，想快點了解如何使用AppInventor來發明Android程序。OK，在接下來的部分將爲讀者逐一揭開心中的迷團。
圖1 用AppInventor發明的程序
AppIntentor分爲兩部分：界面設計和代碼編寫（也可稱爲代碼拼圖）。其中界面設計部分是基於Web的應用程序。如果只是設計界面，並不需要安裝任何的軟件或SDK，只需要在瀏覽器中訪問如下的URL即可。
http://appinventor.googlelabs.com
使用AppIntentor之前需要有一個Google GMail帳號（沒有GMail帳號的讀者趕緊到http://mail.google.com去註冊一個吧）。使用GMail登錄後，直接訪問上面的地址就可以進入如圖2所示的AppInventor主界面。
圖2 AppInventor的主界面
單擊“New”按鈕可以新建一個Android工程。在本例中已經建立了一個DrawRandomCircle工程。單擊“DrawRandomCircle”鏈接進入工程主界面，如圖2.35所示。在這個界面中已經包含了設計好的DrawRandomCircle程序，在下一節將會詳細介紹如何使用AppInventor設計Android應用程序的界面。
圖3 AppInventor的設計界面
AppInventor除了設計界面的工具外，還有一個C/S結構的編碼工具（更準確地說是拼裝代碼工具）。這個編碼工具需要從如下URL下載一個安裝程序。其中包含了Android模擬器以及相應的命令行工具、開發包等。
http://appinventor.googlelabs.com/learn/setup/index.html
在安裝完該程序後，單擊圖2.35所示界面右側的“Openthe Blocks Editor”按鈕，會首先要求下載或打開一個JNLP文件，這是Java的部署文件。直接選擇打該該文件即可。打開該文件後需要等待一段時間，然後會出現一個如圖4所示的界面。
圖4 AppInventor拼裝代碼的地方
圖4所示界面左側的列表是各種Android控件，中間空白的區域是拼裝代碼的區域。在下面我們將看到如何拼裝代碼。
用拖拽控件的方式設計界面
現在重新回到圖3所示的設計界面。首先需要在界面上垂直方向放置兩個按鈕。並且在按鈕下方放一個Canvas。這兩個控件在界面左側的“Basic”頁中前兩個位置，如圖5所示。
圖5 Button和Canvas控件的位置
實際上，在完成上述的設計後，就可以進入下一節進行拼裝代碼了。但爲了和2.2節實現的例子的效果完全一樣，還需要設置Button和Canvas的相應屬性。我們可以在右側的“Properties”區域設置相應的屬性，要設置屬性的控件有4個：Screen1、Button1、Button2和Canvas1，屬性值如下：
- Screen1.BackgroundColor：Black
- Screen1.Title：First Android Application
- Button1.Text：Draw Random Circle
- Button1.Width：Fill Parent
- Button2.Text：Clear
- Button2.Width：Fill Parent
- Canvas1.BackgroundColor：Black
- Canvas1.Width：Fill Parent
- Canvas1.Height：350 pixels
像拼圖一樣拼裝代碼
首先我們打開圖4所示界面左側的某個標籤，會看到如圖6所示的拼圖元素。這些元素都是公用元素，也就是所有的Android應用程序都可以使用的元素。再單擊“My Blocks”標籤，以及Button1，會看到如圖7所示的拼圖元素，這些拼圖元素就是和在圖3所示界面中繪製的控件相關的事件和動作。
圖6 公用的拼圖元素
圖7 與拖拽控件相關的拼圖元素
下面來看看如何使用這些拼圖元素來拼裝代碼。首先我們來觀察一下每一個拼圖元素的形狀，我們先來看看Button1的Click事件的拼圖元素（圖7所示拼圖元素的第一個），如圖8所示。這個拼圖元素有一個半封閉的凹巢，內側左上角有一個突起。再看一下Canvas1的DrawCircle拼圖元素（在圖7所示界面Canvas1標籤中），如圖9所示。DrawCircle拼圖元素上方有一個凹陷的槽，下方有一個突起，在右側有三個凹陷的槽。最後看看產生隨機整數的拼圖元素（在圖6所示界面Math標籤中），如圖10所示。這個拼圖元素自動生成了3個更小的拼圖元素，其中有兩個表示整數的拼圖元素。從這3個拼圖元素的位置來看，突起的部分正好嵌入到了凹槽中。從這一點可以推斷突起是需要嵌入到凹槽中的，也就是說，代碼片段需要通過突起和凹槽進行連接，從而形成一個完整的應用程序。以此類推，DrawCircle拼圖元素上方的凹槽是可以和Click事件拼圖元素內部的突起連在一起的，這樣當單擊Button1後，就會執行DrawCircle動作。
圖8 Click事件拼圖元素
圖9 DrawCircle拼圖元素
圖10 產生隨機數的拼圖元素
按着這種方式，我們就可以開始拼裝繪製隨機實心圓程序了。下面先看看這個程序需要哪些拼圖元素，除了圖8、圖9和圖2.42所示的3個拼圖元素外，還需要如下幾個拼圖元素。
- Canvas1.PaintColor（在Canvas1標籤中）
- Choose（在Control標籤中）
- >（在Math標籤中）
- Number（在Math標籤中）
- Blue（在Color標籤中）
- Red（在Color標籤中）
- Green（在Color標籤中）
- Button2.Click（在Button2標籤中）
- Canvas1.Clear（在Canvas1標籤中）
- >（在Math標籤中）
- Number（在Math標籤中）
- Blue（在Color標籤中）
- Red（在Color標籤中）
- Green（在Color標籤中）
- Button2.Click（在Button2標籤中）
- Canvas1.Clear（在Canvas1標籤中）
這些拼圖元素的形狀如圖11所示。
現在我們就可以利用圖8至圖10所示的12個拼圖元素來拼裝本例的代碼了，拼裝的過程在本節就不詳細介紹了，在這裏只給出拼裝後的結果，如圖12所示。感興趣的讀者可以利用上述12個拼圖元素按着圖12所示進行拼裝。
圖12 拼裝後的代碼片段
在拼裝完代碼後，單擊圖4所示界面右上角的“Connectto Device”按鈕。如果這時已經啓動了Android模擬器，那剛纔拼裝的程序會直接在模擬器上運行（如果通過USB連接了手機，並處於調試狀態，也可以直接在手機上運行）。如果還沒有啓動模擬器，在打開圖4所示的界面時會自動啓動Android模擬器。在AppInventor自帶的模擬器中運行的效果如圖13所示。
圖13 在AppInventor自帶的模擬器中運行程序的效果
用程序實現的同樣的程序：http://www.blogjava.net/nokiaguy/archive/2011/09/06/358115.html