App Inventor 使用擴充套件變換元件文字字型
App Inventor,  免費資源分享

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

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

那麼以下請跟著教學





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

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

material-design-icons/MaterialIcons-Regular.ttf at master · google/material-design-icons · 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 帳號註冊

發表迴響