How to Use FontAwesome in an Android App(把 icons 变得和 text 一样)

时间:2023-02-05 23:38:11

原文链接 http://code.tutsplus.com/tutorials/how-to-use-fontawesome-in-an-android-app--cms-24167


    FontAwesome,即象形字,这一章主要讲如何使象形字能够像一般的文字一样在 TextView 中使用 。使用象形字有以下优点:

    首先,不用担心不同设备上的不同屏幕密度 。如果在 app 中用到 PNG 图片,那么对于同一 PNG 图片,至少要有四种不同大小的图片,以适配不同尺寸的屏幕 。而且在超高分辨率的屏幕上,有些 icon 还是没法清楚的显示出来,而使用 FontAwesome 就可以解决这种问题 。

    其次,FontAwesome 中可用的图标种类非常多,而且都是免费的,它们基本可以满足一般的开发需求 。


1. FontAwesome 的工作原理

    首先我们来简单的描述一下 FontAwesome 的基本实现原理:其实 FontAwesome 包把 icons 当成字符,即它把一些 icons 当成字符来对待 。例如,我们可以复制粘贴一些特殊的字符如 β 和  ,而且这两字符也可以在简单的文字编辑器中使用,也可以改变它们的 size 和 color,因为 browser 和 text editor 把它们当成 text 来看待 。

    FontAwesome 正是基于上边的原理来实现的:把 icons 当成 text 来处理 。在 FontAwesome's cheatsheet 中可以看到,目前它定义了哪些图标,可以当成 text 使用,在 TextView 中,你就可以像使用 text 一样直接把这些 icons 当成真实的 text 来使用 。


2. 导入 Font 文件

    下面我们来看一个例子,首先你要把 FontAwesome 的 TrueType 文件导入项目中,可以从 GitHub 上下载 FontAwesome 。下载下来的是一个压缩包,里面有很多文件和文件夹,它们大多数是用于 web projects 的,我们只需要其中的 fontawesome-webfont.ttf 文件,这个文件在 fonts 文件夹里面 。注意:fonts 目录并不是必需的,可以直接把 FontAwesome 的 font 文件直接放到项目的 assets 目录里面 。


3. 创建 Helper 类

    在前面的步骤中,我们已经把 FontAwesome 的相关文件放到我们的 Android project 中了,现在我们就可以使用它了 。首先要创建一个 Helper 类,我们要利用这个类来引用我们刚刚导入的资源文件,我们把类名定为 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);     }      }

    其中 getTypeface 方法返回一个 Typeface 对象,Typeface 代表 font 的样式,该对象用于告诉系统当对 text 进行绘制和渲染时,使用怎样的样式 。同样的,如果想使用其它的 typefaces,只需要做如下形式的调用即可

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

    要想使用上面的这个方法,我们还要为每个 TextView 定义都调用一次 setTypeface 方法 。这样是不是显得有点麻烦呢?其实每个 TextView 通常都属于特定的 ViewGroup,如被放到 RelativeLayout 中等,所以我们可以写个递归的方法,让它从 XML 文件的根节点开始递归遍历它的所有子结点,凡是子结点是 TextView 类型,就调用  setTypeface 方法,这样我们就调用一个方法就可以为所有 TextView 设置好 typeface 了 。所以我们可以这样实现 FontManager

public class FontManager {       // ...           public static void markAsIconContainer(View v, Typeface typeface) {         if(v instanceof ViewGroup) {             ViewGroup vg = (ViewGroup) v;             for(inti = 0; i < vg.getChildCount(); i++) {                 View child = vg.getChildAt(i);                 markAsIconContainer(child);             }         } elseif(v instanceofTextView) {             ((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 把 icons 当成 text 设置进来,在 onCreate 方法中,我们加入以下代码就可以了

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

4. 使用指定的 icons

    现在我们可以到 FontAwesome's GitHub page 上查看有什么 icons 可用了,我选择  area chart icon, the pie chart icon, and the line chart icon 来作为例子 。现在我们打开 Android 项目的 values 文件夹,然后创建 icons.xml 文件 。然后把下面这段代码粘贴到 icons.xml 文件里面

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

    我想大家应该能看懂这个文件是干嘛用的吧:为我们要用到的 Unicode 字符指定名字,如 &$xf1fe; 字符,命名为 fa_icon_areachart 。在 FontAwesome's GitHub page 里面,有每个图标对应的 Unicode 编码 。

    接下来,就可以在 TextView 中,像引用一般的字符串一样,引用这些 Unicode 字符了,如

<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 的 layout editor 无法对这些 Unicode 字符进行 render,所以要启动 app 才能在真机或模拟器上看到效果哦 。这个例子的效果图如下

How to Use FontAwesome in an Android App(把 icons 变得和 text 一样)

    默认的这些图标是不是有点小,而且都是灰色的?没关系,现在我们可以像处理一般的 text 一样,对它们的样式进行设置,如

<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"/>

    修饰之后的效果如下

How to Use FontAwesome in an Android App(把 icons 变得和 text 一样)

    是不是很酷哈,因为它们已经被系统当成 text 来处理了,所以可以像 text 一样指定它们的各种属性,而且在任何分辨率的屏幕上,显示的效果都一样哦 。


    下载 Demo 源码