第 6 章 巴黎地图旅游

2018-02-24 15:51 更新

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

{%}

学习要点

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

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

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

设计组件

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

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

  • Label组件——显示文字;

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

  • ActivityStarter组件:非可视组件。

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

{%}

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

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

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

组件类型 面板中分组 命名 作用
Image User Interface Image1 在屏幕上显示巴黎的静态图片
Label User Interface Label1 显示文本:用Android发现巴黎
ListPicker User Interface ListPicker1 显示备选目的地列表
ActivityStarter Connectivity ActivityStarter1 选择目的地之后打开地图应用

设置ActivityStarter组件的属性

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

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

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

属性
Action android.intent.action.VIEW
ActivityClass com.google.android.maps.MapsActivity
ActivityPackage com.google.android.apps.maps

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

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

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

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

为组件添加行为

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

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

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

创建目的地列表

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

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

块的类型 所在抽屉 作用
Initialize global destinations to Variables 创建一个目的地列表
make a list Lists 添加列表项
“埃菲尔铁塔” Text 第一个目的地
“卢浮宫” Text 第二个目的地
“巴黎圣母院” Text 第三个目的地

如图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 Screen1 应用启动时触发该事件
set ListPicker1.Elements to ListPicker1 将Elements属性设置为需要显示的列表
get global destinations Variables 读取目的地列表

块的作用

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

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号