2.3 設計組件

“油漆桶”應用中將會用到以下組件。

· 三個按鈕組件用來選擇畫筆顏色：紅、藍、綠。用一個水平布局組件來放置這三個按鈕。

· 一個按鈕組件用來充當橡皮擦，另外兩個按鈕組件用來改變畫筆的大小，還有一個用來打開相機拍照。

· 一個畫布組件。顧名思義，用戶可以在上面繪畫。畫布組件具有背景圖片屬性，將其設置為第1章“你好貓咪”應用中的kitty.png。稍后還可以將背景圖片設置為用戶拍攝的照片。

2.3.1 創建顏色按鈕

首先，按照以下提示創建三個顏色按鈕。

（1）拖一個按鈕組件到工作區域的預覽窗口中，設置其顯示文本屬性為“紅”，設置背景顏色屬性為紅色。

（2）在組件列表中選中按鈕1（可能已經被選中），點擊重命名按鈕，將組件名稱改為RedButton。注意組件名稱中不允許有空格，因此通常將組件名稱中每個單詞的首字母大寫。

（3）同樣，創建另外兩個按鈕，分別命名為BlueButton和GreenButton，將它們放在RedButton下方。對照圖2-2，檢查一下你的操作結果。

注意：在項目中，建議為組件起一個有意義的名稱，而不是像“你好貓咪”應用中那樣采用默認的名稱。有意義的名稱增強了程序的可讀性，尤其是在切換到編程視圖時，將依據名稱來區分不同的組件。本書中約定組件的命名方法：組件名稱必須以組件類型結尾，如RedButton。

2.3.2 使用布局組件改善布局

現在三個按鈕排成一列，但我們希望它們能排成一行，如圖2-3所示。為此，使用水平布局組件來實現組件的水平排列。

（1）在組件面板的組件布局類中，拖出水平布局組件，放在按鈕下方。

（2）在屬性面板中，設置水平布局組件的寬度為“充滿”，以便組件在水平方向上占滿整個屏幕。

（3）依次將三個按鈕移動到水平布局組件中。注意，當你拖曳按鈕時，會看到一條藍色豎線，提示按鈕將會被放置在什么地方。

此時查看組件列表，你會發現三個按鈕縮進排列在水平布局組件之下。這表明三個按鈕組件是水平布局組件的次一級組件。同時注意，所有的組件都縮進排在Screen1之下。

你也可以讓三個按鈕在屏幕上居中，只要設定水平布局組件的水平對齊屬性為“居中”即可。

通常，可以利用布局組件來創建簡單的垂直、水平或表格布局。不過，也可以通過逐層嵌套布局組件的方式來創建更加復雜的布局。

2.3.3 添加畫布

下面對畫布組件進行設置，具體步驟如下。

（1）打開組件面板中的“繪圖動畫”類組件，將其中的畫布組件拖放到預覽窗口中，改名為“畫布”。寬度設為“充滿”，以便畫布在水平方向上可以充滿整個屏幕。高度設為300像素，以便在畫布下方還能夠容納兩行按鈕。

（2）如果你已經完成了第1章的課程，則已經下載了kitty.png文件；如果尚未下載該文件，可以從這里下載：http://appinventor.org/bookFiles/HelloPurr/kitty.png。

（3）將畫布的背景圖片設置為kitty.png：在設計視圖的屬性面板中，背景圖片的默認設置為“無”。點擊“無”及“上傳文件”按鈕來添加kitty.png文件。

（4）將畫布的畫筆顏色屬性設置為紅色，以便當用戶剛啟動應用但尚未點擊顏色按鈕時，畫筆的默認顏色為紅色。對照圖2-4檢查一下你的操作。

2.3.4 添加底部按鈕及照相機組件

（1）從組件面板中拖出另一個水平布局組件，放在畫布下方。再拖兩個按鈕組件放在這個水平布局組件中。將第一個按鈕改名為“拍照按鈕”，顯示文本屬性設置為“拍照”；第二個按鈕改名為“擦除按鈕”，顯示文本屬性設置為“擦除”。

（2）再從組件面板中拖兩個按鈕組件到水平布局組件中，放在擦除按鈕后面。

（3）兩個按鈕分別命名為“大圓按鈕”“小圓按鈕”，顯示文本屬性也分別設為“大圓”“小圓”。

（4）從組件面板的多媒體類中拖出一個照相機組件放在預覽窗口中，它將落在非可視組件區。

到此為止，應用外觀已經設置完成，如圖2-5所示。