2.2 安安诞生组件设计

(1)素材准备

通过以上案例展示，我们对“安安诞生记”的界面、交互和行为都有所了解。为了实现这个效果，需要准备一些素材：

三张图片：孵化基地背景、小机器人安安、应用图标；

一个音频文件：安安诞生后打招呼的声音；

这些素材可以在本案例实验资源包中找到，你也可以将这些换成你自己感兴趣的素材。在App Inventor中，支持的图片文件格式有 .png、.gif和.jpg等；支持的音频文件格式有.arm、.mpg和.mp3等。

(2)设计界面

用自己的账号登录开发网站后，新建一个项目，命名为“AnAnBirth”。

a) 上传素材：把项目要用到的素材先上传到开发网站。如图2.2

图2.2 上传素材

b) 设置屏幕组件属性。在App Inventor中，每一个App都至少有一个Screen组件。在新建项目时就缺省建立了一个Screen1组件，这是后面应用开发的基础。在这个Screen1组件中需要根据需求设置相应属性值，这些属性将会影响到App的界面和交互效果。

如图2.3，以及表2.1，表中默认表示该属性采用缺省的属性值，不作修改。

c) 加入其它组件，设置相应的属性，完成界面设计。

从“用户界面”组件栏中拖放一个“图像”组件到Screen1中，如图2.4。

图2.4 添加“图像”组件演示

并将组件名从自动命名的“图像1”重命名为“图像_显示”；操作过程如图2.5所示。虽然在开发过程中系统会自动以“组件类型+序号”的方式给每个组件命名以保证每个组件名不重复。但这样很难明确每个组件的具体用途，尤其是后期进行行为逻辑编程的时候。所以一个好的习惯是给每个组件都取一个有意义的名字，做到“见名知意”。