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中定义字体图片名称:


    
    
    

3.在TextView中使用


   
       

     

4.设置Typeface

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

OK,就这么简单,来看看效果:

Android 使用Icon Font_第1张图片
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了:


一些坑


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

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

字体库


阿里字体库
icomoon
Font-Awesome

你可能感兴趣的:(Android 使用Icon Font)