第 6 章　巴黎地图旅游

本章将创建一个“向导”应用，带给你一次巴黎的梦幻之旅。而你的朋友，虽然不能与你同行，也能借此做一次虚拟的巴黎之旅。创建一个完整的地图应用看似复杂，不过App Inventor提供了ActivityStarter组件，可以为每个选定的虚拟位置打开对应的谷歌地图。创建过程分为两步，首先通过点选菜单打开埃菲尔铁塔、卢浮宫以及巴黎圣母院的地图；然后修改有关参数，使应用同时适用于卫星视图及普通地图视图。

学习要点

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

• ActivityStarter组件：可以在当前应用中打开其他Android应用。本章用它来打开带有多个参数的谷歌地图；

• ListPicker组件：用户可以从地点列表中进行选择。

设计组件

首先创建一个名为“ParisMapTour”的新项目，界面中包含：

• Image组件——显示一张巴黎的图片；

• Label组件——显示文字；

• ListPicker组件——用一个关联按钮来打开列表；

• ActivityStarter组件：非可视组件。

组件设计如图6-1所示。

图 6-1　设计器中的巴黎地图旅游

表6-1中列出了创建用户界面所用的组件。从Palette中拖出组件，并修改为指定的名称。

表6-1 巴黎地图旅游中用到的组件

设置ActivityStarter组件的属性

ActivityStarter组件用于在当前应用中，打开其他任何Android应用，如浏览器、谷歌地图，甚至你自己的应用。当用户从你的应用中打开另一个应用时，可以通过单击“后退”按钮返回到你的应用。在ParisMapTour应用中，将根据用户选择打开地图应用，来显示指定的地图。用户可以点击“后退”按钮返回到你的应用中，并继续选择不同的目的地。

ActivityStarter是一个相当底层的组件，需要为它设置一些属性信息，这些信息对于Java Android SDK程序员来说非常熟悉，但对世界上其他99.999％的人来说都很陌生。在本应用中，输入如表6-2中指定的属性，并要小心地使用大小写字母，这非常重要。

表6-2 用ActivityStarter打开谷歌地图必须设置的属性

还有一个DataUri属性必须在块编辑器中设置，用于在谷歌地图中打开指定地图。这个属性是动态的，即根据用户对目的地的选择而改变：埃菲尔铁塔、卢浮宫或巴黎圣母院。

现在切换到块编辑器，在编程添加组件行为之前，还有两个细节需要特别关照一下：

1. 下载文件metro.jpg并加载到项目中，将其设置为Image1的Picture属性；

2. ListPicker组件自带一个按钮，当用户点击时将列出备选项。将ListPicker1的Text属性设置为“选择巴黎的目的地”。

为组件添加行为

在块编辑器中，需要定义一个目的地列表，并设定两种行为：

• 当应用开始时，为ListPicker组件加载目的地列表，以供用户选择；

• 当用户从ListPicker中选择了一个目的地，地图应用将打开，并显示目的地地图。在应用的第一个版本中，只需打开地图，并搜索选中的地点。

创建目的地列表

打开块编辑器，用表6-3中列出的块创建一个destinations列表变量。

表6-3 创建destinations列表变量所需的块

如图6-2所示，变量destinations将调用make a list函数，其中插入了三个旅游目的地。

图 6-2　在App Inventor中创建列表非常容易

让用户选择一个目的地

ListPicker组件用来显示列表项供用户选择。通过将ListPicker的Elements属性设置为某个list，可以预先将备选项目加载到ListPicker中。这里将ListPicker的Elements属性设置为刚刚创建的destinations列表。因为想在应用启动时显示此列表，因此加载列表行为必须在事件Screen1.Initialize中定义。表6-4中列出了所需的块。

表6-4 在应用启动时加载ListPicker备选项所需的块

块的作用

应用启动时触发Screen1.Initialize，如图6-3所示，事件处理程序通过设置ListPicker的Elements属性来显示三个备选目的地。