iconfont是什么
iconfont翻譯過來就是矢量字體圖標(biāo)三娩，通過字體文件取代圖片來展示圖標(biāo)段审，特殊字體等元素的方法犹菇，并且德迹，該技術(shù)使用也比較普遍了，可以應(yīng)用在web揭芍、Android胳搞、iOS中，比如阿里媽媽將iconfont整合并公開了很多字體圖標(biāo)庫(kù)，可以直接拿來使用肌毅，當(dāng)然如果要自己制作iconfont需要先制作svg圖片然后轉(zhuǎn)為字體筷转，或者有相應(yīng)的網(wǎng)站直接生成均可。由于近期在Android中使用到悬而，所以記錄之呜舒，以下只總結(jié)在Android中應(yīng)用遇到的問題。
Image By Dustin Wallace
使用iconfont的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
- 體積比圖片小很多
- 矢量笨奠，所以拉伸不會(huì)變形袭蝗；顏色大小可以更換，所以后期更易維護(hù)（Android中可能提供很多套不同尺寸的圖片般婆，iconfont只需要一套即可）
- 風(fēng)格統(tǒng)一到腥，使用方便
- 可以添加一些視覺效果如：陰影、旋轉(zhuǎn)腺兴、透明度
缺點(diǎn)
- 制作iconfont門檻稍高左电，首先需要提供svg資源，通過工具轉(zhuǎn)換為對(duì)應(yīng)的字庫(kù)文件
- 只能是純色页响，如果圖標(biāo)是顏色很多的就不適合了
- 在Android中部分應(yīng)用場(chǎng)景受限（如TextView的drawableLeft篓足， ImageView的placeholder等）
在Android中使用
step1：將字體庫(kù)iconfont.ttf放到assets目錄下（我放到了arrets/iconfont/iconfont.ttf），ttf字體庫(kù)可以在相應(yīng)的字體庫(kù)多選打包
step2：封裝IconFontTextView闰蚕，代碼如下
public class IconFontTextView extends TextView {
public IconFontTextView(Context context) {
super(context);
initIconFontTypeFace(context);
}
public IconFontTextView(Context context, AttributeSet attrs) {
super(context, attrs);
initIconFontTypeFace(context);
}
private void initIconFontTypeFace(Context context) {
Typeface iconfont = null;
try {
iconfont = Typeface.createFromAsset(context.getAssets(), "iconfont/iconfont.ttf");
setTypeface(iconfont);
} catch (Exception e) {
e.printStackTrace();
}
}
}
step3：找到需要替換的圖標(biāo)及iconfont對(duì)應(yīng)的圖標(biāo)的unicode栈拖，例如替換一個(gè)禮包的圖標(biāo)，需要知道我要替換的圖標(biāo)大忻欢浮（大小可以自己指定涩哟，一般都是UE指定），顏色盼玄，以及對(duì)應(yīng)的字體的unicode贴彼。
iconfont demo
在strings.xml中將值定義，將對(duì)應(yīng)的圖標(biāo)的unicode填入string.xml中埃儿。
<string name="iconfont_gift"></string>
step4：最后在代碼中使用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@android:color/white">
<com.loulijun.text.IconFontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="160sp"
android:textColor="#FF0000"
android:text="@string/iconfont_gift"/>
</LinearLayout>
得到的效果如下：
MacDown Screenshot
