AppInventor：不需要編寫一行代碼開發Android程式

本文截取自《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所示。

 圖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