Android 中使用 IconFont

在上篇 react-native-vector-icons的集成心得中简单了介绍了什么是 IconFont 以及如何在React Native 中使用，这里再开一篇来具体说明什么是 IconFont 并且总结一下在 Android 开发中如何使用。

什么是 IconFont

IconFont 其实就是将若干个 SVG 矢量图的做成了字体文件 ( .ttf ) ，供开发者使用。
矢量图不会像位图那样因为尺寸变化而让图片质量下降，它在不同分辨率的表现都一样清晰。
因此， IconFont 有着下面的优点：

可以轻松解决图标复用和适配的问题
图标以字体文件存在于项目中，减少apk大小
同一套图标资源可以在不同平台使用 ( Android ，iOS，Web )

相应的，IconFont 也有着下面的缺点：

需要自定义 SVG 图片，制作成本相对较高
不能代替如背景图、点9图等资源
仅支持单色变化

总体来说，利是大于弊的。

如何在项目中使用 IconFont

首先还是要把 .ttf 文件复制到 app\src\main\assets\fonts 里面：

这里写图片描述

这里我还是用了阿里巴巴矢量图标库提供的字体文件，除了在官方查看文件里面的具体图标，可以使用 FontLab studio 来看里面具体有什么图片的：

这里写图片描述

当我们知道了 .ttf 里面有那些图片和对应的字符编码后，接下来就是简单不过了：

 final TextView textView = (TextView) findViewById(R.id.iconFont);
        textView.setTextColor(Color.RED);
        Typeface typeface = Typeface.createFromAsset(getAssets(),
                "fonts/iconfont.ttf");
        textView.setTypeface(typeface);
        textView.setText("\uE698");
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setTextColor(Color.BLUE);
            }
        });

运行就可以看到下面的效果了：

这里写图片描述

如果我们需要在 string.xml 中添加这个16进制的字符串，可以按照下面的格式进行添加：

<string name="cart">&#xe698;</string>

就可以直接使用了，这里就不多说了。不过新的问题来了，那就是 iconfont 里面的图标这么多，如果都要自己手动去加入到 string.xml ，那也太麻烦了。
在上篇的 react-native-vector-icons的集成心得中我介绍了两个工具：fonttools 和 react-native-iconfont-mapper ，通过它们，我们一样可以轻松得到需要的字符串。
整个 react-native-iconfont-mapper 项目中其实就是一个 iconfont-mapper.py 文件，打开一看，里面核心代码如下：

try:
        font = TTFont(fontFile)
        glyphMap = font["cmap"].getcmap(3,1).cmap
        tmp = ""
        for k in glyphMap:
            tmp += '"%s":"%s",' % (glyphMap[k],k)

        f=file(output,"w+")
        f.write(tmpl % tmp)
        f.close()   
    except Exception, ex:
        print ex

虽然没有这么学过 python ，不过这里实在太好懂了。我直接修改一下：

try:
        font = TTFont(fontFile)
        glyphMap = font["cmap"].getcmap(3,1).cmap
        tmp = ""
        for k in glyphMap:
            tmp += '\n<string name="%s">%s;</string>' % (glyphMap[k],hex(k).replace('0x','&#x'))

        f=file(output,"w+")
        f.write(tmpl % tmp)
        f.close()   
    except Exception, ex:
        print ex

由于不怎么学过 python ，上面的修改全靠百度了一些 python 的 API，不过执行

python iconfont-mapper.py iconfont.ttf iconfont.js

可以顺利得到我需要的结果：

这里写图片描述