如何在 Android 應用中使用 FontAwesome 圖示

這篇教程中，我將向你演示如何在安卓專案中使用 FontAwesome 圖示集合。FontAwesome 可以節省許多時間，原因如下：

首先，你不需要擔心不同手機上的螢幕解析度問題。如果你使用png圖片，你需要在包裡面對每個圖示至少包含四種不同的版本。不僅如此，在某些超清螢幕上，你的圖示可能會出現顆粒感。這顯然是要避免的。但如果使用FontAwesome，你只需包含一個”TTF”檔案。

其次，你可以依賴於當今最豐富的免費圖示集之一。而且因為其在web上被廣泛的使用，現在使用者已經習慣了FontAwesome的風格。你不必再浪費時間去尋找漂亮的豐富的可以免費商用的圖示集合，我並不是說不存在這樣的圖示集，因為確實存在，但是非常稀少。

1. FontAwesome 的工作原理

我們先花點時間來了解一下FontAwesome 的工作原理。FontAwesome 圖示集背後的思想非常簡單，圖示被視為字元（character）。你可以能已經注意到一些奇怪的字元被作為文字對待，你可以輕易的拷貝 β 字元或者 ∑ 字元。你甚至可以在普通的文字編輯框中這樣做。還可以改變它們的大小和顏色。這是因為瀏覽器 － 以及文字編輯框 － 把這些字元視為文字。

FontAwesome 通過包含廣泛的圖示擴充套件了這一概念。你可以把它比喻成用圖示指定的不能打出的Unicode字元。

FontAwesome

看一眼 FontAwesome’s cheatsheet 就知道我在說什麼了。你選擇列表中的一個圖示，記下它的Unicode的字元，在TextView中使用它告訴安卓使用FontAwesome字型來渲染。

2. 匯入字型檔案

讓我們來看一個例子。下載和匯入FontAwesome 的TrueType 檔案到專案。你可以從 GitHub上下載FontAwesome 的assets。

當你下載了FontAwesome之後，你會發現裡面包含了一些檔案和資料夾。大部分都是對web專案有用的。我們只對位於fonts目錄的 fontawesome-webfont.ttf感興趣。

在你的安卓項目中，導航到 app > src > main。 main 目錄應該包含了一個叫 assets的資料夾。如果沒有就建立一個。在assets 資料夾中建立另一個fonts資料夾，並把fontawesome-webfont.ttf 新增到這個資料夾。

主義 fonts 資料夾並不是必須的。你可以直接把FontAwesome 的字型檔案放在 assets 目錄，但是把相同型別的檔案放在專門的目錄裡面比較方便。只要FontAwesome 字型在assets 或者子目錄之下就行。

3. 建立一個幫助類

現在你已經成功的把FontAwesome 字型檔案包含在了自己的安卓專案裡，是時候使用它了。我們會建立一個幫助類來讓事情變得簡單點。這個類要使用到android.graphics.Typeface。Typeface類指定typeface 以及一個字型的特徵。它用於指明text在繪製（以及測量）的時候該如何顯示。

建立一個新的名叫FontManager的java類：

public class FontManager {

    public static final String ROOT = "fonts/",
    FONTAWESOME = ROOT + "fontawesome-webfont.ttf";

    public static Typeface getTypeface(Context context, String font) {
        return Typeface.createFromAsset(context.getAssets(), font);
    }    

}

如果你想在專案中使用其他的字型，把字型放在helper 類裡面就可以了。類似於：

yourTextView.setTypeface(FontManager.getTypeface(FontManager.YOURFONT));

我們需要做的就這麼多，但是我們可以做的更好。使用上面的方法的話，我們需要為每個想當成圖示來使用的TextView建立一個變數。但作為一個程式設計師，我們都很懶，對吧？

圖示一般都是包含在一個ViewGroup，比如一個RelativeLayout或者LinearLayout中。我們可以寫一個方法，爬遍指定xml parent 並且遞迴的覆蓋每個TextView的字型。

public class FontManager {

    // ...

    public static void markAsIconContainer(View v, Typeface typeface) {
        if (v instanceof ViewGroup) {
            ViewGroup vg = (ViewGroup) v;
            for (int i = 0; i < vg.getChildCount(); i++) {
                View child = vg.getChildAt(i);
                markAsIconContainer(child);
            }
        } else if (v instanceof TextView) {
            ((TextView) v).setTypeface(typeface);
        }
    }

}

假設你的佈局檔案是這樣的：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/icons_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />

</LinearLayout>

要把這三個TextView標記為圖示，我們重寫onCreate方法，並新增如下程式碼片段：

Typeface iconFont = FontManager.getTypeface(getApplicationContext(), FontManager.FONTAWESOME);
FontManager.markAsIconContainer(findViewById(R.id.icons_container), iconFont);

4. 使用你想要的圖示

現在輪到有意思的部分了。訪問 FontAwesome的GitHub頁面 並瀏覽所給的圖示。選擇三個你喜歡的。我準備選擇三個chart圖示，分別是 area chart icon, pie chart icon, 以及 line chart icon。

在你的項目中，進入 values 資料夾並建立一個新的檔案：icons.xml。這個檔案將被作為字典使用，它將把Unicode 字元和相應的圖示用可讀的名字匹配起來。這意味著我們需要為每個圖示建立一個入口。

<resources>
    <string name="fa_icon_areachart">&#xf1fe;</string>
    <string name="fa_icon_piechart">&#xf200;</string>
    <string name="fa_icon_linechart">&#xf201;</string>
</resources>

你可以在FontAwesome cheatsheet或者圖示的 詳情頁面 找到你感興趣圖示的程式碼。

下一步就是在佈局的TextView裡面引用這些字串。這是最終的樣子：

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/fa_icon_areachart" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/fa_icon_piechart" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/fa_icon_linechart" />

如果你開啟Android Studio的佈局編輯器，你會看到它無法渲染這些圖示。這是不正常的。編譯並啟動應用，你又會發現圖示是正常渲染了的。

看起啦很小是吧？改變圖示的大小很簡單，你只需改變textSize屬性就是了。改變圖示的顏色也一樣簡單，編輯textColor屬性就是了。

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_weight="1"
    android:textSize="45sp"
    android:textColor="#9b59b6"
    android:text="@string/fa_icon_areachart" />

就如你看見的，這些圖示明亮鮮明。這是因為FontAwesome 在執行時渲染。它們是向量圖示 而不是柵格圖示。

總結

在這篇文章中，我演示瞭如何在一個安卓專案中使用FontAwesome 圖示集。FontAwesome 廣為所知且免費。即使在超清螢幕上，顯示結果也很明快。改變顏色和大小都跟改變屬性一樣簡單。