App Inventor 教學講義

4

吳為勇

  2  

Chapter  4  

Procedure副程式指令  

當我們程式越寫越多越寫越大時有些程式片段會不停的重複出現，可以利用副程

式將這些程式片段或是指令集合在一起，之後可透過呼叫該程序來使用這些指

令。

 圖表   1  Procedures副程式指令區

  3  

拼塊說明：  

Procedure do

將多個指令集合在一起，之後可透過呼叫該程序來使用這些指令。 當建立一個新的程序指令時，App Inventor 會自動幫它取一個名稱，您也可以點選它之後自行改成您所需要的名稱。 在一個程式中的副程式名稱必須是唯一的，App Inventor 不允許在同一個程式中有兩個名稱相同的副程式。您可點選副程式上的標籤來將其重新命名。App Inventor 會自動調整對應的呼叫指令名稱。

當您新增一個副程式之後，會有以下指令可以呼叫它：

點選左上方的藍色方塊可以設定有幾個

輸入值如下圖。表示有一個名為 x的輸

入值。

procedure result（有回傳值）

本指令與副程式指令相同，但使用時會回傳一個結果(result)。當本程序執行完畢後會將 return 欄位回傳。 當您新增一個有回傳值的副程式之後，會有以下指令可以呼叫它。也正因為它有回傳值的關係，您可以直接把這個副程式當作某個欄位的輸入值。

   

  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  

 圖表   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  

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  

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  

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  

8. 最後整體所有的拼塊設定如下圖  

 圖表   8  計算矩形,三角形與圓形面積範例之 Blocks  

     

  10  

9. 執行結果如下圖  

     

計算矩形面積   計算三角形面積   計算圓形面積  

           

  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  

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  

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  

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  

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  

範例執行結果：  

 

圖表   11  起始畫面    

圖表   12  景點選單  

 

  17  

 圖表   13  定位到景點  

 

 圖表   14  點選景點顯示內容  

 

         

  18  

參考網站與書籍：  書籍：

1. Android手機程式超簡單   App  Inventor  入門卷 作者：CAVE教育團隊 出版社：馥林文化  

2. Google  App  Inventor開發手冊：不會寫程式也能設計你的 APP  作者：王培坤  出版社：上奇資訊  

 網站：

1. http://appinventor.mit.edu  2. http://www.appinventor.tw/