App Inventor 簡易導覽列製作

哈囉！各位同學萬聖節快樂～～
這一次的萬聖節很奇怪，都沒有一群小孩來我的店 Trick or Treat，不知道是不是因為疫情的關係！？感覺沒什麼萬聖節的氣氛……

好啦那麼廢話不多說，我們直接切入這次的主體「導覽列」，導覽列在 App 中是非常常見的功能，但是 App Inventor 並沒有相關的元件可以使用，雖然在 App Inventor 的論壇可以找到很多有關導覽列的擴充元件，但是使用起來也不是很方便，所以這次我們就試著來用 App Inventor 現有的元件，來製作一個簡易的導覽列功能 App。

那麼請跟著以下的教學：

---

1. 先下載這個專案需要用到的素材

點我下載

---

b.png 和 b1.png 是導覽按鈕的背景圖，為了要讓按鈕被點選時，有一點動態的效果，所以在點選時，會變換背景圖片。
按鈕的長寬為 56 像素

poka01.mp3 是按鈕被點選時要播放的音效

---

新增一個專案「Slider」，並將素材全部上傳。

新增專案所需元件：

導覽按鈕、導覽列的介面和清單和音效

顯示隱藏元件打勾

設定元件屬性

導覽按鈕

高寬設定 56 像素

圖像為 b.png

文字清空

導覽列介面

高度填滿
寬度設定比例為 26

可見性要取消勾選

導覽清單項

元素字串可自填

高度填滿
寬度設定比例為 23

按鈕音效

來源設定為 poka01.mp3

如果妳有拉網路瀏覽器元件的話，首頁可以設定跟我一樣
「https://www.youtube.com/channel/UCAvsJlAZ7u4Tdi4_UqV4E1g」。

程式設計

2. 新增三個導覽按鈕功能方塊：

當按鈕被按下和鬆開時，變換背景圖片，讓它有動態的效果。

當按鈕被點選時要播放音效，並且判斷導覽列是否為開啟的狀態！？

新增最後三個方塊：

那麼這次的教學就……

等等！！

---

App 完整程式方塊

---

aia 專案程式檔案下載

點我下載

---

App 範例執行畫面

---

如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊