介紹Procedure副程式指令 & ActivityStarter元件

1. App Inventor 教學講義
4
吳為勇

2. 2
Chapter
4
Procedure 副程式指令
當我們程式越寫越多越寫越大時有些程式片段會不停的重複出現，可以利用副程
式將這些程式片段或是指令集合在一起，之後可透過呼叫該程序來使用這些指
令。
圖表
1
Procedures 副程式指令區

3. 3
拼塊說明：
Procedure do
將多個指令集合在一起，之後可透過
呼叫該程序來使用這些指令。
當建立一個新的程序指令時，App
Inventor 會自動幫它取一個名稱，您
也可以點選它之後自行改成您所需要
的名稱。
在一個程式中的副程式名稱必須是唯
一的，App Inventor 不允許在同一個
程式中有兩個名稱相同的副程式。您
可點選副程式上的標籤來將其重新命
名。App Inventor 會自動調整對應的
呼叫指令名稱。
當您新增一個副程式之後，會有以下指
令可以呼叫它：
點選左上方的藍色方塊可以設定有幾個
輸入值如下圖。表示有一個名為 x 的輸
入值。
procedure result（有回傳值）
本指令與副程式指令相同，但使用時
會回傳一個結果(result)。當本程序執
行完畢後會將 return 欄位回傳。
當您新增一個有回傳值的副程式之
後，會有以下指令可以呼叫它。也正
因為它有回傳值的關係，您可以直接
把這個副程式當作某個欄位的輸入
值。

4. 4
範例：
如何傳參數給副程式：
用副程式求取矩形面積、圓形與三角形的面積
矩形面積公式：長＊寬
圓形面積公式：半徑＊2*π
三角形面積公式：(底＊高)/2
使用元件: Button(按鈕), Label(標籤)，HorizantalArrangemant(水平排列)
Step1:
先在設計師作業作業設計畫面
1. 先在左側 Layout 裡選擇『HorizantalArrgement』水平排列元件依序拖拉四
個此元件放到 Viewer 中。
2. 在第一個水平排列元件中放入三個 Button，分別為矩形(btnRect)、三角形
(btnTriangle)與圓形(btnCircle)。
3. 在第二個水平排列元件中放入一個 Label 元件與一個 TextBox 元件。Label
元件名稱更名為 lblText1，內容改成為”長：”。TextBox 元件名稱更名為
txtField1。清空內容為””。
4. 在第三個水平排列元件中也放入一個 Label 元件與一個 TextBox 元件。Label
元件名稱更名為 lblText2，內容改成為”寬：”。TextBox 元件名稱更名為
txtField2。清空內容為””。
5. 在第四個水平排列元件中放入兩個 Label 元件。第一個 Label 元件內容改成
為”Answer：”。第一個 Label 元件名稱更名為 lblAnswer。清空內容為””。
6. 最後再最下方加上一個 Button 元件為”求面積”(btnClick)。
7. 設計師設計完成圖如下：

5. 5
圖表
2
計算三種面積_設計師作業
Step2:
1. 進入 Blocks 拼塊編輯作業裡點選左側 Built in 裡 Variables 的設定兩個全
域變數。一個為 pi 表示圓周率所以設定為 3.14159。另一個為 type 表示
要計算那一種形狀的面積（矩形：1，三角形：2，圓形：3）。
拼塊設計如下：
圖表
3
設定全域變數
2. 接著設定矩形、三角形與圓形這三個按鈕按下之後要處理的事。首先先
設定矩形的。
I. 點選左側 Built in 裡的 Screen1 下的 btnRect 選擇『When btnClick.Click
do』。拖拉到中間的 Viewer 中。
II. 點選左側 Built in 裡 Variables 選擇『set type to』放到 『When
btnClick.Click do』裡。設定『set type to』後面的框框值為數字 1。

6. 6
III. 點選左側 Built in 裡的 Screen1 下的 lblText1 與 lblText2 的
『set .text to 』拉到『set type to』下方的框框，並將值分別
設定為 Text 的“長：”，“寬：”。
IV. 點選左側 Built in 裡的 Screen1 下的 txtField1 與 lblField2 的
『set .text to 』拉到上一步驟的『set .text to 』下方的
框框，並將值分別設定為 Text 的“”，“”。
V. 點選左側 Built in 裡的 Screen1 下的 lblAnswer 拉到上一步驟的
『set .text to 』下方的框框，並將值分別設定為 Text 的“”。
VI. 因為圓形只需要輸入一個半徑值。所以點選圓形時只顯示一個
Label 顯示為“半徑：”與 TextBox 輸入值清空為“”。另外要把
另一組的 Label 跟 TextBox 欄位隱藏起來。因為圓形會隱藏第二組
的 Label 與 TextBox，所以我們在矩形與三角形需要再增加一個判
斷。點選左側 Built in 裡的 Screen1 下的 Control 點選『if then』的選
項拉到上一步驟的『set .text to 』下方的框框。『If』右邊的
判斷式則要選擇左側 Built in 裡的 Screen1 下 Logic 的『xxx=yyy』
項目。其中 xxx 放入『lblText2.Visible』，yyy 則是放入 false。『then』
的右邊框框則是放入『set lblText2 .Visible to 』『true』與『set
txtField2 .Visible to 』『true』。
3. 三角形與矩形設定差不多只是將 lblText1 與 lblText2 的『set .text
to 』拉到『set type to』下方的框框，並將值分別設定為 Text 的“高：”，
“底：”。
4. 圓形設定的比較少，只設定一組 lblText1 與 txtField1 的，另一組 lblText2
與 txtField2 欄位隱藏起來。lblText1 設定成“半徑：”然後 txtField1 與
lblAnswer 都設成””值。三組都設定好的圖示如下：
圖表
4
按鈕拼塊編輯

7. 7
5. 接下來要設定副程式了。點選左側 Built in 裡的 Procedure 點選『to
procedure result』這是設定一個有回傳值副程式拼塊。先設定 procedure
名稱是 getRectArea，表示這是一個計算矩形面積的副程式。點選拼塊中
藍色方塊的地方設定要傳入幾個值。矩形面積計算需要輸入長度與寬度。
所以我們設定兩個輸入值一個為 height，另一個則為 width。result 旁的
拼塊表示需要回傳的值。這裡我們就設定為 height * width。
設定好的副程式拼塊如下圖。
圖表
5
計算矩形面積的副程式
6. 如法炮製上個步驟將計算三角形面積與圓形面積的副程式也設定起來。
設定好的副程式拼塊如下圖：
圖表
6
計算三角形面積與圓形面積的副程式
7. 最後就是來設定求面積按鈕了。
I. 點選左側 Built in 裡的 Screen1 下的『btnClick』選擇『When
btnClick.Click do』。拖拉到中間的 Viewer 中。然後判斷這時候是要
求哪一種形狀面積。
II. 點選左側 Built in 裡的 Control 選擇『if then』的選項設定起有兩個
『else if』條件並拉到『When btnClick.Click do』的框框中。
III. 從 Blocks 中 Math 點選『=』將其拖拉到 if 指令上方的條件式欄位。
IV. 從 Blocks 裡的 Variable 點選『get』下拉選擇『global type』，將其拖
拉到『=』的左邊框框中。

8. 8
V. 從 Blocks 中 Math 點選『Number』，將內容改為『1』，並拖拉到『=』
的右邊框框內。
VI. 從 Blocks 裡的 Screen1 點選 lblAnswer 選擇『set lblAnswer.Text to』拖
拉放到 if 指令中 then 右邊的框框去。
VII. 從 Blocks 裡的 Procedures 點選『call getRectArea height width』放到
『set lblAnswer.Text to』右邊的框框中。
VIII.從 Blocks 裡的 Screen1 點選 txtField 選擇『txtField1.Text』拖拉放到
height 右邊的框框。
IX. 從 Blocks 裡的 Screen1 點選 txtField 選擇『txtField2Text』拖拉放到
width 右邊的框框。
X. 餘下的兩個『else if』也是類似的設定，只是要計算三角形跟圓形
的面積。都設定好的拼塊如下
圖表
7
求面積按鈕之 Blocks 設定

9. 9
8. 最後整體所有的拼塊設定如下圖
圖表
8
計算矩形,三角形與圓形面積範例之 Blocks

10. 10
9. 執行結果如下圖
計算矩形面積
計算三角形面積
計算圓形面積

11. 11
ActivityStarter 元件
ActivityStarter 元件讓您可透過現有的應用程式去呼叫其他的應用程式。您所能呼
叫的應用程式，可以是您或是別人所編寫的 App Inventor 程式，或是像安裝在手
機上的程式如 Camera 及 Google Map 。甚至只要您提供足夠的資訊，您就可
以自由地呼叫任何一個應用程式。此外，您也能在呼叫一個應用程式之後再從接
收它的執行結果。為了能呼叫另一個應用程式，您必須提供一些控制資料給
Android 作業系統。我們需在使用 StartActivity 方法之前，必須先設定好
ActivityStarter 元件中相關的屬性才行。
關於 ActivityStarter 元件資訊的參考網站：
1. http://beta.appinventor.mit.edu/learn/reference/other/activitystarter.html
2. http://www.appinventor.tw/activitystarter
首先來看個範例吧。
範例
桃園好好玩
透過使用者先行設置的景點介紹作為旅遊目的地，透過Ｇoogle 地圖搜尋目的地
的位置與當地的地圖資訊。
使用元件：Image,ListPicker,ActivityStarter
Step1:
1. 先在設計師作業作業設計畫面。將 Image 元件拉到 Screen1，並設定圖
片來源（上傳一個圖檔）。
2. 將 ListPicker 元件拉到 Screen1 中。

12. 12
3. 將 Activity Starter 拉到 Screen1 中。點選 Components 中
ActivityStarter1，設定此元件的屬性：
Action 欄位: android.intent.action.VIEW
ActivityClass 欄位: com.google.android.maps.MapsActivity
ActivityPackage 欄位: com.google.android.apps.maps
圖表
9
ActivityStarter 元件設定

13. 13
Step2:
1. 開啓 Blocks Editor。
2. 點選畫面左側 Built in 裡的 Variables 選擇『Initialize global name to』
指令，更改 name 為 places。
3. 點選畫面左側 Built in 裡的 Lists 選擇『make a list』放到『Initialize
global name to』指令的右邊框框。然後按下藍色的框框增加 List 的
Item 到 6 個。然後點選左側 Built in 裡的 Text 選擇“”(文字字串)放
到『make a list』右邊的框框。然後依序填入字串內容為”虎頭山公
園”,”大溪老街”,”龍潭觀光大池”,”永安漁港”,”桃源仙谷”,”
味全埔心牧場”(這些景點是參考
http://okgo.tw/buty/taoyuan.html)。
4. 點選畫面左側 Built in 裡的 Screen1 下的 ListPicker1 選擇『when
ListPicker1.AfterPicking do』事件。這表示 USER 再點選景點後要做
的事。
I. 接下來點選畫面左側 Built in 裡的 Screen1 下的ＡctivityStarter1
選擇『set ActivityStarter1.DataUri to』放到『when
ListPicker1.AfterPicking do』中的框框裡。

14. 14
II. 點選畫面左側 Built in 裡的 Text 裡的『join』放到『set
ActivityStarter1.DataUri to』右邊的框框。準備將景點與地圖查
詢指令結合為一個字串。
III. 點選畫面左側 Built in 裡的 Text 裡的『””』放到『join』上方
的框框。內容設定為『geo:0,0?q=』。
IV. 點選畫面左側 Built in 裡的 Screen1 下的 ListPicker1 選擇
『Listpicker1.Selection』(這表示Ｕser 點選的景點 Item)放到放
到『join』下方的框框。
V. 最後要用 StartＡctivity 指令來啟動 Google Map。點選畫面左側
Built in 裡的 Screen1 下的ＡctivityStarter1 選擇『set
ActivityStarter1.StartActivity』放到『set
ActivityStarter1.DataUri to』。
5. 接下來要設定當 app 起始進入時的初始化設定。
I. 點選畫面左側 Built in 裡的 Screen1 選擇 『When Screen1
Initalize do』放到 Viewer 中。然後要設定 ListPicker 要使用的 List
資料是什麼。

15. 15
II. 點選 Screen1 下的 ListPicker1 選擇『set Listpicker1.Element to』
放到『When Screen1 Initalize do』中。
III. 點選 Variables 下的『get』下拉選擇到”global places”並拖拉
放到『set Listpicker1.Element to』右邊的框框。這樣就完成了
Blocks Editor 的設定了。完成圖如下：
圖表
10
桃園好好玩＿Blocks 完成圖

16. 16
範例執行結果：
圖表
11
起始畫面
圖表
12
景點選單

17. 17
圖表
13
定位到景點
圖表
14
點選景點顯示內容

18. 18
參考網站與書籍：
書籍：
1. Android 手機程式超簡單
App
Inventor
入門卷 作者：CAVE 教育團
隊 出版社：馥林文化
2. Google
App
Inventor 開發手冊：不會寫程式也能設計你的 APP
作者：
王培坤
出版社：上奇資訊
網站：
1. http://appinventor.mit.edu
2. http://www.appinventor.tw/