App Inventor 使用擴充套件變換元件文字字型

在 App Inventor 裡，元件的字型只有三種可以設定，分別是「sans serif、serif 及 monospace」，但是對於一個設計師來說，只有這三種可以選擇是遠遠不夠的，所以今天要來分享，國外民間高手自製的「MyFonts」元件，透過這個元件，我們就可以在 App Inventor 裡設定 Google Fonts 字型。

那麼以下請跟著教學

---

1. 首先我們先下載需要用到的字型 ttf 檔案和擴充套件

在瀏覽器搜尋「MaterialIcons.ttf」，進入它的 GitHub 下載檔案。

點擊網頁右方的 Download 下載

---

這個是可以讓文字變成圖案的字型

也可以到 Google Fonts 下載其它的字型

---

接著來下載擴充套件

點擊下方按鈕進到網頁後，下載最新版的套件。

點我前往

兩個檔案都載好後，就要來實作 App 了。

2. 開啟 App Inventor，並新增一個專案「Font」。

先各拉一個標籤、按鈕和複選盒元件到工作面板

然後來上傳套件

在組件面板的最下方，點匯入擴充套件，將剛剛下載的 aix 檔案上傳。

上傳好後就將元件拖拉到工作面板

它是一個不可視的元件

接著來上傳剛剛下載的 ttf 檔案

在素材區點上傳文件，將 MaterialIcons-Regular.ttf 上傳上來。

上傳好後，我們就可以在 MyFonts 的屬性設定 CustomFont 了。(也可以透過程式方塊設定，如有大量字型要用，就建議使用這個方法。)

切換到程式設計

拖拉以下方塊：

---

當複選盒被選中後，就呼叫設定字型的方塊，將要改變字型的元件，托放到元件框。

ResetFont 方塊則會將已改變的字型變回原狀

---

好了！那麼這次的 App 教學就到………

ㄟㄟ等等，老師你搞什麼鬼啊！！？為什麼打勾後會突然換成圖案？？？

Ans：這是因為一開始已經在元件的文字欄位設定好對應的文字了。

那我要怎麼知道輸入什麼文字會變換成什麼圖案呢？

Ans：可以到以下兩個網站，找到你要的圖案，然後將它的文字輸入到元件即可。

Material Icons Guide – Google Design (要滑到最底下)

Icons – Google Fonts

不過在設定文字時，有兩個條件：
第一是全部都要小寫
第二是遇到空白的部分要用底線取代

例如我要設定下面的愛心圖案

它的 Favorite Border 要改成「favorite_border」

接著我把它填到按鈕的文字設定

這樣在變換時，按鈕的文字就會變成愛心了~~~

---

App 專案程式檔下載

點我下載

---

App 範例執行畫面

---

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

可以多點幾次喔~~

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