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控件
说是通用也仅仅只是简单的封装,继承自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来实现这种效果。