基础篇
任务1 Hi，喵星人!
在计算机屏幕上输出“Hello World”这行字符串的程序,是几乎所有编程语言中一个典型的入门程序, 它可以用来确定编译器、程序开发环境, 以及运行环境是否安装正确。这一传统可以追溯到1970年, 由贝尔实验室成员布莱恩·柯林汉和里奇在《C程序设计语言》(The C Programming Language) 书籍中使用而广泛流传。
通过AppInventor, 即使是最简单的应用, 也不仅仅是打印出一行“Hello World”的消息。本任务将一步步的通过Component Designer (组件设计) 和Blocks Editor (块编辑器) 来引导读者完成你的第一个Android应用程序“Hi, 喵星人!”——当你触摸手机屏幕中的“喵星人”时, 它将发出“喵喵”的声音。本任务完成后, 读者就可以开始尝试创建属于你自己的Android应用了。
学习目标
● 了解使用AppInventor开发安卓应用的基本流程；
● 掌握使用Component Designer（组件设计）和Blocks Editor（块编辑器）；
● 掌握如何设定当一个按钮被单击时的事件。
任务描述
创建一个以猫的图片 (ketty.jpg) 为背景的按钮,当你用手触摸屏幕中的“喵星人”图片时, 你的手机将发出“喵喵”的声音, 就如屏幕中的猫所发出的声音。
“Hi, 喵星人!”应用程序的运行截图如图1-1所示。
图1-1 运行效果
开发前的准备工作
工欲善其事, 必先利其器。在做每件事之前, 我们都要先把要用到的资源准备好, 这样做起事情来才会有条不紊, 在程序开发中也是同样一个道理!
上面的简单介绍中, 我们可以看到, “Hi, 喵星人!”应用仅使用了一张图片, 如图1-2所示; 既然要让“喵星人”发出“喵喵”的声音, 所以还要准备一个猫叫声的音频(meow.mp3), 如图1-3所示。
图1-2 ketty.jpg
图1-3 meow.mp3
进入AppInventor的Designer页面, 通过单击左下Media窗格中的
按钮, 上传我们所准备的图片、音频资源到项目中, 如图1-4所示。
图1-4 上传资源
任务操作
1. 创建你的第一个Android应用
通过“导语”部分的学习, 想必读者已经在自己的电脑上搭建好了AppInventor的开发环境, 以及学会如何进入Designer (设计师) 和Blocks Editor (块编辑器)。你准备好创建第一个安卓应用程序了吗？
首先, 在浏览器中打开 MIT AppInventor 官网, 通过之前申请的 Google 账号登录AppInventor, 登录后进入项目管理页面, 单击
按钮来创建你的第一个Android项目,在所弹出的对话框中输入你的项目名称如“First”, 最后单击 OK 按钮, 如图1-5所示。(注意: 项目名只能由英文字母、数字以及下划线组成)
图1-5 新建项目
单击完OK按钮后, 网页将自动跳转到ComponentsDesigner (组件设计师) 页面, 如图1-6所示, 代表你创建好了一个Android项目。
图1-6 新建的项目界面
2. 选择组件并设置组件属性
AppInventor的所有Components (组件) 位于页面左边项目标题下方的Palette (调色板)。Components (组件) 是你制作Android应用的基本元素, 它们就好比药品配方里的成分一样。一些组件比较简单, 比如一个Label标签组件, 它只是用来在屏幕中显示文本内容; 再如一个Button按钮组件, 当你单击Button按钮时触发一个动作。
如果在应用中使用一个组件, 需要从Palette (调色板) 中选择并拖动它到窗口中部的Viewer (指示器)。下面, 你需要一个Button组件用来显示“喵星人”的图片, 具体操作如下:
(1) 从Basic调色板拖动一个Button组件到Screen1, 并将其命名为 Buttonpop,如图1-7所示。
图1-7 添加Button组件
(2) 按钮要显示一张“喵星人”的图片,单击 Buttonpop 按钮组件, 在页面最右边的Properties (属性) 窗格中单击Image选择框, 选择之前准备的“喵星人”(ketty.jpg) 图片, 如图1-8所示。
图1-8 选择图片
(3) 改变按钮的 Text 属性: 删除 Text for Button1文本内容, 使 Buttonpop 按钮的 Text 为空, 否则“喵星人”的按钮上会显示“Text for Button1”的字样。完成这一步骤后, 你的Designer (设计师) 显示可参考图1-9所示。件到右边“喵星人”图片的下方, 并设置其BackgroundColor背景色为Light Gray, FontSize字号为30, Text文本属性为“Hi, 我是喵星人!”, TextAlignment文本排列属性为center, TextColor字体颜色为Yellow, Width宽度为“Fill parent…”, 如图1-10所示。
图1-9 空文本显示
图1-10 Label属性设置
(4) 从Basic调色板拖拽一个Label标签组
(5) 在Palette (调色板) 窗格的下方选择Media抽屉, 并从中拖拽一个Sound声音组件到右边的Viewer (指示器) 中去, 然后设置它的Source声源为我们之前上传的音频文件meow.mp3, 如图1-11所示。
图1-11 Sound声音属性设置
3. 添加组件行为
到目前为止, 你已经在Web浏览器窗口中为你的应用设计好了布局, 接下来需要开始对你所添加的组件添加一些行为, 来使“喵星人”图片组件发出“喵喵”的叫声。单击左上方的
按钮打开一个程序窗口, 进入Blocks Editor (块编辑器) 开始添加组件的行为。如果你还无法打开Blocks Editor, 请回顾“导语”的内容。需要注意的是, Components Designer (组件设计师) 在你的网页浏览器中运行, 而Blocks Editor (块编辑器) 却是在你的程序窗口中运行, 如图1-12所示。
图1-12 Blocks Editor块编辑区
进入块编辑区后, 单击左边的
导航, 可以看到刚刚你在布局界面添加(定义) 的那些Button按钮、Label标签、Sound声音等组件, 如图1-13所示。
图1-13 My Blocks
之前我们用了一张很萌的猫咪图片填充Button按钮组件, 现在要让它发出“喵喵喵”的叫声。首先单击
中的Buttonpop, 然后会弹出Buttonpop中很多关于Button组件的方法块, 我们拖动其中的Buttonpop.Click块到右边的空白区, 如图1-14所示。
图1-14 添加Click单击事件
上面绿色的方法块成为“事件处理块”, 在事件处理块中可以实现各种程序完成针对一些特定的事件, 例如一个按钮被单击, 手机被移动, 用户在 Canvas (画布) 中滑动等处理。
Buttonpop.Click块当中的单词“when”和“do”表示的是: 当Buttonpop按钮被单击时要做的事情是什么, 比如现在要让猫咪发出之前所导入的音频文件 (meow.mp3), 这时要在Buttonpop.Click块当中的do缺口里面添加播放音频的行为, 从
中的Sound1抽屉中拖拽Sound1.Play块到Buttonpop.Click块的do缺口中, 如图1-15所示。
图1-15 Sound1.Play播放音频
好了, 现在开始运行一下你的“Hi, 喵星人!”吧! 单击 Blocks Editor 右上方 New emulator按钮, 创建运行一个虚拟的Android设备; 或在Connect to Device中选择一个已存在的Android设备, 如图1-16所示。如果单击后小猫发出了叫声, 恭喜你的第一个Android应用开发成功了!
图1-16 运行测试程序
任务小结
希望读者通过本章的学习，不仅能掌握使用AppInventor开发Android应用程序的基本流程，还能产生对安卓应用程序开发的兴趣，尝试边设计，边制作。在整个程序的开发中，界面的简洁以及逻辑思维的清晰非常重要。
自我实践
读者可以根据自己的兴趣，在此应用的基础上进行功能增强，例如：
● 当单击按钮的时候手机发生震动；
● 摇晃手机后发出猫咪的叫声。