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所示。