App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网

App Inventor编程教程-目录

想象一下,你像往常一样,正在一条熟悉的路上慢跑,突然被一个念头打动——一款全新的杀手级移动应用!一路上,你甚至忘记了回家…

本节课做一个“导游”应用,带你进行一次巴黎梦幻之旅。创建一个全功能的地图应用看似非常复杂,不过App Inventor提供的两个高级组件让这件事变得很简单。其中之一是活动启动器组件,用于在你创建的应用中启动设备中的其他应用,包括谷歌地图应用;另一个是Web浏览框组件(WebViewer),用于在应用中打开一个窗口,来显示你想访问的网页。本章将尝试用这两个组件创建两个不同版本的导游应用。

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网

学习要点

本章介绍以下App Inventor组件及概念。

  • 活动启动器组件:可以在当前应用中打开设备中的其他安卓应用。
  • Web浏览框组件:可以在你的应用中显示网页。
  • 列表变量:在应用中使用列表变量保存信息。
  • 列表选择框组件:用户可以在一个位置列表中进行选择。
  • 如何创建一个动态的URL来显示不同的地图。

设计组件

在App Inventor中创建一个名为“巴黎地图旅游”的新项目,用户界面中包含下列组件:

  • 图片组件——显示一张巴黎的图片;
  • 标签组件——显示文字;
  • 列表选择框组件——用一个关联按钮来打开列表;
  • 活动启动器组件——非可视组件,用在第一个版本的导游应用中。

参照图6-1,在设计视图中完成这些组件的设置。

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网
图6-1 测试设备中的巴黎地图旅游应用
表6-1中列出了创建用户界面所需要的组件。从组件面板中拖出组件,放在预览窗口中,并修改为指定的名称。

表6-1 “巴黎地图旅游”应用的组件设置

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网

设置活动启动器组件的属性

活动启动器组件用于在当前应用中打开其他任何安卓应用,包括谷歌地图,或者你创建的其他应用。在“巴黎地图旅游”应用中,首先要实现的功能是:根据用户的选择打开地图应用,并显示特定的地图。随后,用户可以点击“后退”按钮返回到你的应用中,并继续选择其他的目的地。

活动启动器是一个相对底层的组件,需要为它设置一些属性信息,这些信息对于Java Android SDK程序员来说非常熟悉,但是对于这个世界上其余99.99%的人来说都是相当陌生的。在本应用中,输入如表6-2中指定的属性,但一定要小心,这些属性中的字符都是区分大小写的,也就是说,一个字母的大写或小写是至关重要、不可互换的。

表6-2 用活动启动器打开谷歌地图必须设置的属性

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网

还有一个数据地址(DataUri)属性必须在编程视图中设置,用于在谷歌地图中打开指定地图。这个属性无法在设计视图中设置,需要根据用户对目的地的选择,在编程视图中动态设置。在这个例子中,用户有三种选择:埃菲尔铁塔、卢浮宫或巴黎圣母院。

现在切换到编程视图,在正式开始编程代码之前,还有两件事情需要特别说明一下。

  • 下载文件metro.jpg并加载到项目中,将其设置为图片1的图片属性。
  • 列表选择框组件自带一个按钮,当用户点击它时,将列出备选项。将列表选择框1的显示文本属性设置为“选择巴黎的目的地”。

为组件添加行为

在编程视图中,需要定义一个目的地列表,并设定两种行为。

  • 当应用开始时,为列表选择框组件加载目的地列表,以供用户选择。
  • 当用户从列表选择框中选择了一个目的地,地图应用将打开,并显示目的地地图。在应用的第一个版本中,只需打开地图,并搜索选中的地点。

创建目的地列表

打开编程视图,用表6-3中列出的块创建一个名为“目的地”的列表变量。

表6-3 创建“目的地”列表变量所需的块

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网

其中的列表块默认只有两个插槽,点击代码块左上角的蓝色标记,可以添加第三个插槽。

在添加完插槽后,创建三个文本块,用于描述三个目的地,并将它们分别填充到三个插槽中,完成后的代码如图6-2所示。

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网
图6-2 具有三个列表项的目的地列表
让用户选择一个目的地

我们刚刚定义的列表并不能直接显示在用户界面上,这不是变量的功能,需要利用列表选择框组件来显示目的地列表的内容,以供用户选择。将列表选择框的列表属性设置为某个列表,可以预先将备选项加载到组件中。在本应用中,将列表选择框的列表属性设置为我们刚刚创建的目的地列表。由于这项设置只需要执行一次,因此我们在屏幕初始化事件中定义这一行为。表6-4中列出了所需要的块。

表6-4 在应用启动时为列表选择框加载备选项所需的块

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网

当应用启动时,将触发Screen1的初始化事件。如图6-3所示,在事件处理程序中设置列表选择框1的列表属性,以便在列表选择框打开时能够显示三个备选目的地。

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网
图6-3 在应用启动时,初始化列表选择框的三个备选项
测试:点击“连接”来设置实时测试所用的设备或模拟器。然后在手机上点击“选择巴黎的目的地”按钮,列表选择框1将显示三个备选项。此时,如果你选中其中的一项,将关闭选择列表,回到原来的状态。

使用搜索网址打开地图

下面来编写程序,使得当用户选中目的地时,活动启动器将打开谷歌地图并搜索选定位置的地图。

我们首先来解释一下URL(网址)。以网址http://maps.google.com?q=Paris 为例,当你将其输入到浏览器地址栏中(并按回车)时,浏览器将显示一幅巴黎的地图。很多网址中都含有“?”,这表示网址中包含参数,参数就排列在“?”之后,表示你要访问某个网站中的特定(或者说具体)信息。在上述网址中,参数的名称为“q”,是“query”(查询)的简写;参数的值是“Paris”,它告知谷歌地图要显示的具体地点。

在这个应用中,我们要动态生成URL,根据用户选择的目的地,为网址添加相应的参数。这时你将看到选择的目的地不同,打开的地图也不同。

当用户从列表选择框中选中某一项时,将触发列表选择框的“完成选择”事件,在该事件的处理程序中,可以设置活动启动器的“数据地址”属性,以便通知活动启动器将要打开的地图。随后,用活动启动器的“启动活动对象”命令打开你所选中的目的地地图。表6-5中列出了实现这一功能所需要的代码快。

表6-5 用活动启动器打开谷歌地图所需要的块

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网

当用户在列表选择框中选择了某一项时,选中的内容被保存在列表选择框的选中项属性中,同时,选择还触发了“完成选择”事件。如图6-4所示,数据地址属性是两部分的组合,其中第一部分为“http://maps.google.com/?q=” (是固定不变的),第二部分为用户的选择。如果用户选中了第一项“艾菲尔铁塔”,则数据地址将被设置为“http://maps.google.com/?q=埃菲尔铁塔” 。

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网
图6-4 设置数据地址并打开选中的地图
为了使活动启动器能够打开地图应用,我们为它设置了其他属性,因此当调用活动启动器1的“启动活动对象”指令时,将打开地图应用,并搜索目的地,搜索的依据是活动启动器的数据地址属性。

测试:重新连接测试设备,点击“选择巴黎的目的地”按钮。当选中了某个地点时,是否打开了该地点的地图?点击设备的“后退”按钮,能否返回到你的应用中?

完整的应用:用活动启动器实现的地图旅游

图6-5中显示了第一个版本的“巴黎地图旅游”中的所有代码块。

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网
图6-5 完整的“巴黎地图旅游”应用(版本1)
用Web浏览框实现的虚拟旅游

活动启动器是一个非常重要的组件,因为它可以让你的应用访问设备中的任何其他应用。不过,我们还有另外一个组件也可以制作这样的导游应用,它就是Web浏览框组件。Web浏览框组件就像一个浏览器一样,在你的应用中打开一个窗口,在窗口中可以打开任何一个网页,当然也包括谷歌地图,而且,通过编写代码可以改变访问的网页。与活动启动器不同的是,用户不必离开当前的应用,因此也就无需使用“后退”按钮返回应用。

在第二个版本的导游应用中用到了Web浏览框组件,并为应用增添一些亮点,如打开一些放大的地图,并欣赏巴黎的街景——那些举世闻名的地标性建筑。为此,需要定义第二个列表,并使用更为复杂的参数配置,来决定地图的显示方式。首先,在谷歌地图中找到那些特定地图的URL地址,仍然以巴黎的地标性建筑为目的地,但是当用户选中目的地时,使用选中项的索引值(选中项在列表中的位置)来打开地图。此时我们设定了地图的放大倍数,以及显示方式:地图或街景。

在准备改动项目之前,你可能希望保存(另存项目)此前基于活动启动器创建的导游应用,这样,一旦后面的改动出现问题,你还可以随时找回现有版本并重新开始。

添加Web浏览框组件

在设计视图中,删除活动启动器组件,并从用户界面组件中拖出Web浏览框组件,将其放置在其他组件的下方。检查一下Screen1的允许滚动属性,不勾选该属性,以便Web浏览框能够正常地显示网页。

找到特定地图的URL

下面在电脑上打开谷歌地图,找到每一个目的地对应的特定地图。

  1. 在计算机上浏览http://maps.google.com。
  2. 搜索地标(例如,艾菲尔铁塔)。
  3. 将地图放大到你满意的倍数。
  4. 选择你想要的视图类型(例如,街景)。
  5. 在旧版本的地图中,点击地图窗口右上方的Link(链接)按钮,可以复制地图的URL地址;在新版的谷歌地图中,只能从浏览器的地址栏中复制这个网址。

使用这种方法可以获得一些巴黎名胜的很酷的地图,以及一些短网址。表6-6中提供了一些样例,如果你愿意的话,可以直接使用(这些网址是利用bit.ly的短网址服务进行压缩的结果)。

表6-6 谷歌地图的虚拟旅游网址

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网

将表6-6中的任何一个网址粘贴到浏览器地址栏中,都将打开一幅地图。

定义网址列表

创建一个列表变量,命名为网址列表,其中包含了每个目的地的网址,如图6-6所示。注意,要让列表项的排列顺序与此前的目的地列表相一致(即第一个网址与第一个目的地——埃菲尔铁塔相对应)。

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网
图6-6 将地图网址复制粘贴到网址列表的文本块中
修改列表选择框的完成选择行为

在第一个版本的应用中,在列表选择框1的完成选择事件中,设置了活动启动器1的数据地址属性,即将字符串“http://maps.google.com/?q=” 与用户所选的目的地(如“埃菲尔铁塔”)连接起来。在第二个版本中,完成选择事件的处理程序则更为复杂,用户从一个列表(目的地)中选择,但程序要从另一列表(网址列表)中读取对应的网址。具体来说,当用户从列表选择框中选中某一项时,需要知道选中项的索引值,以便用这个索引从网址列表中选择正确的网址。稍后我们会详细解释索引值的含义,但为了更好地描述这一概念,要先把这些块创建出来,以便于我们理解。这项功能需要许多块,均在表6-7中列出。

表6-7 根据用户选中的目的地来确定对应的网址所需要的块

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网

当用户从列表选择框1中选中某一项时,将触发完成选择事件,如图6-7所示。选中的目的地,如“埃菲尔铁塔”,被保存在列表选择框1的选中项属性中。在本应用的第一个版本中使用过该属性值。不过,列表选择框还有另外一个属性——选中项索引值,它对应于选中项在列表中的位置。因此,如果选中“埃菲尔铁塔”,则选中项索引值为1;如果选中“卢浮宫”,则索引值为2;当然,如果选中“巴黎圣母院”,则索引值为3。

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网
图6-7 在Web浏览框中访问选中的网址
利用列表选择框1的选中项索引值从网址列表中选择列表项,这样做之所以可行,是因为两个列表(目的地及网址列表)保持了一致的顺序,使得目的地与网址之间一一对应。因此,尽管用户从第一个列表中做选择,你也可以利用这一选择(实际上是选中项的索引值),从网址列表中选取正确的网址。

测试:在手机上点击“选择巴黎的目的地”按钮,将打开包含三个选项的列表。选择其中一个,看看会出现哪张地图。

完整的“巴黎地图旅游”应用(Web浏览框版)

图6-8 中显示了第二个版本的“巴黎地图旅游”中的全部代码。

App Inventor编程教程-第7课-巴黎地图旅游-少儿编程教育网
图6-8 完整的“巴黎地图旅游”应用(Web浏览框版)

改进

下面是一些可以尝试的改进建议。

  • 像这样的虚拟旅游应用,可以将目的地设定为不同类型的场所,如你工作的场所或所在的学校,也可以是你的下一个假期旅行目的地。
  • 尝试用活动启动器来发送邮件,或启动像YouTube这样的应用(具体方法可参考http://bit.ly/1qiFx8Z)。
  • 提高难度:创建一个可定制的虚拟旅游应用,让用户自己来制作游览计划。输入旅游目的地,以及对应的地图网址,来生成一个供自己选择的旅游向导。相关数据需要存储到网络数据库中,并且让应用可以调用这些已经输入的数据。有关创建网络数据库的例子,请参见出题及答题应用。

小结

下面是本章涉及的一些概念。

  • 列表变量:用于保存像旅行目的地以及地图网址这样的多条目数据。
  • 列表选择框组件:允许用户从列表中选择列表项。列表选择框的列表属性用来保存列表内容,选中项属性用来保存用户选中的项,而用户选中某个列表项之后,将触发完成选择事件。
  • 活动启动器组件:用于在你的应用中打开其他应用。本章展示了如何调用地图应用,你也可以打开浏览器或任何其他的安卓应用,甚至是你自己创建的其他应用。
  • 选中项索引值:代表用户从列表中选中的某列表项在整个列表中的位置。利用这个索引值可以从另一个列表中选择对应的信息(前提是这两个列表的列表项顺序保持同步)。关于列表变量及列表选择框组件的更多信息,请参见第19章。