Android使用Font Awesome

Android传统的显示图标方式

在平常的开发中，如果我们需要在界面上显示某个小图标，比如搜索按钮，返回按钮，这时我们需要美工给我们切对应的png图片，并放进对应的drawable文件夹中，这样随着图标的越来越多，APK体积也会越来越大。

什么是Font Awesome

Font Awesome是一个专为Bootstrap设计的字体文件，我们可以通过向显示字体一样方便的显示我们想要显示的图标。对于Android，Font Awesome使用TextView显示小图标，而且无需使用png图片，只需使用一个ttf文件，并且在这些字体中的图片都是矢量图，是可以放大和缩小的，这就意味着每个图标都能在所有大小的屏幕上完美呈现。

Font Awesome的优点和缺点

优点：只需使用一个ttf文件，无需美工切png图，大大减小了apk体积，并且可以自己设置颜色，大小。Font Awesome使用TextView显示图标，可以像设置字体颜色和大小一样，设置这个图标，可以起到很好的适配作用。

缺点：图标有限，很难满足所有的需求，但是可以结合传统的切图方式。

Font Awesome的使用方法

（1）下载Font Awesome，网址：http://www.fontawesome.com.cn/ ，直接下载解压，找到fontawesome-webfont.ttf

（2）把下载后的fontawesome-webfont.ttf放到assets文件夹中，如放在assets/fonts文件夹下

（3）编写fonts.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <string name="fa_home" tools:ignore="MissingTranslation">&#xf015;</string>
    <string name="fa_android" tools:ignore="MissingTranslation">&#xf17b;</string>
    <string name="fa_cubes" tools:ignore="MissingTranslation">&#xf1b3;</string>
    <string name="fa_user" tools:ignore="MissingTranslation">&#xf007;</string>
</resources>

对应图片的代码参考：http://www.fontawesome.com.cn/cheatsheet/

（4）布局文件引用

<TextView
    android:id="@+id/tv_icon_home"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/fa_home"
    android:textColor="@color/light_blue"
    android:textSize="100sp"
    />
<TextView
    android:id="@+id/tv_icon_android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/fa_android"
    android:textColor="@color/gray_999"
    android:textSize="100sp"
    />

（5）代码实现

Typeface typeface = Typeface.createFromAsset(context.getAssets(), "fonts/fontawesome-webfont.ttf");
tvIconHome.setTypeface(typeface);
tvIconAndroid.setTypeface(typeface);

自定义TextView组件

public class IconTextView extends TextView {
    public IconTextView(Context context) {
        super(context);
        this.init(context, null);
    }

    public IconTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.init(context, attrs);
    }

    public IconTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        Typeface typeface = Typeface.createFromAsset(context.getAssets(), "fonts/fontawesome-webfont.ttf");
        setTypeface(typeface);
    }
}

<cc.androidx.widget.fontawesome.IconTextView
    android:id="@+id/iv_tab_home"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:layout_centerHorizontal="true"
    android:text="@string/fa_home"
    android:textSize="24sp"
    />