FontAwesome-用TextView顯示圖片

本文已授權微信公衆號：鴻洋（hongyangAndroid）在微信公衆號平臺原創首發。

在Android項目開發中，圖片可謂是必不可少的一部分，這時我們可能會去看許多圖片的適配方案，例如，根據不同分辨率來提供多套圖什麼的…

這篇文章並不是去介紹如何去做圖片的適配，而是介紹一個略屌的字體庫，利用該字體庫，我們可以用TextView的形式去顯示圖片，而且我們還可以用android:textSize隨意改變圖片的大小！
聽起來是不是有點小激動了，不要着急，因爲它只是一個字體庫，所以使用起來非常簡單，在介紹它之前，我們先來介紹一種設置字體的絕佳方式。

在開始之前，我們先來看一張圖。

如果你認爲這上面的圖片都是用ImageView去顯示，那你就錯了，這些全都是用TextView搞的，快快快，我們馬上來介紹一下這個屌屌的東西吧。

設置字體最佳實踐

大家都知道，在android中，我們如果要更換字體，除了要引入我們需要的字體庫外，還需要給我們的TextView一一去設置使用的字體，如何去設置呢？其實很簡單。

textView.setTypeface(Typeface tf);

儘管就這麼一行代碼，但是，在我們項目中肯定會存在大量的TextView，難道我們要一個個的去動手設置嗎？想想這也是一件很頭疼的事，下面就介紹一種方便的方法，一行代碼解決字體設置的問題。

在看代碼之前，先來看看思路，其實思路很簡單，

我們提供一個根佈局，寫一個方法去遞歸遍歷整個根佈局，如果發現是textView，則設置字體。

思路很簡單，相信代碼也很簡單，就是一個遞歸方法。

/**
 * Created by qibin on 2015/9/22.
 */
public class FontHelper {
    public static final String FONTS_DIR = "fonts/";
    public static final String DEF_FONT = FONTS_DIR + "yourfont.ttf";

    public static final void injectFont(View rootView) {
        injectFont(rootView, Typeface.createFromAsset(rootView.getContext()
                .getAssets(), DEF_FONT));
    }

    public static final void injectFont(View rootView, Typeface tf) {
        if(rootView instanceof ViewGroup) {
            ViewGroup group = (ViewGroup) rootView;
            int count = group.getChildCount();
            for(int i=0;i<count;i++) {
                injectFont(group.getChildAt(i), tf);
            }
        }else if(rootView instanceof TextView) {
            ((TextView) rootView).setTypeface(tf);
        }
    }
}

定義了一個工具類，這個類提供兩個靜態方法，但是核心都是

public static final void injectFont(View rootView, Typeface tf)

這個方法中，首先我們去判斷我們給的rootView是不是ViewGroup，如果是ViewGroup，則遍歷他的所有子view，然後遞歸去調用這個方法，直到全部完成，如果發現某個view是TextView，則我們調用setTypeface方法來設置字體。

ok，從這個工具類中我們還可以看到，我們的字體是放在assets/fonts目錄下的。

fontawesome的使用

好了好了，我們開始進入今天的主題，今天的主角就是fontawesome這個字體庫，在開始使用之前，我們我們需要到https://github.com/FortAwesome/Font-Awesome/下載這個字體庫。下載下來以後，你會看到有很多目錄和文件，沒關係，我們只需要一個文件-fontawesome-webfont.ttf，這個文件位於/fonts/目錄下。將這個ttf文件copy到你項目的assets目錄下，按照慣例或者說是共識，我們可能是將它放到assets/fonts這個目錄下(注意，沒有這個目錄的話，創建它！)。

修改我們上面的工具類，將字體指定爲我們新引入的字體庫。

public class FontHelper {
    public static final String FONTS_DIR = "fonts/";
    public static final String DEF_FONT = FONTS_DIR + "fontawesome-webfont.ttf";
}

ok， 準備工作都做好了，那我們就開始使用它吧，看我的xml佈局文件，

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xf242;" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="&#xf206;" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:textColor="#FF00FF00"
        android:text="&#xf206;" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFF0000"
        android:text="&#xf206;" />

</LinearLayout>

除了第一個TextView的文本我們認識外，其他的我們一概不熟！ 沒關心，過一會，我會給出一個認識它們的方式。還需要注意的是，很多TextView我們給出了textSize或者textColor屬性，不用想這些肯定去控制了我們需要顯示的圖片的大小和顏色！
最後是在activity中使用字體庫，正式利用了上面的工具類，所以我們的代碼將會很簡單。

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FontHelper.injectFont(findViewById(android.R.id.content));
    }
}

僅僅一行代碼，

FontHelper.injectFont(findViewById(android.R.id.content));

我們就完成了給所有TextView設置字體的工作，現在可以運行一下項目，再和文章剛開始的那張圖做一下對比，看看我們給TextView設置的那些屬性，是不是都生效了！

可是，現在我們又遇到了一個問題，我們怎麼知道哪寫文本代表了什麼圖片呢？下面給出一個網址，通過這個網址，大家可以看到實體文本和他對應的圖片的一個對照表。
http://fortawesome.github.io/Font-Awesome/cheatsheet/

哦，對了，不知道大家有沒有發現，這裏我們無意中解決了一個圖片大小的問題，因爲我們可以任意改變一個文本的大小，所以，就不需要提供多套圖去適配不同的屏幕了。

ok， 就到這裏吧，希望大家可以從這裏找到自己喜歡或者適用自己的圖標。

參考鏈接：http://code.tutsplus.com/tutorials/how-to-use-fontawesome-in-an-android-app–cms-24167

最後給出用到的代碼：代碼下載，戳這裏