APP-Inventor实例及讲解

第第 1 章章 Hello Purr 本章将开启你的创建应用之旅 这里介绍了 App Inventor 的关键要素 组件设计器及块编辑器 并手把手地引导读者创建第一个应用 HelloPurr 在完成本章的学习之后 就可以开始创建自己的应用了 每当搭建了新的开发环境 通常运行的第一个程序就是显示 Hello World 来证明系统已经就绪 这个传统可以追溯到 20 世纪 70 年代 从 Brian Kernighan 在贝尔实验室使用 C 语言开始 Brian 现在是谷歌 App Inventor 团队的访问学者 使用 App Inventor 即便是创建 最简单的应用 也可以实现声音的播放以及对屏幕触摸的响应 而不 只是显示文字 想想都令人感到兴奋 那么 让我们马上开始吧 第 一个应用是 HelloPurr 如图 1 1 当你触摸这只猫时 它会发出 喵呜 声 当你摇晃它时 则将发出嘟嘟的震颤 图 1 1 HelloPurr 应用 学习要点学习要点 本章用到了以下组件和概念 选择组件来创建应用 决定了应用 的外观 为组件设定行为 做什么以及何时做 使用组件设计器选择组件 在 Android 设备上 有些组件可以显示 有些则不可见 从本地计算机加载媒体文件 声音或图像 并添加到应用中 用块编辑器来组装程序块 以此来设定组件行为 用 App Inventor 的实时测试功能对应用进行测试 你可以一边创建应 用 一边在手机上看到它们外观以及运行情况 将应用打包并下载到 Android 设备上 App Inventor的开发环境的开发环境 App Inventor 的编程环境包括以下三个重要组成部分 如图 1 2 所示 如图 1 2A 所示 组件设计器运行在浏览器中 创建应用过程中 用它 来进行组件的选择 并进行属性设置 如图 1 2B 所示 像组件设计器一样 块编辑器也在浏览器中运行 用 于创建组件的行为 测试设备 在开发应用过程中 可以用 Android 设备对应用进行同步 的运行与测试 如果你手边没有 Android 设备 你可以使用系统中集 成的 Android 模拟器来测试应用 图 1 2A 组件设计器 图 1 2B 块编辑器 在浏览器中访问 ai2 appinventor mit edu 即可启动 App Inventor 如 果你是第一次使用 App Inventor 你会看到弹出的项目 Projects 窗 口 它多半是空的 因为你还没有创建过任何项目 单击页面左上角 的 Project Start new project 创建一个项目 输入 HelloPurr 作为项 目名称 注意不带空格 然后单击 OK 打开的第一个窗口是组件设计器 Designer 你可以单击窗口右上 角的 Blocks 按钮来切换到块编辑器 在 Project 右侧的 Connect 下拉菜单中有三个可选项 三类测试设备 如图 1 3 所示 图 1 3 单击 Connect 并选择 AI Companion 应用开发伴侣 或简称 AI 伴侣 如果手边的 Android 设备可以通过 WIFI 访问互联网 用该设备访问 Google Play 搜索 MIT 的 AICompanion 下载 安装并启动它 然 后在 Connect 下拉菜单中选择 AI Companion 并按照弹出窗口以及 AI 伴侣中的提示进行操作 除此之外 也可以使用 Android 模拟器来 测试应用 选择 Connect Emulator 来加载 Android 模拟器 大约要 等 30 秒钟 如果一切正常 将会看到组件设计器窗口 块编辑器按钮 如果你选 择了 Emulator 选项 你还可以看到模拟器窗口 屏幕上看起来应该像 插图 1 2A 和 1 2B 但窗口中大部分是空的 如果您还有问题 请 重温网站 http ai2 appinventor mit edu 中的安装说明 设计组件设计组件 我们使用的第一个工具就是 也只能是 组件设计器 组件是你用来 创建应用的基本元素 就像菜谱中的原料 有些组件非常简单 如 Label 标签 组件 它用于在屏幕上显示文字 或者如 Button 按 钮 组件 轻按它则引起一个动作 其它组件则要更复杂 一个绘图 的 Canvas 画布 组件可以容纳静止图像或动画 accelerometerSensor 加速度传感器 组件是一种运动传感器 它 的工作原理类似于 Wii 控制器 它可以检测到设备的移动或摇晃 还 有的组件用于编写并发送短信 播放音乐和视频以及从网站获取信息 等等 当你打开 Designer 时 其外观如插图 1 4 所示 图 1 4 App Inventor 的组件设计器 Designer 被划分为如下几个区域 中部的白色区域称为预览窗口 Viewer 用于放置应用中所需的组 件 你可以按照自己的喜好来安排这些组件 预览窗口只能粗略地显 示应用的外观 例如 与测试设备中的应用相比 在预览窗口中 一 行文字可能会在不同的地方换行 如果想看到应用的实际外观 可以 将应用下载到测试设备上 稍后我们会在 打包应用程序并下载 的部分 详细介绍 或者下载 App Inventor 自带的模拟器 预览窗口的左侧是组件面板 Palette 其中包含了可供选择的各类 组件 该面板按类别划分为几个部分 默认情况下 只有用户界面 User Interface 组件可见 可以通过点击其他类别的标题 如 Media 媒体 等 来查看其他组件 预览窗口的右侧是组件列表 Components 显示了项目中的所有组 件 拖动到预览窗口中的任何组件都将显示在该列表中 目前 该项 目中只有一个组件 Screen1 它代表设备的屏幕 组件列表下方是媒体列表 Media 显示项目中的所有媒体资源 图 像和声音 本项目中尚未添加任何媒体资源 不过很快就会添加 最右边的部分用于显示组件的属性 Properties 在预览窗口中单击 某个组件 将在 Properties 下方看到该组件的一系列属性 属性描述 了组件的详细信息 如 单击 Label 组件可以看到它的颜色 文字内 容 字体的属性 可以修改属性值 当前显示的是屏幕 名为 Screen1 的属性 包括背景颜色 背景图像及标题等 HelloPurr 应用中需要两个可视组件 可以理解为应用中确实可见的组 件 Label 组件显示文字 宠物小猫 而 Button 组件中有一张猫的图 片 还需要一个非可视的 Sound 声音 组件 用来播放声音 如猫 叫声 还有一个 AccelerometerSensor 加速度传感器 组件 用于 检测设备的移动或摇晃 不必担心 我们将按一步一步地教你使用这 些组件 创建一个创建一个Label 标签 标签 添加的第一个组件是 Label 1 转到组件面板 Palette 单击 Label 列表中的第五个 并将其 拖动到预览窗口 Viewer 中 你会看到一个矩形框出现在预览窗口 中 框里写着 Text for Label1 2 看组件设计器右侧的 Properties 属性 框 它显示了 Label 的属性 在中间位置有一个 Text 属性 下面是 Label 中显示的文字 将文字改 为 宠物小猫 并按回车键 你会看到在预览窗口中的文字也改变了 3 单击 BackgroundColor 背景色 下面的方框来改变 Label 的背景色 目前属性值为 None 无背景色 从显示的颜色列表中选择蓝色 并 将 Label 的 TextColor 文字颜色 属性改为黄色 最后将 FontSize 字号 属性改为 20 Designer 的外观如图 1 5 所示 图 1 5 应用中有了一个 Label 标签 要确保 Android 测试设备或模拟器处于连接状态 在设计器中添加的 Label 会在测试设备上显示出来 在 App Inventor 中 在设计器中为 应用添加组件 等同于在设备上构建应用 这样一来 你可以随时看 到应用的外观 这就是所谓的实时测试 你很快就会看到 这样的测 试也同样适用于在块编辑器中为组件添加行为 添加添加Button 按钮 组件 按钮 组件 HelloPurr 应用中的猫咪用 Button 组件来实现 创建一个普通 Button 然后将 Button 的图像更改为猫咪 在组件设计器 Designer 的组件面板 Patatte 中单击 Button 在列表的顶部 将它拖到预览窗口 Viewer 中 置于 Label 下方 你会看到一个矩 形按钮出现在预览窗口中 几秒钟后 该按钮就会出现在 Android 设 备上 试着轻击设备上的按钮 有什么反应吗 不会的 因为应用没 有向 Button 发布命令 这是理解 App Inventor 的第一个要点 添加到 设计器中的组件 必须在块编辑器中创建相应的程序 才能使组件产 生某种行为 在设计器中添加一个组件之后要做这件事 我们希望当点击这个 Button 时 它会发出猫叫声 但我们希望这个 button 开起来相隔小猫 而不是一个普通的方块 因此需要为 button 设置图片 1 首先 需要下载的小猫的图片 并保存在你的电脑上 从 kitty png 下 载名为 kitty png 的图片文件 png 是与 jpg gif 等类似的标准图像格 式 在 App Inventor 中 所有这些都是有效的文件类型 与常用的标 准声音文件 mpg 或 mp3 一样 同时从 meow mp3 下载声音文件 选择 网页另存为 来保存声音文件 2 在预览窗口中点击该按钮 属性框中将显示其属性 点击中部 Image 属性 现在显示的是 None 显示 Upload File 按钮 3 点击 Upload File 按钮 再单击弹出窗口中的 选择文件 按钮 浏览 并选择之前下载的文件 kitty png 然后单击确定 4 几秒钟之后 kitty png 被列为 Button 的 Image 属性的选项 单击 OK 与此同时 ketty png 也出现在设计器窗口组件列表下面的 Media 区域 中 在测试设备中 也将显示猫咪的图片 此时按钮看起来像一只小 猫咪 5 注意到猫咪的图片上显示文字 Text for Button1 我们不希望在应用 中看到这些 因此将 Button1 的 Text 属性改为 宠物小猫 一类的文字 或者干脆删除所有文字 现在设计器看起来如图 1 6 图 1 6 应用中的一个 Label 和一个显示为图像的 Button 添加猫叫声添加猫叫声 我们希望当点击按钮时 应用会发出猫叫声 为此需要添加猫叫的声 音文件 并通过设定 Button 的行为来实现这一功能 1 如果 meow mp3 文件尚未下载 现在点击链接 meow mp3 下载 2 在左侧的组件面板中 单击 Media 类的标题打开 Media 组件列表 向 预览窗口中拖放一个 Sound 组件 无论你把它放在哪里 它都会出现 在预览窗口的底部 并被标记为 Non visible components 非可视组 件 非可视组件在应用中发挥特定作用 但不会显示在用户界面中 3 点击 Sound1 以显示其属性 设置其 Source 属性为 meow mp3 同猫 咪图片一样 需要从电脑中加载这个声音文件 加载完成后 Media 列表中将出现 kitty png 与 meow mp3 两个文件 表 1 1 中列出了现有 的组件 表 1 1 HelloPurr 中的组件 组件类型组件类型面板中分组面板中分组命名命名作用作用 ButtonUserInterfaceButton1 点击发出猫叫声 LabelUser Interface Label1显示文本 宠物小猫 SoundMediaSound1 播放猫叫声 undefined 添加组件行为添加组件行为 刚刚添加了 Button Label 以及 Sound 组件来构建我们的第一个应 用 现在使用块编辑器来实现点击 Button 产生猫叫声的功能 单击设 计器右上角的 Blocks 按钮切换到块编辑器 在块编辑器窗口中 可以为组件设定行为 做什么以及何时做 此处 是让小猫按钮在用户点击它时播放声音 如果把组件比作菜谱中的原 料 那么块 Blocks 则相当于烹饪过程说明 发出猫叫声发出猫叫声 在块编辑器窗口的左侧 Blocks 标题下面 可以看到许多分属不同类 别的按钮 其中包括了我们在设计器中创建的所有组件 Screen1 Button1 Label1 以及 Sound1 点击它们就像打开抽屉 将看到一组适用于该组件的可选程序块 Blocks 点击 Button1 打 开抽屉 显示了与 Button 有关的程序块 可以用它们来设置 Button 的行为 最上面的 Block 就是 Button1 Click 如图 1 7 所示 图 1 7 点击 Button1 时显示适用于 Button 组件的程序块 Blacks 单击标有 Button1 Click 的块并将其拖到工作区 注意 Button1 Click 这个块上包含了 when 凡是包含 when 的块都被称为事件处理程序 用来定义当组件上发生了某种特定事件时 应用该做什么 在本例中 当用户点击猫咪 其实是按钮 时发生了有趣的事情 如图 1 8 所示 下面我们将在程序中添加一些块 来响应发生的事件 图 1 8 定义 Button Click 块来响应用户的点击事件 在块编辑器中点击 Sound1 打开抽屉 拖出 call Sound1 Play 块 之 前将 Sound1 的 Source 属性设置为 meow pm3 注意 块 call Sound1 Play 的形状恰好可以嵌入 Button1 Click 块中标有 do 的缺口 App Inventor 的这种设置 确保只有特定的块可以组合在一起 这样 确保了连在一起的块可以协同工作 标有 call 的块用来定义组件的行 为 在本例中 这两个块结合在一起 构成一个单元 如图 1 9 两个 块连接到一起时 你会听到 啪 的一声 图 1 9 点击按钮将播放猫叫声 不同于传统的程序代码 通常像混乱的 天书 一般 在 App Inventor 中 Blocks 拼出了行为 在本例中 我们等于说 嘿 App Inventor 当有人点击小猫时 播放猫叫声 测试 让我们通过检查来确保一切正常 每当向应用中添加了新东 西 就要进行测试 这非常重要 在测试设备上点击该按钮 或在模 拟器上单击它 你应该听到猫叫声 恭喜你 你的第一个应用跑起 来了 添加震动效果添加震动效果 当点击按钮时 让猫咪发出 Purr 声和 meow 声 这里用手机的振动 来模拟 Purr 声 这听起来很难 其实非常容易 因为播放 meow 声 音组件也可以使设备产生振动 App Inventor 可以帮助你挖掘设备的 核心功能 而无需考虑它们如何实现振动 现在只需要向 Button1 click 块内添加第二个行为 1 进入块编辑器 单击 Sound1 打开抽屉 2 选择 call Sound1 Vibrate 块 将其拖动到 when Button1 Click 块内 置于 call Sound1 Play 块下 恰好与原来的块吻合 如果不吻合 可 尝试拖动它 使 call Sound1 Vibrate 块顶部的凹陷恰好与 call Sound1 Play 块底部的凸起相对 图 1 10 Click 事件引发了播放声音及振动 3 注意 在 call Sound1 Vibrate 块的右下角写着 millisecs 毫秒 块上的开放插槽表示需要插入其他块 来设定行为的具体方式 本例 中 需要设定 call Sound1 Vibrate 块的振动时长 以毫秒 千分之一 秒 为单位输入时长 毫秒是多数编程语言中惯用的时长单位 如果 想让设备振动半秒钟 需要输入数字块 500 打开 Math 数学 抽 屉 其中的第一个块是 0 这就是数字块 如图 1 11 所示 图 1 11 打开 Math 抽屉 4 点击 0 块 蓝色的 0 块留在了工作区 如图 1 12 所示 图 11 12 选择一个数字块 0 为默认值 5 点击数字 0 输入新值 500 如图 1 13 所示 图 11 13 将默认值 0 改为 500 6 将 500 数字块插入 call Sound1 Vibrate 块右侧的插槽内 如图 1 14 所示 图 1 14 将数字块 500 插入插槽 测试 试试吧 点击设备上的按钮 你会感觉到半秒钟的嘟嘟声 震 动 摇晃手机摇晃手机 现在来添加最后一项 在 Android 设备上实现一个很酷的功能 摇晃 设备时发出猫叫声 为此要用到 AccelerometerSensor 加速度传感 器 组件 它可以检测到设备的摇晃或移动 1 在设计器中 展开组件面板中的传感器 Sensors 分类 拖出一个 AccelerometerSensor 加速度传感器 组件 不必介意把它放到哪里 像任何非可视化组件一样 无论你把它放在预览窗口的什么地方 它 都会落到预览窗口底部的 非可视组件 区域 2 摇晃设备的事件需要与单击按钮事件分开处理 这意味着需要一个新 的事件处理程序 进入块编辑器 打开 AccelerometerSensor1 抽屉 拖出 AccelerometerSensor1 Shaking 块 3 像点击按钮时播放声音一样 将 Sound1 Play 块插入 AccelerometerSensor1 Shaking 插槽 摇动设备试试看 图 1 15 显 示了完整的 HelloPurr 应用中所用的块 图 1 15 HelloPurr 应用中的块 将应用打包以供下载将应用打包以供下载 App Inventor 是一种云计算工具 这意味着你用谷歌的在线服务器存 储你的应用 所以当关闭 App Inventor 再重新返回时 你的应用还 在 你不必在个人电脑上保存任何东西 像 Word 文件或音乐文件那 样 此外 如果连接了测试设备 无需向设备下载任何文件 就可以 轻松地测试应用 称为实时测试 但问题是 如果设备与 App Inventor 断开连接 那么应用将停止运行 由于从未在设备上安装过 应用 因此无从找到应用的图标 可以将应用下载并安装到 Android 设备上 以便在不连接计算机时 应用也能运行 首先 确保设备允许从 Android Market 以外的地方下 载应用 具体做法是 在设备上选择 设置 安全 并勾选 Unknown Source 未知来源 一项 然后回到 App Inventor 设计器中 单击 Build App provide QR code for apk 此时窗口中出现一个进度条 这个过程大约需要一分钟 进度消失后 几秒钟后 会显示打包应用 的 QR 码 用条码扫描软件获取 QR 码之后 设备会提示输入谷歌帐 户的密码 如果设备之前登陆过 google 账户 此步骤不会出现 密 码输入后 应用被下载到设备上 如果你的设备中没有条码扫描软件 去 Google Play 搜索并下载安装一个 下载完成后 会询问你是否安 装 请单击安装 如果设备上已经安装了 MIT AI2 Companion 用 其中的条码扫描功能 可以顺利实现应用的下载安装 安装完成后 设备上出现 HelloPurr 应用的图标 这就是我们刚刚创 建的应用 点击让它开始运行 请确保运行的是新安装的应用 而 不是之前与 App Inventor 连接的应用 现在 你可以断开连接甚至 重新启动设备 并删除 App Inventor 中的所有应用 而新应用依然存 在 了解这一点很重要 打包的应用已经与 App Inventor 中的项目分离 你还可以像之前一样 继续在 App Inventor 中完善你的应用 并在测 试设备上使用 AI 伴侣做实时测试 但这些都不会改变已经安装在设备 上的应用 如果在 App Inventor 中对应用进行了修改 那么修改结果 必须重新打包 并下载安装新版本来替换设备上的原有版本 马上用 Android 设备下载安装 HelloPurr 应用吧 这样 你就可以与家 人和朋友一起分享了 分享应用分享应用 有两种方式可以分享应用 第一 分享可运行的应用 在 App Inventor 项目中单击 Build App save apk to my computer 此操 作将扩展名为 apk 的文件保存到电脑 将 apk 文件上传到 web 上 让 其他人可以下载并安装 需要强调的是 设备的安全设置中 未知来源 一项必须选中 才能安装来源于 Android Market 之外的应用 第二 与其它 App Inventor 开发者共享应用的代码块 点击 Project My Projects 选中要共享的应用 本例中是 HelloPurr 选 择 project Export selected project aia to my computer 此操作将 扩展名为 aia 的文件 HelloPurr aia 保存到电脑上默认的下载文件夹 中 可以用电子邮件把文件发给其他人 他们打开 App Inventor 选 择 Project Import project 并选择 aia 文件 这样 使用者获得了该 应用的完整备份 对此备份的任何修改 都不会影响原有版本 共享应用的过程非常简单 更多有趣的作品在网站 gallery appinventor mit edu 的分享社区中 改进改进 现在 应用已经完成 并可以随时运行它 或许还能下载与人分享 也许还会感到什么地方有些欠缺 来看看下面的问题 并思考如何解 决它们 随着学习的进展你会发现 通常是先创建一个应用 之后设 法改进 完善它 并重新回到程序中来实现你的新想法 不必担心 这很好 这正是一名优秀开发者的必经之路 当摇晃设备时 猫的叫声听起来有点儿奇怪 好像有回声 这是因为 在 1 秒钟内 加速度传感器多次触发摇动事件 所以猫叫声是重叠的 你会发现 Sound 组件有一个属性 Minimum interval 最小间隔 它 决定了两次声音播放之间的时间间隔 当前设置为 400 毫秒 约半秒 钟 这个间隔小于单次猫叫的持续时间 500 毫秒 通过改变播 放的最小间隔 可以改变声音的重叠 如果你带着安装了应用的手机到处走动 每当你突然移动时 设备就 会发出猫叫声 这可能让你觉得尴尬 通常 Android 应用会保持在运 行状态 即使你不去管它们 应用程序与加速度传感器之间的通信也 不会间断 因而猫叫声也会相继传来 要想真正退出程序 需要呼出 HelloPurr 应用并按下设备上的菜单按钮 会呼出两个选项 其中 stop this application 用来停止并完全关闭应用 小结小结 以下是本章中涵盖的内容 创建应用的过程 在组件设计器中选择组件 并在块编辑器中设定它 们的行为 做什么及何时做 有些组件是可见的 有些则不可见 可见组件会出现在应用的用户界 面中 不可见组件执行像播放声音这类的事情 通过在块编辑器中组装 块 来定义组件的行为 先拖出一个像 when Button1 doClick 这样的事件处理程序 然后将 call Sound Play 这样的 命令块嵌入其中 这样 当用户点击该按钮时 块 Button1 Click 中的 所有块 命令 都将被执行 有些块 命令 需要附加特定信息才能起作用 例如震动就必须设定 振动的毫秒数 这些值被称为参数 数字块用来表示数字 你可以将这些数字块插入到需要参数的命令块 中 App Inventor 提供传感器组件 加速度传感器 Accelerometer Sensor 可以检测到设备的移动 你可以将创建完成的应用打包并下载到手机上 它们将独立于 App Inventor 而运行 第第 2 章章 油漆桶油漆桶 本章介绍 Canvas 组件 用它来生成简单的二维 2D 图形 目标是 创建一个 PaintPot 油漆桶 应用 让用户在手机屏幕上绘制图画 并让用户用手机给自己拍照 然后在自己的照片上绘图 回顾历史 早在 20 世纪 70 年代 PaintPot 是最早运行在个人电脑上的应用之一 目的是为了证明个人电脑的潜力 那时候 开发这样一款简单的绘图 应用是一项极其复杂的工作 而且绘图效果也略显粗糙 但现在 使 用 App Inventor 任何人都可以快速地创建一个有趣的绘图应用 这 也是创建 2D 游戏的起点 如图 2 1 油漆桶应用将实现下列目标 用手指点取颜色并绘图 用手指在手机屏幕上画线 用手指触碰手机屏幕画圆点 点击按钮来擦净屏幕 点击按钮来改变绘制圆点的大小 用相机拍摄照片 并在照片上画图 图 2 1 油漆桶应用 学习内容学习内容 本章涵盖了以下内容 使用 Canvas 组件来绘制图画 处理屏幕上的触摸及拖拽事件 使用 arrangement 组件来控制屏幕的外观 使用带有参数的事件处理程序 定义变量 来保存某些状态 如用户绘制的圆点的大小 准备开始准备开始 首先检查测试用的 Android 设备是否已经为使用 App Inventor 做好了 准备 Android 设备中已经安装了 AI 伴侣 手机的 WiFi 连接已经打开 再访问 App Inventor 网站 新建项目 PaintPot 点击 Connect AICompanion 并按照提示操作 连接测试设备 在正式开始之前 在组件设计器右侧的 属性 面板中 将 Screen1 的 Title 属性修改为 油漆桶 在测试设备上可以立即看到这一改变 应 用的标题栏将显示 油漆桶 这样做是否会混淆了项目名称与屏幕标题呢 在英文版书中 将 Title 改 为 PaintPot 与项目同名 因此才有此疑问 对中文读者来说不存在 这个疑问 译者注 别担心 在 App Inventor 中有三个非常重要 名称 项目名称 同时也是应用发布时所使用的名称 提示 想修改项目名 称 可以点击 Project Save project as 可以将原有项目赋予新的名 称 同时原有项目依然得以保留 组件名称 一般的组件名称都可以修改 但 Screen1 例外 在当前版 本中不能修改它的名称 屏幕标题 出现在设备的标题栏中 是 Screen 组件的 Title 属性 默 认值是 Screen1 如第一章 HelloPurr 中所见 可以随意修改它 如我 们刚才将其改为 油漆桶 设计组件设计组件 创建 油漆桶 应用需要以下组件 三个 Button 组件 用来选择画笔颜色 红 蓝或绿 放在 HorizontalArrangement 组件中 一个 Button 组件用来充当橡皮 另外两个 Button 组件用来改变画笔的大小 一个 Canvas 组件 充当画布 Canvas 具有 BackgroundImage 属性 我们将其设置为第一章 HelloPurr 中的 kitty png 稍后还可以将背景图 片设置为用户拍摄的照片 创建颜色按钮创建颜色按钮 首先按照以下提示创建三个颜色按钮 1 拖一个 Button 组件到预览窗口 设置其 Text 属性为 红 BackgroundColor 属性设为红色 2 在组件列表中选中 Button1 可能已经被选中 点击 Rename 按钮 将组件名称改为 RedButton 注意组件名称中不允许有空格 因此通 常将组件名称中每个单词的首字母大写 3 同样 创建另外两个按钮 分别命名为 BlueButton 和 GreenButton 将它们垂直地放在 RedButton 下方 对照图 2 2 检查一下你的操作 结果 图 2 2 创建了 3 个按钮的预览窗口 注意 在项目中 建议为组建起一个有意义的名称 而不是像第一章 那样采用默认名称 有意义的名称增加了程序的可读性 尤其是在切 换到块编辑器时 将有助于区分不同的组件 本书中 采用惯用的骆 驼命名法 如 RedButton 即多单词无空格的首字母大写命名方式 测试 如果你还没有点击 Connect 来连接测试设备 那么做好连接 然后检查一下应用在设备 如果已经连接 上的表现 使用使用Arrangement组件改善布局组件改善布局 现在三个按钮排成一列纵队 我们希望它们能排成一行 如图 2 3 所 示 使用 HorizontalArrangement 组件来实现组件的水平排列 1 在组件面板的 Layout 类中拖出 HorizontalArrangement 组件 放在按 钮下方 2 在属性面板中 设置 HorizontalArrangement 的 width 属性为 Fill Parent 充满父容器 以便在水平方向上占满整个屏幕 3 将三个按钮移动到 HorizontalArrangement 中 注意 当你拖拽按钮 时 会看到一条蓝色竖线 提示按钮将会被放置在什么地方 图 2 3 在水平布局组件内的三个按钮 此时查看组件列表 你会发现三个按钮缩进排列在 HorizontalArrangement 项下 以显示它们现在是次一级的组件 同时 注意到所有组件都缩进排在 Screen1 项下 测试 在测试设备的屏幕上 你会看到三个按钮排列成一行 尽管看 起来与预览窗口中略有不同 如 在预览窗口中可见的 HorizontalArrangement 周围的轮廓线 在测试设备上则不可见 通常采用布局组件来创建简单的垂直 水平或表格布局 也可以通过 逐级插入 或嵌套 布局组件来创建更加复杂的布局 添加添加Canvas 画布 画布 Canvas 像一块画布 用户可以在上面绘画 画圆 画等 添加一个 Canvas 并用第一章中的 kitty png 作它的背景图片 设置 BackgroundImage 属性 具体步骤如下 1 打开组件面板中的 Drawing and Amination 绘画与动画 类 将 Canvas 组件拖到预览窗口中 改名为 DrawingCanvas Width 设为 Fill parent Height 设为 300pixels 2 如果你已经完成了第一章的课程 那么文件 kitty png 已经下载 如果 没有 请在这里下载 kitty png 3 将 DrawingCanvas 的 BackgroundImage 设置为 kitty png 在设计器 的属性面板中 BackgroundImage 的默认值为 None 点击 None 及 Upload File 来添加 kitty png 文件 4 将 DrawingCanvas 的 PaintColor 属性设置为 red 以便当用户刚启动 应用但尚未点击颜色按钮时 画笔为红色 对照图 2 4 检查一下你的 操作 图 2 4 背景图片设为 kitty png 的 DrawingCanvas 组件 设置底部按钮及照相机组件设置底部按钮及照相机组件 1 从组件面板中拖出第二个 HorizontalArrangement 放在 canvas 下方 再拖两个 Button 并置于屏幕底部的 HorizontalArrangement 中 将第 一个按钮改名为 TakePictureButton Text 属性设为 拍照 第二个按 钮改名为 WipeButton Text 属性设为 清除 2 再拖两个 Button 组件到 HorizontalArrangement 中 放在 清除 按钮 后面 3 两个 Button 分别命名为 BigButton SmallButton Text 属性分别设为 大圆 小圆 4 从组件的 Media 类中拖出一个 Camera 组件放在预览窗口中 它将落 在非可视组件区 到此为止 应用外观已经设置完成 如图 2 5 所示 图 2 5 油漆桶应用的完整用户界面 测试 在设备上检查一下应用 猫的图片是否在顶部的一行按钮的下 方 底部的按钮是否正常显示 为组建添加行为为组建添加行为 下一步将定义组件的行为 编写一个绘画程序的难度似乎是难以想象 的 但无疑 App Inventor 已经承担了大部分繁重的工作 这里有易于 使用的块语言 不但可以处理用户的触摸及拖拽事件 也可以实现绘 画及拍照功能 Canvas 组件具有 Touched 及 Dragged 事件 你可以针对 DrawingCanvas Touched 触碰 事件编程 并调用 DrawingCanvas DrawCircle 画圆 程序 也可以对 DrawingCanvas Dragged 拖拽 事件编程来调用 DrawingCanvas DrawLine 画线 程序 然后对按钮编程 来设置 DrawingCanvas PaintColor 画笔颜色 属性 清除 DrawingCanvas 以及将 DrawingCanvas 的背景图片修改为照相机拍 摄的图片 添加触摸事件 绘制一个圆点添加触摸事件 绘制一个圆点 首先设置触碰行为 当用户触碰 DrawingCanvas 时 在接触点绘制一 个圆点 图 2 6 带有接触点位置信息的 Toughed 事件 1 在块编辑器中 打开 DrawingCanvas 抽屉拖出 DrawingCanvas Touched 块 该块有三个参数 x y 及 touchedSprite 如图 2 6 所示 这些参数提供了接触点的位置信息 提示 在第一章 HelloPurr 应用中已经熟悉了 Button Click 事件 但对 Canvas 事件还很陌生 Button Click 事件的发生很简单 不附带任何 其他信息 但有些事件则不然 它们附带了与事件有关的 参数 信息 DrawingCanvas Touched 事件中的 x y 代表接触点在 DrawingCanvas 中的坐标 而 touchedSprite 代表接触点所碰到的 DrawingCanvas 中的对象 在 App Inventor 中称作 sprite 精灵 但在第三章之前我们不会用到它 我们将利用接触点的 xy 坐标来绘制 圆点 2 从 DrawingCanvas 抽屉中拖出 DrawingCanvas DrawCircle 命令块 放在 DrawingCanvas Touched 事件处理程序中 如图 2 7 所示 图 2 7 用户触摸画布时 应用绘制一个圆点 在 DrawingCanvas DrawCircle 块的右侧有三个插槽 需要填入三个参 数 x y r 其中 x y 用于指定绘制圆形的位置 r 用于指定圆的半 径 在屏幕左下角带感叹号的黄色警告显示数字 1 表示需要填满这 些插槽 从图中看到 有两组 xy 这里要区分清楚 DrawingCanvas Touched 事件中的 xy 表示接触点位置 已知 而 DrawingCanvas DrawCircle 命令块的 xy 插槽 用于设定绘制圆形的 位置 待定 我们恰好要在用户的接触点绘制圆形 因此 DrawingCanvas Touched 事件中的 xy 值 可以作为 DrawingCanvas DrawCircle 的 x y 参数 插入到插槽中 提示 可以从 when 块中提取事件的参数值 将鼠标悬停在参数上 将呼出 get 及 set 块 可以将 get x 块拖出并插到 x 插槽中 作为 DrawCircle 命令的 x 值 如图 2 8 所示 图 2 8 读取事件参数 从 DrawingCanvas Touched 事件中拖出 get x 块 3 将鼠标悬停在 x y 参数上可以唤出 get 块 将 get 块插入到 DrawingCanvas DrawCircle 的插槽中 如图 2 8 2 9 所示 图 2 9 已经设定了圆的位置 x y 尚未指定圆的大小 图 2 10 当用户触碰 DrawingCanvas 时 将在 x y 点绘制一个半径为 5 的圆形 4 下面来设定圆的半径 r 长度的单位是 pixel 像素 是屏幕上能 够绘制的最小的点 设 r 5 点击屏幕的空白区域 输入 5 然后回车 自动创建数字块 5 并将其插入插槽 r 中 再看屏幕左下角的黄色 三角形 数字由 1 变为 0 因为所有插槽都被填满了 图 2 10 显示了 DrawingCanvas Touched 事件处理程序最终的样子 提示 在块编辑器中输入 5 然后回车 这种操作叫做输入块 typeblocking 块编辑器会根据你输入的字符 显示与该字符相匹 配的一系列块 如果输入的是数字 那么将创建一个数字块 测试 看看测试设备上都有什么 触碰 DrawingCanvas 手指碰过的 地方会留下一个圆点 如果在设计器中将 DrawingCanvas PaintColor 属性设置为红色 那么圆点也是红色 否则应该是默认的黑色 添加画线的拖拽事件添加画线的拖拽事件 下面添加拖拽事件处理程序 先看一下触碰 Toughed 事件与拖拽 Dragged 事件的区别 触碰事件 手指在 DrawingCanvas 画布 上放下再抬起 其间手指 没有移动 拖拽事件 手指在 DrawingCanvas 画布 上放下 手指与屏幕保持 接触并移动 在绘图程序中 手指在屏幕上拖动 沿着手指移动的路径 将绘制出 一条巨大的曲线 因为这条曲线实际上由数百个微小的线段构成 手 指每次微小的移动 都将绘制一个微小的线段 1 从 DrawingCanvas 抽屉中拖出 DrawingCanvas Dragged 事件处理 程序块 如图 2 11 所示 DrawingCanvas Dragged 事件携带了以下 参数 StartX StartY 手指开始拖动时所在的位置 整个曲线的起点 currentX currentY 手指的当前位置 微小线段的终点 prevX prevY 手指的上一个位置 微小线段的起点 draggedSprite 布尔值 如果用户直接拖动一个图片 则其值为真 本章不会用到这个参数 图 2 11 比起 Toughed 事件 Dragged 事件携带了更多参数 2 从 DrawingCanvas 抽屉中拖出 DrawingCanvas DrawLine 块 插 入 DrawingCanvas Dragged 块中 如图 2 12 所示 图 2 12 添加画线功能 DrawingCanvas DrawLine 块有四个参数 两点确定一线 设 X1 Y1 为起点 X2 Y2 为终点 你能确定每个参数中需要 插入什么值吗 记住 当手指在 DrawingCanvas 上拖动时 拖动事件 将被调用很多次 在应用中 手指的每次移动都会绘制出一个微小线 段 从 Prevx prevy 到 currentX currentY 现在把它们填入 DrawingCanvas DrawLine 块 3 拖出 get 块来充当画线的参数 将 get prevX 与 get prevY 分别插 入到 x1 和 y1 插槽 而 get currentX 与 get currentY 插入到 x2 和 y2 插槽 如图 2 13 所示 图 2 13 用户在屏幕上拖动手指 应用就在前一位置与当前位置之间画 一条微小线段 测试 在设备上测试一下刚刚设定的行为 在屏幕上随意拖动手指 画出线段及曲线 触碰屏幕画出一个圆点 添加按钮事件处理程序添加按钮事件处理程序 应用已经实现了画线功能 但现在只能画红线 下面添加颜色按钮的 事件处理程序 用户可以改变画笔的颜色 同样设置清除按钮 WipeButton 以便用户可以清除画面并重新开始 在块编辑器中 1 展开左侧块的 Blocks 列表 2 打开 RedButton 抽屉 拖出 RedButton Click 块 3 打开 DrawingCanvas 抽屉 拖出 set DrawingCanvas PaintColor 块 可能需要滚动块的列表以便在抽屉里找到它 并把它放在 RedButton Click 块 do 的位置 4 打开 Colors 抽屉 拖出红色块 将其插入 set DrawingCanvas PaintColor 块的插槽 5 重复步骤 2 4 设置蓝色和绿色按钮 6 最后设置 WipeButton 按钮 从 WipeButton 抽屉中拖出 WipeButton Click 块 再从 DrawingCanvas 抽屉里拖出 DrawingCanvas Clear 块 并将其放在 WipeButton Click 块中 确认 所有块显示如图 2 14 所示 图 2 14 单击颜色按钮改变 DrawingCanvas 的画笔颜色 单击清除按 钮清空屏幕 让用户拍照片让用户拍照片 App Inventor 应用可以与 Android 设备的强大功能进行交互 包括相 机功能 为了增加应用的趣味性 用户可以将绘图背景设置为他们用 相机拍摄的照片 1 Camera 组件有两个关键的块 Camera TakePicture 块用来启动设备 上的拍照程序 拍照完成将触发 Camera AfterPicture 事件 在 Camera AfterPicture 事件处理程序中 可以将刚刚拍摄的照片设置为 DrawingCanvas BackgroundImage 打开 TakePictureButton 抽屉并 拖出 TakePictureButton Click 事件处理程序 2 从 Camera1 抽屉拖出 Camera1 TakePicture 放在 TakePictureButton Click 事件处理程序中 3 从 Camera1 的抽屉中拖出 Camera1 AfterPicture 事件处理程序 4 从 DrawingCanvas 抽屉拖出 set DrawingCanvas BackgroundImage 块放在 Camera1 AfterPicture 事件处理程序中 5 Camera1 AfterPicture 事件有一个名为 image 的参数 代表刚刚拍摄 的照片 将从 Camera1 AfterPicture 块中得到的 get image 块插入 DrawingCanvas BackgroundImage 块 所有的块如图 2 15 所示 图 2 15 拍完的照片被设置为 DrawingCanvas 的背景图片 测试 在设备上点击 拍照 按钮并拍摄照片 猫的图片变成了你拍的照 片 你可以在自己的照片上进行绘画 用 Wolber 教授的照片绘画是 学生们的一大乐事 如图 2 16 Wolber 教授是本书的作者之一 改变画笔大小改变画笔大小 图 2 16 带有 Wolber 教授涂鸦照片的 PaintPot 应用 在 DrawingCanvas 上画圆点 其大小由 DrawingCanvas DrawCircle 块中参数 r 决定 改变 r 值可以改变圆点的大小 试试看将 5 改为 10 然后在测试设备上查看结果 另一个问题是 无论开发者如何设置参数 r 用户都只能用这个固定的 尺寸 如何让用户来改变圆点的大小呢 为此我们来修改程序 当用 户点击 大圆 按钮时 圆点半径设