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. 引入字体文件
下载FontAwesome 下载和导入FontAwesome 的TrueType文件到项目,请点击这里下载拷贝fontawesome-webfont.ttf 下载好,解压文件,找到fonts目录,找到fontawesome-webfont.ttf并拷贝,其余文件在Android应用中用不到,可以不用考虑。 创建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字符关联起来。
<resources> <string name="fa_icon_areachart"></string> <string name="fa_icon_piechart"></string> <string name="fa_icon_linechart"></string> </resources>比较麻烦的就是要自己在繁杂的列表FontAwesome cheatsheet中找到自己需要的图标的unicode值实在不是一个容易的事,我告诉大家一个简单的方法可以快速定位到自己需要的图标上,那就是Ctrl+F大法。 是不是比你用肉眼找方便快捷多了,哈哈O(∩_∩)O哈哈~
5.引用Unicode值
在布局的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" />要想改变图标要显示的颜色,像设置字体颜色一样使用textcolor属性即可,喔my god如此方便…
因为FontAwesome 在运行时渲染,因此在布局编辑器是看不出具体显示效果的,而且它们是矢量图标不是栅格图标,因此这些图标显示十分明亮鲜明。