如何在安卓app中使用FontAwesome圖標

jopen 9年前發布 | 10K 次閱讀 Android開發 移動開發 FontAwesome

英文原文:How to Use FontAwesome in an Android App 

轉載注明出處。

這篇教程中,我將向你演示如何在安卓項目中使用 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的布局編輯器,你會看到它無法渲染這些圖標。這是不正常的。編譯并啟動應用,你又會發現圖標是正常渲染了的。

如何在安卓app中使用FontAwesome圖標

看起啦很小是吧?改變圖標的大小很簡單,你只需改變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" />

如何在安卓app中使用FontAwesome圖標

就如你看見的,這些圖標明亮鮮明。這是因為FontAwesome 在運行時渲染。它們是矢量圖標 而不是柵格圖標。

總結

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

來自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0925/3518.html

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!