EP 4: Use Fonts to design Icon in TopStore App

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 再见唷唷唷~~~

谢谢各位!