第 6 章　巴黎地圖旅游

本章將創(chuàng)建一個(gè)“向?qū)А睉?yīng)用，帶給你一次巴黎的夢(mèng)幻之旅。而你的朋友，雖然不能與你同行，也能借此做一次虛擬的巴黎之旅。創(chuàng)建一個(gè)完整的地圖應(yīng)用看似復(fù)雜，不過App Inventor提供了ActivityStarter組件，可以為每個(gè)選定的虛擬位置打開對(duì)應(yīng)的谷歌地圖。創(chuàng)建過程分為兩步，首先通過點(diǎn)選菜單打開埃菲爾鐵塔、盧浮宮以及巴黎圣母院的地圖；然后修改有關(guān)參數(shù)，使應(yīng)用同時(shí)適用于衛(wèi)星視圖及普通地圖視圖。

學(xué)習(xí)要點(diǎn)

本章介紹以下App Inventor組件及概念：

• ActivityStarter組件：可以在當(dāng)前應(yīng)用中打開其他Android應(yīng)用。本章用它來打開帶有多個(gè)參數(shù)的谷歌地圖；

• ListPicker組件：用戶可以從地點(diǎn)列表中進(jìn)行選擇。

設(shè)計(jì)組件

首先創(chuàng)建一個(gè)名為“ParisMapTour”的新項(xiàng)目，界面中包含：

• Image組件——顯示一張巴黎的圖片；

• Label組件——顯示文字；

• ListPicker組件——用一個(gè)關(guān)聯(lián)按鈕來打開列表；

• ActivityStarter組件：非可視組件。

組件設(shè)計(jì)如圖6-1所示。

圖 6-1　設(shè)計(jì)器中的巴黎地圖旅游

表6-1中列出了創(chuàng)建用戶界面所用的組件。從Palette中拖出組件，并修改為指定的名稱。

表6-1 巴黎地圖旅游中用到的組件

設(shè)置ActivityStarter組件的屬性

ActivityStarter組件用于在當(dāng)前應(yīng)用中，打開其他任何Android應(yīng)用，如瀏覽器、谷歌地圖，甚至你自己的應(yīng)用。當(dāng)用戶從你的應(yīng)用中打開另一個(gè)應(yīng)用時(shí)，可以通過單擊“后退”按鈕返回到你的應(yīng)用。在ParisMapTour應(yīng)用中，將根據(jù)用戶選擇打開地圖應(yīng)用，來顯示指定的地圖。用戶可以點(diǎn)擊“后退”按鈕返回到你的應(yīng)用中，并繼續(xù)選擇不同的目的地。

ActivityStarter是一個(gè)相當(dāng)?shù)讓拥慕M件，需要為它設(shè)置一些屬性信息，這些信息對(duì)于Java Android SDK程序員來說非常熟悉，但對(duì)世界上其他99.999％的人來說都很陌生。在本應(yīng)用中，輸入如表6-2中指定的屬性，并要小心地使用大小寫字母，這非常重要。

表6-2 用ActivityStarter打開谷歌地圖必須設(shè)置的屬性

還有一個(gè)DataUri屬性必須在塊編輯器中設(shè)置，用于在谷歌地圖中打開指定地圖。這個(gè)屬性是動(dòng)態(tài)的，即根據(jù)用戶對(duì)目的地的選擇而改變：埃菲爾鐵塔、盧浮宮或巴黎圣母院。

現(xiàn)在切換到塊編輯器，在編程添加組件行為之前，還有兩個(gè)細(xì)節(jié)需要特別關(guān)照一下：

1. 下載文件metro.jpg并加載到項(xiàng)目中，將其設(shè)置為Image1的Picture屬性；

2. ListPicker組件自帶一個(gè)按鈕，當(dāng)用戶點(diǎn)擊時(shí)將列出備選項(xiàng)。將ListPicker1的Text屬性設(shè)置為“選擇巴黎的目的地”。

為組件添加行為

在塊編輯器中，需要定義一個(gè)目的地列表，并設(shè)定兩種行為：

• 當(dāng)應(yīng)用開始時(shí)，為ListPicker組件加載目的地列表，以供用戶選擇；

• 當(dāng)用戶從ListPicker中選擇了一個(gè)目的地，地圖應(yīng)用將打開，并顯示目的地地圖。在應(yīng)用的第一個(gè)版本中，只需打開地圖，并搜索選中的地點(diǎn)。

創(chuàng)建目的地列表

打開塊編輯器，用表6-3中列出的塊創(chuàng)建一個(gè)destinations列表變量。

表6-3 創(chuàng)建destinations列表變量所需的塊

如圖6-2所示，變量destinations將調(diào)用make a list函數(shù)，其中插入了三個(gè)旅游目的地。

圖 6-2　在App Inventor中創(chuàng)建列表非常容易

讓用戶選擇一個(gè)目的地

ListPicker組件用來顯示列表項(xiàng)供用戶選擇。通過將ListPicker的Elements屬性設(shè)置為某個(gè)list，可以預(yù)先將備選項(xiàng)目加載到ListPicker中。這里將ListPicker的Elements屬性設(shè)置為剛剛創(chuàng)建的destinations列表。因?yàn)橄朐趹?yīng)用啟動(dòng)時(shí)顯示此列表，因此加載列表行為必須在事件Screen1.Initialize中定義。表6-4中列出了所需的塊。

表6-4 在應(yīng)用啟動(dòng)時(shí)加載ListPicker備選項(xiàng)所需的塊

塊的作用

應(yīng)用啟動(dòng)時(shí)觸發(fā)Screen1.Initialize，如圖6-3所示，事件處理程序通過設(shè)置ListPicker的Elements屬性來顯示三個(gè)備選目的地。