2.3 設(shè)計組件

“油漆桶”應(yīng)用中將會用到以下組件。

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

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

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

2.3.1 創(chuàng)建顏色按鈕

首先，按照以下提示創(chuàng)建三個顏色按鈕。

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

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

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

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

2.3.2 使用布局組件改善布局

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

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

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

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

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

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

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

2.3.3 添加畫布

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

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

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

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

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

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

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

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

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

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

到此為止，應(yīng)用外觀已經(jīng)設(shè)置完成，如圖2-5所示。