Android使用IconFont

最新推荐文章于 2025-09-08 16:26:47 发布

原创最新推荐文章于 2025-09-08 16:26:47 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

Android开发随笔专栏收录该内容

40 篇文章

订阅专栏

本文介绍了Android中使用IconFont的方法，通过将图标作为字体文件集成，减少apk大小，支持自由调整大小和颜色。文章详细阐述了IconFont的优点、缺点，并提供了详细的使用步骤，包括字体文件的引入、自定义TextView的创建以及Unicode码的使用。同时，还介绍了如何从阿里IconFont库中获取和使用图标。

IconFont介绍

IconFont实际是把图片做在字体文件(.ttf)中.
ttf文件中每个图片对应的一个unicode码.
TextView 设置文字的时候,使用对应的unicode码就能显示出图片.

打开iconfont.ttf, 可以看到里面全是图片

Snip20161215_15.png

假如在iconfont.ttf里面. unicode码""对应的是"visa"这个图片,
那么android:text="文字和图片混排" 显示效果如下

Snip20161215_17.png

是不是很帅~
我们目前项目中都在使用IconFont. 他有很多优点:

优点

apk文件变小了.
(以demo中的iconfont.ttf为例)
字体文件才139KB,里面有670+个字符.
要是放普通图片,那估计好几M,甚至十几M
IconFont可以随意设置大小,变大后不会发虚.
可以随意设置颜色
方便批量切换图标,只要更新iconfont.ttf文件就行了.
很容易实现图文混排. 因为都是Icon也被看做为文字.

缺点

图片只能显示纯色的

使用方法

下面以IconFontDemo为例,介绍一下iconfont的使用方法.
demo效果如下

iconfont_2.png

1.首先把字体文件拷贝到项目中

Snip20161215_13.png

2.自定义TextView,让他可以加载iconfont.ttf

public class IconFontTextView extends TextView {

    ***
    public IconFontTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    private void init(Context context) {
        //加载字体文件
        Typeface typeface = IconFontTypeFace.getTypeface(context);
        this.setTypeface(typeface);
        //去掉padding,这样iconfont和普通字体容易对齐
        setIncludeFontPadding(false);
    }


public static class IconFontTypeFace {

        //用static,整个app共用整个typeface就够了
        private static Typeface ttfTypeface = null;

        public static synchronized Typeface getTypeface(Context context) {
            if (ttfTypeface == null) {
                try {
                    ttfTypeface = Typeface.createFromAsset(context.getAssets(), "fonts/iconfont.ttf");
                } catch (Exception e) {

                }
            }
            return ttfTypeface;
        }

        public static synchronized void clearTypeface() {
            ttfTypeface = null;
        }
    }
}

3. 像正常使用TextView一样使用iconfont.

要显示iconfont中图片, 需要把text设置为图片对应的unicode码.
比如""对应的是一个图片,我们可以这样使用:

 <com.helen.iconfont.widget.IconFontTextView
        android:id="@+id/itv_combine_txt_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"    
        android:text="文字和图片混排"
        android:textColor="@color/csl_black_blue"
        android:textSize="25dp" />   
<com.helen.iconfont.widget.IconFontTextView
        android:id="@+id/itv_only_icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:textColor="@android:color/holo_green_dark"
        android:textSize="25dp" />

代码中也可以

 //String.xml中设置
 <string name="iconfont_mastercard"></string>  

 //代码中使用
 tvTest.setText(R.string.iconfont_mastercard);

链接

IconFontDemo中字体unicode对照表

拓展-阿里的iconfont库中使用

阿里iconfont库地址: http://www.iconfont.cn/plus

1.选择图标文件,加入购物车

先选中自己想要的图片, 挨个加入购物车

iconfont_download.png

2.购物车中文件下载

全部选好后,可以在购物车中下载文件.

Snip20161215_19.png

3.下载的文件中可以看到字体文件(iconfont.ttf) 和对应的编码表

Snip20161215_14.png

4. demo_unicode.html 中可以看到字符和unicode字符的对应表.

这里  对应的就是X这个图片

iconfont_unicode.png

5. 有了unicode字符表和iconfont.ttf文件,就可以妥妥的使用了

作者：菜刀文
链接：http://www.jianshu.com/p/09e3598219ea
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。