Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP4。

由於在 EP3 設計的時候 App 基本上已經完成在 "聯絡人"、"品項"、"訂單" 跟 "設定" 這四個下方索引頁籤的頁面處理，來完成透過索引頁籤切換頁面的操作。

不過，在 EP3 介紹的時候也提到，目前的索引頁籤沒有 Icon 圖示的設定，看起來會比較怪一些。

本篇 EP4 就針對這個 Icon 圖示的部分，我們來介紹一下說，有關 Xamarin.Forms 它在處理 Icon 圖示上所發展的新技術，利用字型檔就直接來呈現這個 Icon 圖示的效果。

讓我們在 Icon 圖示的部分設定就，可以不再需要很辛苦的要一個一個在各平台去加入這個圖片檔，直接透過字型圖示檔的方式，然後就把這些 Icon 圖示給呈現在這個畫面裡面。

那我們就開始吧 GO~~~

第一個部分，當然就是我們要有字型檔，很多字型網站都有提供一些下載與試用(若要作為商業運用時，還請注意相關授權規範)，如: Font Awesome、Google Fonts、TW Icon Fonts...等。

在本 EP4 裡面我們就從 FontAwesome 的這個字型網站，下載免費授權使用的版本來做相關的展示，並在下載完成之後，將這個字型檔的檔案命名為 "FontAwesome5.otf"。

有關於要在 Xamarin.Forms 的專案加入字型檔的部分其實也不難，只是這個字型檔屬於額外的資源檔案，所以我們直接在這個 Xamarin.Forms 的專案上面建立一個資料夾叫做 "Assets"，並在這個資料夾再繼續去放字型檔的部分，這樣對於該專案的管理上會比較明確清楚些。

所以就把取得的字型圖示檔案，透過 Visual Studio 的方案總管，直接把它加入到這個 Xamarin.Forms 專案裡面的 "Assets" 資料夾就可以了。

確認在這個 Xamarin.Forms 專案裡面，已經把這個字型檔給加入進來之後，再繼續完成以下兩點。

第一點要注意的就是將這個字型檔本身的在 Visual Studio 屬性窗格中將 "建置動作" 從 "無" 變更其設定為 "內嵌資源"。

第二點就是將 Xamarin.Forms 的專案裡面找到 "AssemblyInfo.cs" 這個檔案。

並且在其中加入"ExportFont" 的這個部分，並且設定其 Alias (別名) 為 "FA5"(各位可以自己取 Alias，目的為方便辨認與使用而已)。

完成之後我們就稍微做一下存檔跟同時重建一下這個專案，理當來說應該要能正確成功的建置完成唷。

第二個部分，就是我們也要知道這個字型檔的圖示與 glyphs 編碼的對應，雖然原本給各位下載字型檔的網站也應該都會標示相關的資訊，可是如果有直接可以針對字型檔案來查詢的服務就更好了。

沒問題，可以再利用一些其他線上服務的網頁，來針對單一字型檔去做一個這樣子的預覽，並且同時得知圖示與 glyphs 編碼的對應。

例如: IconFont2Code 這個線上服務，來做這樣的一個運用。

該服務的網頁頁面設計得很單純，有一個 Browser 的按鈕供各位點選，接著就選擇瀏覽字型檔所在的電腦位置，接著點選開啟。

網站讀取資型檔之後，就會看到說有這些圖示呈現的樣子，並且利用它下面所帶的這個 glyphs 編碼，在我們的 Xamarin.Forms 專案當中來使用。

第三個部分，我們就回到這個 Xamarin.Forms 專案當中的 AppShell 的這個檔案來，去做一些 Icon 上的調整與運用到這個 Font 的部分。

所以這個部分我們就要稍微做這樣子一個變更了。首先，是說在之前 EP3 的這些 Page 標記所形成的索引頁籤的寫法，其實是一種縮寫的寫法，現在要來把這個完整的一個標記寫出來並且再增加一些東西。

其實因為 TabBar 它是底下是可以設計 Tab 標記，再設計 ShellContent 標記，然後這個 ShellContent 裡面才會有內容頁面的 Page 標記使用。

所以事實上我們在 EP3 這樣子寫內容頁面呈現再索引頁籤的做法，其完整的撰寫應該是

而如果同一階層的標記(Tab 標記或是 ShellContent 標記)只有單獨一個內容頁面的 Page 標記要使用，則可省略 Tab 標記或是 ShellContent 標記的撰寫。

而在這邊我們就統一改寫成這樣來繼續完成後面的介紹

若是之前直接讀取圖片的作法，那就是在 ShellContent 這邊如果是直接寫 Icon 屬性的設定，我們可以直接設定圖片的檔名(.png or .jpg)，但現在我們不就這麼做，將這個 Icon 屬性的整個 Attritube 完整的寫在這個 ShellContent 的標記裡面。

那它就會變成 ShellContent.Icon 的完整標記，而 Visual Studio 馬上會提醒你，它沒有相關的一個值的設定，所以這裡我們就用 "FontImageSource" 的這個標記來設定，字型檔上的圖示對照其 glyphs 編碼運用。

還記得前面我們將加入的字型檔，在做 ExportFront 有設定相關的一個 Alias (別名) "FA5"，把此Alias (別名) 設定給 FontImageSource 的 FontFamily 屬性中，再來設定另一個叫做 Glyph 的屬性，也就會是前面介紹的第二部分看到的 glyphs 編碼的指定。(若有需要，也請依照字型檔的設計輔助指定 FontImageSource 當中的 Color 屬性)

不過，因為我們現在不是在 C# 的程式語法裡面，而是在 XAML 的標記語法裡面，所以在這邊填法會變得比較不一樣一點。本來在直接 C# 裡面的做法上面如果是直接填 "\uf2bd"，在 XAML 這邊我們會填上 "&#x f2bd ;" 這樣的寫法。

所以當我們這樣都變更改完成之後執行看看到 Android 跟 iOS 的部分。

噹~噹~是不是就完全看起來不同了呢? ^_<

本篇 EP4 的介紹就到這邊囉，我們 EP5 再見唷唷唷~~~

謝謝各位!