怎么在 Android 应用中使用 FontAwesome 图标

关注微信号：javalearns?? 随时随地学Java

或扫一扫

?

?

随时随地学Java

这篇教程中，我将向你演示如何在安卓项目中使用?FontAwesome?图标集合。FontAwesome 可以节省许多时间，原因如下：

首先，你不需要担心不同手机上的屏幕分辨率问题。如果你使用png图片，你需要在包里面对每个图标至少包含四种不同的版本。不仅如此，在某些超清屏幕上，你的图标可能会出现颗粒感。这显然是要避免的。但如果使用FontAwesome，你只需包含一个”TTF”文件。

其次，你可以依赖于当今最丰富的免费图标集之一。而且因为其在web上被广泛的使用，现在用户已经习惯了FontAwesome的风格。你不必再浪费时间去寻找漂亮的丰富的可以免费商用的图标集合，我并不是说不存在这样的图标集，因为确实存在，但是非常稀少。

1.?FontAwesome 的工作原理

我们先花点时间来了解一下FontAwesome 的工作原理。FontAwesome?图标集背后的思想非常简单，图标被视为字符（character）。你可以能已经注意到一些奇怪的字符被作为文本对待，你可以轻易的拷贝?β?字符或者?∑?字符。你甚至可以在普通的文本编辑框中这样做。还可以改变它们的大小和颜色。这是因为浏览器 － 以及文本编辑框 － 把这些字符视为文本。

FontAwesome?通过包含广泛的图标扩展了这一概念。你可以把它比喻成用图标指定的不能打出的Unicode字符。

FontAwesome

看一眼?FontAwesome’s cheatsheet?就知道我在说什么了。你选择列表中的一个图标，记下它的Unicode的字符，在TextView中使用它告诉安卓使用FontAwesome字体来渲染。

2.?导入字体文件

让我们来看一个例子。下载和导入FontAwesome 的TrueType 文件到项目。你可以从?GitHub上下载FontAwesome 的assets。

当你下载了FontAwesome之后，你会发现里面包含了一些文件和文件夹。大部分都是对web项目有用的。我们只对位于fonts目录的?fontawesome-webfont.ttf感兴趣。

在你的安卓项目中，导航到?app > src > main。?main?目录应该包含了一个叫?assets的文件夹。如果没有就创建一个。在assets?文件夹中创建另一个fonts文件夹，并把fontawesome-webfont.ttf?添加到这个文件夹。

主义?fonts?文件夹并不是必须的。你可以直接把FontAwesome 的字体文件放在?assets?目录，但是把相同类型的文件放在专门的目录里面比较方便。只要FontAwesome 字体在assets?或者子目录之下就行。

3.?创建一个帮助类

现在你已经成功的把FontAwesome 字体文件包含在了自己的安卓项目里，是时候使用它了。我们会创建一个帮助类来让事情变得简单点。这个类要使用到android.graphics.Typeface。Typeface类指定typeface 以及一个字体的特征。它用于指明text在绘制（以及测量）的时候该如何显示。

创建一个新的名叫FontManager的java类：

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

如果你想在项目中使用其他的字体，把字体放在helper 类里面就可以了。类似于：

yourTextView.setTypeface(FontManager.getTypeface(FontManager.YOURFONT));

我们需要做的就这么多，但是我们可以做的更好。使用上面的方法的话，我们需要为每个想当成图标来使用的TextView创建一个变量。但作为一个程序员，我们都很懒，对吧？

图标一般都是包含在一个ViewGroup，比如一个RelativeLayout或者LinearLayout中。我们可以写一个方法，爬遍指定xml parent 并且递归的覆盖每个TextView的字体。

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

假设你的布局文件是这样的：

<LinearLayout????xmlns:android="http://schemas.android.com/apk/res/android"????xmlns:tools="http://schemas.android.com/tools"????android:id="@+id/icons_container"????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"????tools:context=".MainActivity">????<TextView????????android:layout_width="match_parent"????????android:layout_height="wrap_content"????????android:gravity="center"????????android:layout_weight="1"?/>????<TextView????????android:layout_width="match_parent"????????android:layout_height="wrap_content"????????android:gravity="center"????????android:layout_weight="1"?/>????<TextView????????android:layout_width="match_parent"????????android:layout_height="wrap_content"????????android:gravity="center"????????android:layout_weight="1"?/></LinearLayout>

要把这三个TextView标记为图标，我们重写onCreate方法，并添加如下代码片段：

Typeface?iconFont?=?FontManager.getTypeface(getApplicationContext(),?FontManager.FONTAWESOME);FontManager.markAsIconContainer(findViewById(R.id.icons_container),?iconFont);

4.?使用你想要的图标

现在轮到有意思的部分了。访问?FontAwesome的GitHub页面?并浏览所给的图标。选择三个你喜欢的。我准备选择三个chart图标，分别是?area chart icon,?pie chart icon, 以及?line chart icon。

在你的项目中，进入?values?文件夹并创建一个新的文件：icons.xml。这个文件将被作为字典使用，它将把Unicode 字符和相应的图标用可读的名字匹配起来。这意味着我们需要为每个图标创建一个入口。

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

你可以在FontAwesome cheatsheet或者图标的?详情页面?找到你感兴趣图标的代码。

下一步就是在布局的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"?/>

如果你打开Android Studio的布局编辑器，你会看到它无法渲染这些图标。这是不正常的。编译并启动应用，你又会发现图标是正常渲染了的。

看起啦很小是吧？改变图标的大小很简单，你只需改变textSize属性就是了。改变图标的颜色也一样简单，编辑textColor属性就是了。

<TextView????android:layout_width="match_parent"????android:layout_height="wrap_content"????android:gravity="center"????android:layout_weight="1"????android:textSize="45sp"????android:textColor="#9b59b6"????android:text="@string/fa_icon_areachart"?/>

就如你看见的，这些图标明亮鲜明。这是因为FontAwesome 在运行时渲染。它们是矢量图标?而不是栅格图标。

总结

在这篇文章中，我演示了如何在一个安卓项目中使用FontAwesome?图标集。FontAwesome 广为所知且免费。即使在超清屏幕上，显示结果也很明快。改变颜色和大小都跟改变属性一样简单。

关注微信号：javalearns?? 随时随地学Java

或扫一扫

?

?

随时随地学Java