Adnroid Iconfont/Font Awesome矢量图

Iconfont

1、写在前面的话：

大家一般在使用图片资源的时候，会放在mipmap/drawable文件夹种。这样呢，为了适配大部分手机，我们要分别放几套图进去，造成我们开发包的体积会变大。同时呢，发现有一些UI工程师在设计图片的时候，会去阿里矢量图上找一些资源。这时候，如果是网上有的资源，那我们就不用UI工程师去做一遍了，我们自己来搞定。嗯嗯，下边来看看怎么实现吧。

2、效果图来了：

效果图

3、具体实现：

这里我们使用github上的一个开源库android-iconify

3.1、添加依赖：

这里在使用中大家可以选择一些来添加，视情况而定

    compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2' // (v4.5)
    compile 'com.joanzapata.iconify:android-iconify-entypo:2.2.2' // (v3,2015)
    compile 'com.joanzapata.iconify:android-iconify-typicons:2.2.2' // (v2.0.7)
    compile 'com.joanzapata.iconify:android-iconify-material:2.2.2' // (v2.0.0)
    compile 'com.joanzapata.iconify:android-iconify-material-community:2.2.2' // (v1.4.57)
    compile 'com.joanzapata.iconify:android-iconify-meteocons:2.2.2' // (latest)
    compile 'com.joanzapata.iconify:android-iconify-weathericons:2.2.2' // (v2.0)
    compile 'com.joanzapata.iconify:android-iconify-simplelineicons:2.2.2' // (v1.0.0)
    compile 'com.joanzapata.iconify:android-iconify-ionicons:2.2.2' // (v2.0.1)

3.2、application初始化：

    @Override
    public void onCreate() {
        super.onCreate();
        Iconify
                .with(new FontAwesomeModule())
                .with(new EntypoModule())
                .with(new TypiconsModule())
                .with(new MaterialModule())
                .with(new MaterialCommunityModule())
                .with(new MeteoconsModule())
                .with(new WeathericonsModule())
                .with(new SimpleLineIconsModule())
                .with(new IoniconsModule())
                .with(new TestFontModule());//自定义字体图标
    }

3.3、xml：

    <com.joanzapata.iconify.widget.IconTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome {fa-smile-o} {fa-hand-peace-o} !"
        android:textColor="#2A9BDA"
        android:textSize="30sp" />

    <com.joanzapata.iconify.widget.IconTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" {fa-hand-rock-o} " />

按照上述步骤就能实现了一个图片的显示，至于“{faxxxx}”是哪里来的，这里我们需要去Font Awesom网站
然后我们打开一个图标，就会发现里边有类似fa-XX，然后复制到xml文件中就可以了。

3.4、使用Iconfont图标：

购物车

我们要先把图标放进购物车，然后下载代码，然后会看到一个如下的文件

download

然后我们把里边的iconfont.ttf放在main下的assets文件夹下.
然后创建一个枚举类TestIcons,代码如下：

package com.li.xiaomi.testfontapp.font;

import com.joanzapata.iconify.Icon;

/**
 * 作者：dell or Xiaomi Li
 * 时间： 2018/3/9
 * 内容：自定义字体图片库
 * 最后修改：
 */

public enum TestIcons implements Icon {
    icon_setting('\ue61b'),
    icon_xiangjiaosuliao('\ue643'),
    icon_indemnity('\ue687'),
    icon_return('\ue688'),
    icon_brain('\ue79f');

    private char character;

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

    @Override
    public String key() {
        return name().replace('_', '-');
    }

    @Override
    public char character() {
        return character;
    }
}

然后创建一个TestFontModule.class

package com.li.xiaomi.testfontapp.font;

import com.joanzapata.iconify.Icon;
import com.joanzapata.iconify.IconFontDescriptor;

/**
 * 作者：dell or Xiaomi Li
 * 时间： 2018/3/9
 * 内容：
 * 最后修改：
 */

public class TestFontModule implements IconFontDescriptor {

    @Override
    public String ttfFileName() {
      //填写ttf的文件名称
        return "iconfont.ttf";
    }

    @Override
    public Icon[] characters() {
        return TestIcons.values();
    }
}

我们先看TestIcons类，里边的枚举类型，是在demo_unicode.html文件中查看的

demo_unicode.html[图片上传中...(4.png-afe0cf-1520585958400-0)]
demo_unicode.html

我们把“&#xe61b”这个代码放进TestIcons类中，并且吧“&#x”用“\u”替换。同时，在Application中添加TestFontModule 的初始化方法。

3.5、然后我们看完成的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.li.xiaomi.testfontapp.ui.MainActivity">

    <com.joanzapata.iconify.widget.IconButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="{icon-setting}" />

    <com.joanzapata.iconify.widget.IconTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="{icon-xiangjiaosuliao}"
        android:textSize="50dp" />

    <com.joanzapata.iconify.widget.IconTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="{icon-indemnity}"
        android:textSize="50dp" />

    <com.joanzapata.iconify.widget.IconTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome {fa-smile-o} {fa-hand-peace-o} !"
        android:textColor="#2A9BDA"
        android:textSize="30sp" />

    <com.joanzapata.iconify.widget.IconTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="{fa-thumbs-up}" />

</LinearLayout>

4、结束语：

到这里就结束了，Demo地址