一种可以代替图标的字符集Fontawesome

一套绝佳的图标字体库

Fontswesome官方网站：http://fontawesome.io/
援引的英文原文：How to Use FontAwesome in an Android App

最近，在维护公司某个项目时，因为我是新入职的，刚拿到Android应用源码，有一天leader叫我增加一个页面，我看了就问了一句这些图标我没有，结果leader就是这不是图标，而是字符集运行时渲染出来的，这倒让我觉得有趣，我就问了是什么字符集这么腻害，因此我便结识了下面这位：Fontawesome.

下面这篇教程中，我将演示如何在我们的Android项目中使用 FontAwesome 图标集合。FontAwesome 可以节省许多时间，原因如下：

• 无需不同分辨率的icon
  以前，我们使用的图标多为png图片，或者是.9图，理论上应该要提供至少4种（hdpi/xhdpi/xxhdpi/xxxhdpi）不同分辨率下的图标资源，虽然在现实情况下，提供一个xxhdpi分辨率的图标就可以啦，尽管在绝大部分的机型上显示效果还不错，但在某些超清屏幕上，你的图标却可能会出现颗粒感。相反如果使用FontAwesome，你只需引入一个”TTF”文件，在任何分辨率下都不会失真。
• 免费，风格延续
  使用FontAwesome，可以让多平台下的显示风格延续统一，而且FontAwesome是免费持续更新的，目前主要被广泛web。

---

1. FontAwesome 的工作原理

FontAwesome 图标集背后的思想非常简单，图标被视为字符（character）。在Word中许多奇怪的字符可以作为文本通过输入法输出到Word中使用，甚至可以轻易的拷贝 β 字符或者 ∑ 字符。FontAwesome 通过包含广泛的图标扩展了这一概念。你可以把它比喻成用图标指定的不能打出的Unicode字符。

2. 引入字体文件

1. 下载FontAwesome
   下载和导入FontAwesome 的TrueType文件到项目，请点击这里下载
2. 拷贝fontawesome-webfont.ttf
   下载好，解压文件，找到fonts目录，找到fontawesome-webfont.ttf并拷贝，其余文件在Android应用中用不到，可以不用考虑。
   
3. 创建fonts
   在AS中切换到project窗口，定位到src–>main。main目录下理论上包含assets目录，如果没有请创建。在assets目录下创建fonts文件夹，并把fontawesome-webfont.ttf 拷贝到fonts下（PS:不一定要放在fonts目录下，但必须放assets目录下，方便代码中调用api加载字体资源）。如下图所示：
   

3.创建FontManager核心类

至此，我们已经成功引入FontAwesome字体文件，该是使用它的时候了。在Android中要想对一个TextView指定字体集，使用到一个类：android.graphics.Typeface。Typeface类指定typeface 以及一个字体的特征。它用于指明text在绘制（以及测量）的时候该如何显示。
这里，为了避免在所有需要使用FontAwesome的TextView写重复代码，这里简单封装一个核心类FontManager，代码如下：

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);
    }

}

上面的代码，只能为每个单一的TextView设置使用FontAwesome，而现实情况下，图标是比较多的，而图标从布局角度考虑又往往是包含在ViewGroup中，因此比较好的方法是：通过封装方法，判断传入的view类型，如果不是ViewGroup容器则直接调用api设置typeface，如果是容器类型则可以遍历所有的TextView并递归调用api设置typeface，因此上面的FontManager类可以变成如下：

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,typeface);
            }
        } else if (v instanceof TextView) {
            ((TextView) v).setTypeface(typeface);
        }
    }

}

4.设置Unicode值

在AS中，进入values文件夹并创建一个新的文件：icons.xml，它将我们要显示的图标与其对应的Unicode字符关联起来。

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

比较麻烦的就是要自己在繁杂的列表FontAwesome cheatsheet中找到自己需要的图标的unicode值实在不是一个容易的事，我告诉大家一个简单的方法可以快速定位到自己需要的图标上，那就是Ctrl+F大法。

是不是比你用肉眼找方便快捷多了，哈哈O(∩_∩)O哈哈~

5.引用Unicode值

在布局的TextView里面引用这些字符串：

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

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

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

要想改变图标要显示的颜色，像设置字体颜色一样使用textcolor属性即可，喔my god如此方便…

因为FontAwesome 在运行时渲染，因此在布局编辑器是看不出具体显示效果的，而且它们是矢量图标不是栅格图标，因此这些图标显示十分明亮鲜明。