1.3 設(shè)計組件

你的第一步操作是在設(shè)計視圖中完成的，設(shè)計視圖也被稱為“組件設(shè)計器”。組件是應(yīng)用的組成元素，就像菜譜中的配料。有些組件功能單一，比如標簽，它僅用于在屏幕上顯示文字；再比如按鈕，點擊按鈕將引發(fā)一個活動。有些組件功能復雜，例如畫布組件，它可以容納靜態(tài)圖片或動畫；又如加速度傳感器組件，它具有運動感知能力，可以偵測到設(shè)備的移動或搖晃；另一些組件可以編寫并發(fā)送短信、播放音樂和視頻，或者從網(wǎng)絡(luò)上獲取信息，等等。

設(shè)計視圖的外觀如圖1-4所示。

設(shè)計視圖被劃分為如下幾個區(qū)域。

· 中部的白色區(qū)域被稱為工作區(qū)域，用于放置應(yīng)用中的所有組件（可視組件與非可視組件）。工作區(qū)域的中央是用戶界面的預覽窗口，對應(yīng)于設(shè)備的屏幕，你可以根據(jù)自己的需要來安排用戶界面上的可視組件。預覽窗口中只能粗略地顯示應(yīng)用的外觀，例如，同樣的一行文字，在測試設(shè)備上的換行位置，可能與預覽窗口中的不同。如果想看到應(yīng)用的實際外觀，需要用安卓設(shè)備或模擬器進行測試（稍后會詳細介紹測試方法）。

· 工作區(qū)域的左側(cè)是組件面板，其中列出了可供選擇的所有組件。組件按類別分為九個組。默認情況下，只有用戶界面類組件處于可見狀態(tài)，其他組件隱藏在各自的類別名稱下，點擊類別名稱，如多媒體，可以顯示該類別的組件。

· 緊鄰工作區(qū)域右側(cè)的是組件列表，顯示了項目中的所有組件。拖動到工作區(qū)域中的所有組件都將顯示在該列表中。此時，該項目中只有一個組件：Screen1，它代表設(shè)備的屏幕。

· 組件列表下方是素材區(qū)，顯示項目中的所有素材資源（圖片和聲音等）。本項目中尚未添加任何素材資源，不過稍后就會添加。

· 最右邊的部分是屬性面板，用于顯示組件的屬性。在工作區(qū)域或組件列表中單擊某個組件，將在屬性面板中看到該組件的全部屬性。屬性描述了組件的詳細信息（例如，如果點擊標簽組件，將看到與顏色、顯示文本及字體相關(guān)的屬性），可以在屬性面板中修改組件的屬性。當前顯示的是屏幕（名為Screen1）的屬性，包括背景顏色、背景圖片及標題。

“你好貓咪”應(yīng)用中需要兩個可視組件（可以理解為應(yīng)用中可以被用戶看到的組件）：標簽組件用于顯示文字“可愛的貓咪”，按鈕組件用于呈現(xiàn)一張貓咪的圖片。應(yīng)用中還需要兩個非可視組件：音效播放器組件，用來播放聲音，如貓叫聲，以及加速度傳感器組件，用于檢測設(shè)備是否被搖晃。別擔心，我們將一步一步地教你如何使用這些組件。

1.3.1 創(chuàng)建一個標簽

在項目中添加的第一個組件是標簽。

（1）添加標簽：在組件面板中，打開用戶界面類組件（假設(shè)它處于關(guān)閉狀態(tài)），單擊“標簽”（用戶界面組件列表中的第七項），并將其拖動到預覽窗口中。你會看到預覽窗口的左上角出現(xiàn)一個矩形框，框內(nèi)有“標簽1文本”字樣。

（2）修改標簽的顯示文本屬性：觀察設(shè)計視圖右側(cè)的屬性面板，其中顯示了標簽的屬性。大約在中間位置有一個“顯示文本”屬性，它的下方是標簽中顯示的文字。將文字改為“可愛的貓咪”并按回車鍵。你會看到在預覽窗口上方的文字也改變了。

（3）修改標簽的其他屬性：單擊“背景顏色”屬性下方的方框，可以改變標簽的背景顏色。背景顏色的當前值為透明（無背景色），從顯示的顏色列表中選擇藍色，將標簽的文本顏色屬性改為黃色，將字號屬性改為20。

設(shè)計視圖的外觀如圖1-5所示。

1.3.2 添加按鈕組件

“你好貓咪”應(yīng)用中的貓咪圖片要用按鈕組件來實現(xiàn)：添加一個標準的按鈕，然后將它的圖片屬性更改為貓咪圖片。在設(shè)計視圖的組件面板中單擊按鈕（在用戶界面類組件列表的頂部），將它拖到預覽窗口中，置于標簽下方。你會看到一個矩形按鈕出現(xiàn)在預覽窗口中。

好，現(xiàn)在按鈕已經(jīng)就位。我們想要實現(xiàn)的功能是，當它被點擊時，播放一個聲音。但首先我們要把它裝扮一下，讓它看起來像一只貓，而不是一個呆板的矩形。為此需要完成以下操作。

（1）首先，下載一個貓咪的圖片文件，將其保存在你的電腦桌面上。下載地址為http://appinventor.org/bookFiles/HelloPurr/kitty.png。圖片擴展名為．png，這是一種標準的圖片格式，與．jpg和．gif類似。App Inventor支持所有這些圖片格式，同樣也支持大多數(shù)標準格式的聲音文件，如．mpg或．mp3。你可以從下列網(wǎng)址下載貓叫的聲音文件：http://appinventor.org/bookFiles/HelloPurr/meow.mp3。

（2）此時，屬性面板中顯示的應(yīng)該是按鈕的屬性，如果不是，可以點擊預覽窗口中的按鈕組件，以便在右側(cè)的屬性面板中查看按鈕的屬性。在屬性面板中找到“圖片”屬性，點擊其下方的方框（其中顯示文字“無．..”）。

（3）點擊素材區(qū)的“上傳文件”按鈕，點擊“選擇文件”按鈕，從你的電腦桌面上找到剛才下載的文件kitty.png，點擊“確定”，將完成圖片的上傳。

（4）這時，kitty.png將出現(xiàn)在組件列表下方的素材區(qū)中。與此同時，在按鈕的圖片屬性的下拉列表中，也將出現(xiàn)kitty.png選項。點擊該選項，并點擊確定按鈕。這時，屏幕中的按鈕變成了貓咪的圖片。

（5）注意到貓咪的圖片上顯示了文字“按鈕1文本”，我們不希望在應(yīng)用中看到這些字，因此將按鈕1的“顯示文本”屬性修改為空（刪除所有字符）。

現(xiàn)在設(shè)計視圖看起來應(yīng)該如圖1-6所示。

1.3.3 添加貓叫聲

我們希望當點擊按鈕時，應(yīng)用會發(fā)出貓叫聲。為此需要添加貓叫的聲音文件，并通過設(shè)定按鈕的行為來實現(xiàn)這一功能。

（1）如果尚未下載meow.mp3，點擊以下鏈接完成下載：http://appinventor.org/bookFiles/HelloPurr/meow.mp3（保存到你的電腦桌面）。

（2）在設(shè)計視圖左側(cè)的組件面板中，單擊多媒體類組件，打開多媒體組件列表。向預覽窗口中拖放一個音效播放器組件。無論你把它放在預覽窗口中的什么位置，它都將出現(xiàn)在工作區(qū)域底部的“非可視組件”區(qū)。非可視組件在應(yīng)用中用于實現(xiàn)特定的功能，但它們不會顯示在用戶界面中。

（3）點擊音效播放器1以便顯示其屬性。設(shè)置其源文件屬性為meow.mp3。同貓咪圖片一樣，需要從電腦中上傳這個聲音文件。上傳完成后，素材列表中將出現(xiàn)kitty.png與meow.mp3兩個文件。

表1-1中列出了應(yīng)用中現(xiàn)有的組件。