App Inventor除了在程式設計階段上傳圖片素材，配合手機特性可在使用App時引用手機裝置內圖片。本文介紹如何設定圖像選擇器事件，以按紐方式更改顯示圖片。

到目前為止，從第一章到第二章的手機程式設計案例而言，圖片是非常廣泛普遍的素材，先前都是用直接從電腦上傳圖片到APP Inventor裡，然而真正對於使用者來講，這一個圖片上傳的過程類似像是後臺操作，前端使用者並沒有辦法進行和掌握。所以正常手機APP都會提供調用手機圖片的功能，方便選取手機本身所拍攝或是所儲存的照片。此功能已成為手機應用的核心組件之一，當然在APP Inventor也有相對應元件供使用，這一節具體介紹。

一、元件屬性可見性

於「元件面板」的「多媒體」頁籤中，將「圖像選擇器」拉到「工作面板」，注意到在「元件屬性」裡有一項「可見性」，如果打勾，這個元件會顯示於「工作面板」中，亦即手機安裝啟動後會出現在應用螢幕上。

二、工作面板圖像

把四個圖像選擇器加都到工作面板中，取消可見性，於工作面板不會看到此元件，它也不會落到「非可視元件」，其作用是特定事件發生時，啟動選取手機照片行為，所得到照片再作特定用途，具體設計流程詳待後述。

三、停用程式方塊

進入程式設計頁面，先前文章設定了長按時發送簡訊，其實如今像Line這樣的即時通訊應用相當方便，發送簡訊的機會大大減少，因此預計將簡訊改為更換圖片。

於組合好的程式方塊滑鼠右鍵，雖然快捷選單中有一項為「刪除程式方塊」，暫時不想冒然直接刪除，所以選擇「停用程式方塊」。如截圖「按鈕1」所示，停用後方塊會反灰，表示目前處於停用狀態，如果有需要再次啟用，以同樣滑鼠右鍵方式操作即可。

四、圖像選擇事件

於「方塊」選擇這一節重點「圖像選擇器1」，照舊會跳出浮窗選項，仔細以英文文法歸納的話，大致分為「條件子句」（當…執行…）、「不及物動詞」（呼叫…）、「受詞」（元件屬性）、「及物動詞」（設元件屬性為…）等，不同性質是不同形狀的拼圖方塊，掌握了規則分類，就會比較有基礎觀念。這一節用到最基本普遍的「當圖像選擇器1.選擇完成，執行…」這項條件子句。

五、摺疊程式方塊

需求為選擇某一手機照片作為按鈕圖片，方式之一如截圖右邊上面部份，當「按鈕1.被長按」後，選擇圖片作為按鈕1圖像，這是比較原始直接想法。但如同本書前面所言，程式語言是寫給機器人讀的，機器人一絲不苟、一個口令一個動作。方式一在執行時會有問題，在圖片選擇同時，圖像選擇器的圖片並不會馬上更改，此時設定按鈕1圖像不會生效。必須像方式二分成兩個動作，第一個動作先按鈕2選擇圖片、第二個動作選擇完成後，再此圖片設為按鈕2圖片，也就是一定要告訢機器人圖片選好了，可以拿來使用了。

動作（動詞）為英文文法上的用語，在程式語言中的說法是行為（behavior），以這個步驟來說，可以理解為使用者的某一特定操作。

上述兩種方式的差別，在後續模擬測試時會更加清楚。這裡先順帶補充一點，第三步驟的快捷選單有個「摺疊程式方塊」，其作用類似於電腦程式視窗最小化，只是將它面積儘可能縮小，但功能不變，仍然在執行中。例如截圖右下角部份，四個發送訊息的程式方法和第三步驟完全一樣，只是第三步驟為「展開程式方塊」，本步驟為「摺疊程式方塊」，另外本步驟簡訊1和簡訊2是「停用程式方塊」，簡訊3和簡訊4為「啟用程式方塊」。

六、手機模擬測試

於手機模擬測試，第一個按鈕和第二個按鈕於長按後都可以選取圖片，分別對應上個步驟的方式一和方式二。第一按鈕選擇圖片後並不會馬上改變圖像，必須再長按一次才會發現按鈕圖片變了，第二按鈕則是選取圖片後馬上會改變圖像。配合上個步驟的程式設計，多加思考，對於機器人如何解讀程式當有更進一步的體會。

七、刪除程式方塊

最後設計好的程式如圖所示，按鈕3長按和按鈕4長按被摺疊了，另外原按鈕1到按鈕4長按發送訊息已無用處，可以滑鼠右鍵「刪除2個程式方塊」了。熟悉工作面板裡這些滑鼠右鍵的操作，無形中有助於調整程式方塊版面，提昇設計效率。

拼湊程式方塊也不簡單

從這節範例第五步驟到第六步驟可以見得，APP Inventor讓編寫程式變得簡單，以拼湊方塊代替書寫代碼，然而終究還是設計程式，在本質上沒有太大差異。因此必須掌握好每個元件的屬性、方法、行為、事件，要累積豐富寫程式（拼湊程式方塊）的經驗，學習如何寫一篇好的程式語言文章讓機器閱讀，才能夠在設計程式時容易上手，否則的話，縱然方塊拼湊起來了，可能到測試才發現沒辦法達到預期效果。

每天學習，每天充電：AppInventor文章合集。