![App Inventor 使用擴充套件變換元件文字字型 App Inventor 使用擴充套件變換元件文字字型](https://i0.wp.com/i.imgur.com/LPHfWXv.png?resize=1024%2C538&ssl=1)
App Inventor 使用擴充套件變換元件文字字型
在 App Inventor 裡,元件的字型只有三種可以設定,分別是「sans serif、serif 及 monospace」,但是對於一個設計師來說,只有這三種可以選擇是遠遠不夠的,所以今天要來分享,國外民間高手自製的「MyFonts」元件,透過這個元件,我們就可以在 App Inventor 裡設定 Google Fonts 字型。
那麼以下請跟著教學
1. 首先我們先下載需要用到的字型 ttf 檔案和擴充套件
在瀏覽器搜尋「MaterialIcons.ttf」,進入它的 GitHub 下載檔案。
![](https://i0.wp.com/i.imgur.com/0xYdIJE.png?w=960&ssl=1)
點擊網頁右方的 Download 下載
![](https://i0.wp.com/i.imgur.com/bMdI17g.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/GP6m5AY.png?w=960&ssl=1)
這個是可以讓文字變成圖案的字型
也可以到 Google Fonts 下載其它的字型
接著來下載擴充套件
點擊下方按鈕進到網頁後,下載最新版的套件。
![](https://i0.wp.com/i.imgur.com/Rhr92ug.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/qSTRQpn.png?w=960&ssl=1)
兩個檔案都載好後,就要來實作 App 了。
2. 開啟 App Inventor,並新增一個專案「Font」。
先各拉一個標籤、按鈕和複選盒元件到工作面板
![](https://i0.wp.com/i.imgur.com/QafUxzu.png?w=960&ssl=1)
然後來上傳套件
在組件面板的最下方,點匯入擴充套件,將剛剛下載的 aix 檔案上傳。
![](https://i0.wp.com/i.imgur.com/BHbA2wb.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/aQAvlyh.png?w=960&ssl=1)
上傳好後就將元件拖拉到工作面板
它是一個不可視的元件
接著來上傳剛剛下載的 ttf 檔案
在素材區點上傳文件,將 MaterialIcons-Regular.ttf 上傳上來。
![](https://i0.wp.com/i.imgur.com/ZPhqRaE.png?w=960&ssl=1)
上傳好後,我們就可以在 MyFonts 的屬性設定 CustomFont 了。(也可以透過程式方塊設定,如有大量字型要用,就建議使用這個方法。)
![](https://i0.wp.com/i.imgur.com/3kieK19.png?w=960&ssl=1)
切換到程式設計
拖拉以下方塊:
![](https://i0.wp.com/i.imgur.com/XY8dKpY.png?w=960&ssl=1)
當複選盒被選中後,就呼叫設定字型的方塊,將要改變字型的元件,托放到元件框。
ResetFont 方塊則會將已改變的字型變回原狀
![](https://i0.wp.com/i.imgur.com/D8NnYhf.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/VzVKPWU.png?w=960&ssl=1)
好了!那麼這次的 App 教學就到………
ㄟㄟ等等,老師你搞什麼鬼啊!!?為什麼打勾後會突然換成圖案???
Ans:這是因為一開始已經在元件的文字欄位設定好對應的文字了。
那我要怎麼知道輸入什麼文字會變換成什麼圖案呢?
Ans:可以到以下兩個網站,找到你要的圖案,然後將它的文字輸入到元件即可。
Material Icons Guide – Google Design (要滑到最底下)
不過在設定文字時,有兩個條件:
第一是全部都要小寫
第二是遇到空白的部分要用底線取代
例如我要設定下面的愛心圖案
![](https://i0.wp.com/i.imgur.com/yXN6hYE.png?w=960&ssl=1)
它的 Favorite Border 要改成「favorite_border」
接著我把它填到按鈕的文字設定
![](https://i0.wp.com/i.imgur.com/iw3Rvti.png?w=960&ssl=1)
這樣在變換時,按鈕的文字就會變成愛心了~~~
![](https://i0.wp.com/i.imgur.com/Wy3opn1.png?w=960&ssl=1)
App 專案程式檔下載
App 範例執行畫面
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![[教學分享]App Inventor 重新讀取 Screen1](https://i0.wp.com/i.imgur.com/ad9TweI.png?resize=75%2C75&ssl=1)
![App Inventor 使用計時器做出簡易跳躍效果 App Inventor 使用計時器做出簡易跳躍效果](https://i0.wp.com/i.imgur.com/8TWSPqH.png?resize=75%2C75&ssl=1)