本文为菜鸟窝作者吴威龙投稿

菜鸟窝是专业的程序猿在线学习平台，提供最系统的 Android 项目实战课程

如需转载，请联系菜鸟窝公众号（cniao5）,并注明出处。

前言

上篇文章《在 Android 中使用 SVG 矢量图》简单介绍了 SVG 图片的好处以及如何在 Android 中使用 SVG 图片。本文接着介绍下如何在 Android 中使用阿里巴巴 Iconfont 平台的图片，方便我们日常的开发。

SVG to VectorDrawable

从阿里巴巴矢量图库 Iconfont 可以下载 SVG 形式的图片，导入 AS 中就转为了 VectorDrawable 形式的图片文件。如果不了解的可以看回我上一篇文章《在 Android 中使用 SVG 矢量图》。

但是每次都需要下载 SVG 文件，再通过 AS 导入，也许算是挺麻烦的一件事情。现在推荐一个好工具，就是 SVG to VectorDrawable，顾名思义，就是一个把 SVG 文件转为 VectorDrawable 文件的工具。

只需要把 SVG 文件粘贴进去，该工具就会自动帮你转为 VectorDrawable 文件。最后你只需要在 AS 中新建个文件，然后粘贴转换后的 VectorDrawable 文件内容就去即可。当然，可能你觉得这样并不方便，那就见仁见智了。

网址：http://inloop.github.io/svg2android/

使用 Iconfont 制作“图片”字体文件的优点

更方便的使用 SVG 图片
把图标当成字符使用，大小和颜色都可以随意改。

制作步骤

step1:

从 iconfont 平台选择要使用到的图标（如图），并下载（选择下载代码）至本地；复制字体文件到项目 assets 目录；

image

step2:

打开下载下来的文件，并在目录中打开 demo_unicode.html，找到图标相对应的 HTML 实体字符码

image

step3:

打开 res/values/strings.xml，把 demo_unicode.html 各个图标的字符吗添加到 string 值；

如：

<string name="all"></string>
<string name="back"></string>
<string name="cart"></string>
<string name="category"></string>
<string name="close"></string>
<string name="comments"></string>
<string name="cry"></string>

step4:

比如使用图标 cart，
打开 activity_main.xml，添加 string 值到 TextView：

<TextView
    android:id="@+id/like"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/cart" />

对该 TextView 设置颜色、大小就等同于给图标 cart 设置颜色、大小。而且还不用考虑分辨率问题。

step5:

为 TextView 指定字体库：

import android.graphics.Typeface; 
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
    TextView textview = (TextView)findViewById(R.id.like);
    textview.setTypeface(iconfont);
}

通过以上 5 步，就可以实现目的了。但如果你还是觉得不够方便，那么看下面这个第三方库吧！

引入 Android-Iconics

以上有点麻烦：使用第三方库:Android-Iconics 吧。
原理和之前讲的一样，只是把过程封装了起来。

github

https://github.com/mikepenz/Android-Iconics

这个库的好处：

image

意思就是可以使用不同的 icons 在不同的大小，不同的颜色以及不同的分辨率条件下已依然表现出色。

What do you get

No customization limitations (size, color, contour, background, padding, positioning, ...)
One icon source (no more mdpi, hdpi, ...)
Flexibility
If it takes a Drawable, it will also work with the IconicsDrawable!
Save in APK size
All licenses included, best used with AboutLibraries

相信上面的特色大家都看的懂，我也就不翻译了

Already available fonts

Google Material Design Icons
Material Design Iconic Font
Fontawesome
Meteocons
Octicons
Community Material
Weather Icons
Typeicons
Entypo
Devicon
Foundation Icons
Ionicons

可用的字体图标风格库。

更多详细的介绍请看官方介绍哈。

如何使用？

如何使用这个第三方库呢，其实 github 上的介绍已经非常简单清楚了，大家可以根据上面的介绍一步一步的使用此库。

这里简单的记录下使用步骤：

step1:添加 gradle 依赖

compile "com.mikepenz:iconics-core:2.8.4@aar"

step2:选择字体库(添加一个喜欢的字体依赖库就可以了)

compile 'com.mikepenz:google-material-typeface:3.0.1.0.original@aar'
compile 'com.mikepenz:material-design-iconic-typeface:2.2.0.2@aar'
compile 'com.mikepenz:fontawesome-typeface:4.7.0.0@aar'
compile 'com.mikepenz:octicons-typeface:3.2.0.2@aar'
compile 'com.mikepenz:meteocons-typeface:1.1.0.2@aar'
compile 'com.mikepenz:community-material-typeface:1.9.32.1@aar'
compile 'com.mikepenz:weather-icons-typeface:2.0.10.2@aar'
compile 'com.mikepenz:typeicons-typeface:2.0.7.2@aar'
compile 'com.mikepenz:entypo-typeface:1.0.0.2@aar'
compile 'com.mikepenz:devicon-typeface:2.0.0.2@aar'
compile 'com.mikepenz:foundation-icons-typeface:3.0.0.2@aar'
compile 'com.mikepenz:ionicons-typeface:2.0.1.2@aar'

step3：onCreate 中使用 LayoutInflaterCompat（不太懂，但是得这样做）

Set the IconicsLayoutInflater as new LayoutInflaterFactory. This will enable automatic icon detection for TextViews,Buttons, and allow you to set icons on ImageView's via xml. This is compatible with libs which wrap the baseContext like Calligraphy. This does not work on FAB's please use the Context-Injection instead.（官方介绍）

@Override
protected void onCreate(Bundle savedInstanceState) {
    LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));
    //...
    super.onCreate(savedInstanceState);
    //...
}

step4：实际使用：代码方式

官方提供了很多实现方式，这里只介绍一种，其他的感兴趣可以去 github 上看。

 Drawable drawable =  new IconicsDrawable(this)
               .icon(FontAwesome.Icon.faw_android)
               .color(Color.RED)
               .sizeDp(24)

//可以随意设置颜色、大小、图标（图标库中的图标）

自定义的字体库

其实就是换字体库的意思，下面说说怎么自定义自己的字体文件。
主要的思路就是参考第三方框架写自己的自定义 Iconfont，
还是用上面例子中所下载的字体文件作为自己的自定义字体文件库。

按照 github 介绍可以分为以下几个步骤：

step1:实现 ITypeface 接口，自定义 Font 类


public class CustomFont implements ITypeface {

    private static final String TTF_FILE = "iconfont.ttf";
    private static Typeface typeface = null;
    private static HashMap<String, Character> mChars;


    @Override
    public IIcon getIcon(String key) {
        return Icon.valueOf(key);
    }

    @Override
    public HashMap<String, Character> getCharacters() {
        if (mChars == null) {
            HashMap<String, Character> aChars = new HashMap<String, Character>();
            for (Icon v : Icon.values()) {
                aChars.put(v.name(), v.character);
            }
            mChars = aChars;
        }
        return mChars;
    }

    @Override
    public String getMappingPrefix() {
        return "custom";
    }

    @Override
    public String getFontName() {
        return "CustomFont";
    }

    @Override
    public String getVersion() {
        return "1.0.0";
    }

    @Override
    public int getIconCount() {
        return mChars.size();
    }

    @Override
    public Collection<String> getIcons() {
        Collection<String> icons = new LinkedList<String>();
        for (Icon value : Icon.values()) {
            icons.add(value.name());
        }
        return icons;
    }

    @Override
    public String getAuthor() {
        return "www.blog.csdn.net/leaf_130";
    }

    @Override
    public String getUrl() {
        return "http://blog.csdn.net/leaf_130";
    }

    @Override
    public String getDescription() {
        return "The premium icon font for Ionic Framework.";
    }

    @Override
    public String getLicense() {
        return "MIT Licensed";
    }

    @Override
    public String getLicenseUrl() {
        return "http://blog.csdn.net/leaf_130";
    }

    @Override
    public Typeface getTypeface(Context context) {
        if (typeface == null) {
            try {
                typeface = Typeface.createFromAsset(context.getAssets(),   TTF_FILE);
            } catch (Exception e) {
                return null;
            }
        }
        return typeface;
    }

    public enum Icon implements IIcon {


        //这里枚举两个图标
        custom_all('\ue696'),
        custom_back('\ue697');


        char character;

        Icon(char character) {
            this.character = character;
        }

        public String getFormattedName() {
            return "{" + name() + "}";
        }

        public char getCharacter() {
            return character;
        }

        public String getName() {
            return name();
        }

        // remember the typeface so we can use it later
        private static ITypeface typeface;

        public ITypeface getTypeface() {
            if (typeface == null) {
                typeface = new CustomFont();
            }
            return typeface;
        }
    }


}

step2:自定义 Application 类（别忘了在配置文件配置）

public class MyApplication extends Application {


    @Override
    public void onCreate() {
        super.onCreate();


        //only required if you add a custom or generic font on your own
        Iconics.init(getApplicationContext());

        //register custom fonts like this (or also provide a font definition file)
        Iconics.registerFont(new CustomFont());
    }
}

step3:代码中使用

public class IconActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_icon);


        Drawable drawable =  new IconicsDrawable(this)
                .icon(CustomFont.Icon.custom_all)
                .color(Color.BLACK)
                .sizeDp(50);


        ((ImageView)this.findViewById(R.id.img)).setImageDrawable(drawable);

    }
}

到这里已经实现了自定义 Iconfont 图标的所有步骤。更多使用方式请看 Github 上作者给出的详细说明文档吧。

遇到的问题

自定义的 CustomFont，代码中使用 ok,但是 xml 中使用不太行，暂时没找到解决方法，可能是我使用出了问题，也可能是这个库本身有点小 bug.

总结

上面论述了这么多，现在应该做个总结了，不然很快就忘了什么是 SVG ,什么是 Iconfont 图标。

SVG 就是拉伸不影响像素的一种特殊的矢量图，对页面适配的支持性很强。使用阿里巴巴矢量图库 Iconfont 网站下载的图标字体文件，在 Android 中使用将大大节省开销，因为 15 个图标的字体文件才 12k 左右。而之前的开发中一张图片就上百 k，可谓大大降低了 apk 的大小。另外，使用字体文件的图标，可以随意设置大小、颜色等属性，还能保证图片的高保真度，而不会出现其他问题。

撸这个项目的一半，你就是大神 , 戳http://mp.weixin.qq.com/s/ZagocTlDfxZpC2IjUSFhHg

Android 中 Iconfont 图标的使用以及自定义

Android 中 Iconfont 图标的使用以及自定义

前言

SVG to VectorDrawable

使用 Iconfont 制作“图片”字体文件的优点

制作步骤

step1:

step2:

step3:

step4:

step5:

引入 Android-Iconics

github

这个库的好处：

What do you get

Already available fonts

如何使用？

step1:添加 gradle 依赖

step2:选择字体库(添加一个喜欢的字体依赖库就可以了)

step3：onCreate 中使用 LayoutInflaterCompat（不太懂，但是得这样做）

step4：实际使用：代码方式

自定义的字体库

step1:实现 ITypeface 接口，自定义 Font 类

step2:自定义 Application 类（别忘了在配置文件配置）

step3:代码中使用

遇到的问题

总结

推荐阅读更多精彩内容