1.3 设计组件

你的第一步操作是在设计视图中完成的，设计视图也被称为“组件设计器”。组件是应用的组成元素，就像菜谱中的配料。有些组件功能单一，比如标签，它仅用于在屏幕上显示文字；再比如按钮，点击按钮将引发一个活动。有些组件功能复杂，例如画布组件，它可以容纳静态图片或动画；又如加速度传感器组件，它具有运动感知能力，可以侦测到设备的移动或摇晃；另一些组件可以编写并发送短信、播放音乐和视频，或者从网络上获取信息，等等。

设计视图的外观如图1-4所示。

设计视图被划分为如下几个区域。

· 中部的白色区域被称为工作区域，用于放置应用中的所有组件（可视组件与非可视组件）。工作区域的中央是用户界面的预览窗口，对应于设备的屏幕，你可以根据自己的需要来安排用户界面上的可视组件。预览窗口中只能粗略地显示应用的外观，例如，同样的一行文字，在测试设备上的换行位置，可能与预览窗口中的不同。如果想看到应用的实际外观，需要用安卓设备或模拟器进行测试（稍后会详细介绍测试方法）。

· 工作区域的左侧是组件面板，其中列出了可供选择的所有组件。组件按类别分为九个组。默认情况下，只有用户界面类组件处于可见状态，其他组件隐藏在各自的类别名称下，点击类别名称，如多媒体，可以显示该类别的组件。

· 紧邻工作区域右侧的是组件列表，显示了项目中的所有组件。拖动到工作区域中的所有组件都将显示在该列表中。此时，该项目中只有一个组件：Screen1，它代表设备的屏幕。

· 组件列表下方是素材区，显示项目中的所有素材资源（图片和声音等）。本项目中尚未添加任何素材资源，不过稍后就会添加。

· 最右边的部分是属性面板，用于显示组件的属性。在工作区域或组件列表中单击某个组件，将在属性面板中看到该组件的全部属性。属性描述了组件的详细信息（例如，如果点击标签组件，将看到与颜色、显示文本及字体相关的属性），可以在属性面板中修改组件的属性。当前显示的是屏幕（名为Screen1）的属性，包括背景颜色、背景图片及标题。

“你好猫咪”应用中需要两个可视组件（可以理解为应用中可以被用户看到的组件）：标签组件用于显示文字“可爱的猫咪”，按钮组件用于呈现一张猫咪的图片。应用中还需要两个非可视组件：音效播放器组件，用来播放声音，如猫叫声，以及加速度传感器组件，用于检测设备是否被摇晃。别担心，我们将一步一步地教你如何使用这些组件。

1.3.1 创建一个标签

在项目中添加的第一个组件是标签。

（1）添加标签：在组件面板中，打开用户界面类组件（假设它处于关闭状态），单击“标签”（用户界面组件列表中的第七项），并将其拖动到预览窗口中。你会看到预览窗口的左上角出现一个矩形框，框内有“标签1文本”字样。

（2）修改标签的显示文本属性：观察设计视图右侧的属性面板，其中显示了标签的属性。大约在中间位置有一个“显示文本”属性，它的下方是标签中显示的文字。将文字改为“可爱的猫咪”并按回车键。你会看到在预览窗口上方的文字也改变了。

（3）修改标签的其他属性：单击“背景颜色”属性下方的方框，可以改变标签的背景颜色。背景颜色的当前值为透明（无背景色），从显示的颜色列表中选择蓝色，将标签的文本颜色属性改为黄色，将字号属性改为20。

设计视图的外观如图1-5所示。

1.3.2 添加按钮组件

“你好猫咪”应用中的猫咪图片要用按钮组件来实现：添加一个标准的按钮，然后将它的图片属性更改为猫咪图片。在设计视图的组件面板中单击按钮（在用户界面类组件列表的顶部），将它拖到预览窗口中，置于标签下方。你会看到一个矩形按钮出现在预览窗口中。

好，现在按钮已经就位。我们想要实现的功能是，当它被点击时，播放一个声音。但首先我们要把它装扮一下，让它看起来像一只猫，而不是一个呆板的矩形。为此需要完成以下操作。

（1）首先，下载一个猫咪的图片文件，将其保存在你的电脑桌面上。下载地址为http://appinventor.org/bookFiles/HelloPurr/kitty.png。图片扩展名为．png，这是一种标准的图片格式，与．jpg和．gif类似。App Inventor支持所有这些图片格式，同样也支持大多数标准格式的声音文件，如．mpg或．mp3。你可以从下列网址下载猫叫的声音文件：http://appinventor.org/bookFiles/HelloPurr/meow.mp3。

（2）此时，属性面板中显示的应该是按钮的属性，如果不是，可以点击预览窗口中的按钮组件，以便在右侧的属性面板中查看按钮的属性。在属性面板中找到“图片”属性，点击其下方的方框（其中显示文字“无．..”）。

（3）点击素材区的“上传文件”按钮，点击“选择文件”按钮，从你的电脑桌面上找到刚才下载的文件kitty.png，点击“确定”，将完成图片的上传。

（4）这时，kitty.png将出现在组件列表下方的素材区中。与此同时，在按钮的图片属性的下拉列表中，也将出现kitty.png选项。点击该选项，并点击确定按钮。这时，屏幕中的按钮变成了猫咪的图片。

（5）注意到猫咪的图片上显示了文字“按钮1文本”，我们不希望在应用中看到这些字，因此将按钮1的“显示文本”属性修改为空（删除所有字符）。

现在设计视图看起来应该如图1-6所示。

1.3.3 添加猫叫声

我们希望当点击按钮时，应用会发出猫叫声。为此需要添加猫叫的声音文件，并通过设定按钮的行为来实现这一功能。

（1）如果尚未下载meow.mp3，点击以下链接完成下载：http://appinventor.org/bookFiles/HelloPurr/meow.mp3（保存到你的电脑桌面）。

（2）在设计视图左侧的组件面板中，单击多媒体类组件，打开多媒体组件列表。向预览窗口中拖放一个音效播放器组件。无论你把它放在预览窗口中的什么位置，它都将出现在工作区域底部的“非可视组件”区。非可视组件在应用中用于实现特定的功能，但它们不会显示在用户界面中。

（3）点击音效播放器1以便显示其属性。设置其源文件属性为meow.mp3。同猫咪图片一样，需要从电脑中上传这个声音文件。上传完成后，素材列表中将出现kitty.png与meow.mp3两个文件。

表1-1中列出了应用中现有的组件。