Android 使用Icon Font

Icon Font就是将一些单色图标作为字体放到字体库中，当应用运行时加载自定义字体库将其展示出来。Icon Font可以像字体一样设置颜色大小，如果字体库支持还可以设置font-weight（这个比较少见）。

Icon Font技术最早在前端中流行，对于APP来说可以减小安装包的大小，不过某些地方也增加了代码量，孰优孰劣还要自己判断。

使用

---

1.下载字体图片库
到阿里IconFont字库随便选几个图标并将它们下载到本地(购物车选中，右上角下载)。
将下载下来的ttf文件放到assets文件夹下，例如assets/iconfont.ttf

2. 字体编码
刚才下载下来的文件夹中有个html文件，打开就可以看到图片以及一串16进制的字符，类似，正是通过这一串字符才能从ttf文件中提取出对应的图标。

在strings.xml中定义字体图片名称:

<resources>
    <string name="yanzhengma"></string>
    <string name="zan"></string>
    <string name="kanguo"></string>
</resources>

3.在TextView中使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"   
    android:orientation="vertical">   
    <TextView        
        android:layout_width="wrap_content"        
        android:layout_height="wrap_content"      
        android:text="字体图标" />   

     <TextView       
         android:id="@+id/tv_font_icon_yanzhengma"    
         android:layout_width="wrap_content"        
         android:layout_height="wrap_content"        
         android:text="@string/yanzhengma"      
         android:textColor="#f3e"     
         android:textSize="20sp" />
</LinearLayout>

4.设置Typeface

TextView tvIcon = (TextView)findViewById(R.id.tv_font_icon);
tvIcon.setTypeface(Typeface.createFromAsset(getAssets(), "iconfont.ttf"));

OK，就这么简单，来看看效果：

IconFont.jpg

通用IconFont控件

---

说是通用也仅仅只是简单的封装，继承自TextView，可以当做Iconfont组件直接在xml中使用：

package com.deva.iconfont;

import android.content.Context;
import android.graphics.Typeface;
import android.widget.TextView;
/**
  *  Created by zhaoshuo on 16/5/19.
  */
public class IconFontView extends TextView{    
    public static final String FONT_PATH = "iconfont.ttf";    
    public static Typeface mTypeface;    
    public IconFontView(Context context) {        
        this(context, null); 
    } 

    public IconFontView(Context context, AttributeSet attrs) {    
        this(context, attrs, 0); 
    }   

    public IconFontView(Context context, AttributeSet attrs, int defStyleAttr) {      
        super(context, attrs, defStyleAttr);    
        init(context,attrs);   
    } 

    private void init(Context context, AttributeSet attrs){        
        if(mTypeface == null){       
            mTypeface = Typeface.createFromAsset(getContext().getAssets(), FONT_PATH);        
        }
        setTypeface(mTypeface);  
    }
}

使用IconFontView，终于不用再写setTypeface了：

<com.deva.iconfont.IconFontView 
    android:layout_width="wrap_content"    
    android:layout_height="wrap_content"    
    android:text="@string/fa_icon_linechart"  
    android:textColor="#f3e"   
    android:textSize="20sp" />

一些坑

---

字体基线问题
可能在不同系统上字体基线对其位置不一样，在对某个图标进行旋转动画时就会遇到诡异的跳动效果。Android上我遇到过这种情况，同一套字体库iOS则完全没问题，囧啊。

TextView的drawableLeft，drawableTop等属性
好吧，这么方便的设置图标方式就没办法用了，当前我是使用一个FrameLayout包裹两个TextView来实现这种效果。

字体库

---

阿里字体库
icomoon
Font-Awesome