iconify 安卓字体图标的使用详解

图片资源是我们app开发中经常使用的，同时图标我们也经常使用，比如常见的扫码icon，消息icon这都是字体图标。

一、为什么要使用字体图标?

普通图片：

图片大时---->app 变大
分辨率变化频繁或者大时---->图片很难高保帧

字体图标：

属于字体 基于svg 伸缩不失真

二、安卓字体图标库

github项目地址

三 、具体使用

1 、gradle依赖添加

github地址中提供了好多库

dependencies {
    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)
}

我们在项目中添加我们需要的即可 通常fontawesome库ionicons 就足够了。

  //字体图标库
    implementation 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2'
    implementation 'com.joanzapata.iconify:android-iconify-ionicons:2.2.2'

ps：我们在file 、 project structure 、dependencies 中搜索jar也可以添加。

2、初始化工作

在我们的自定义application下进行初始化(如果你在gradle中添加了所有的库，初始化如下)

public class MyApplication extends 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());
    }
}

我们的项目中(如下图先忽略第三个)

3、 使用字体图标

<com.joanzapata.iconify.widget.IconTextView
    android:text="I {fa-heart-o} to {fa-code} on {fa-android}"
    android:shadowColor="#22000000"
    android:shadowDx="3"
    android:shadowDy="3"
    android:shadowRadius="1"
    android:textSize="40sp"
    android:textColor="#FF..."
    ... />

1 xml中直接使用即可（十分简单就可以运行试试了）
2 字体图标我们就把他当字体使用就行，只是这个字体是个图片。
3 特别注意 text这个属性，我们要使用{xxx}的形式 其中xxx为字体图标库中定义的图标名。

四、过程分析

如上案例中xml中text属相为啥要写成 android:text="{fa-heart-o} " 这种形式呢？其实这里使用了Font Awesome这个依赖库中的字体图标。

implementation 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2'

//这个他们封装好的字体图标库

1 、我们翻翻我们初始化的地方

2、鼠标右键进入：

1 我们可以看出 这里他定义了FontAwesomeModule类，实现IconFontDescriptor接口
2 接口中他首先返回 xxx.ttf字符串这里我们先不管。继续看 还返回了FontAwesomeIcons.values()

3、 鼠标右键进入FontAwesomeIcons

package com.joanzapata.iconify.fonts;

import com.joanzapata.iconify.Icon;

public enum FontAwesomeIcons implements Icon {
    fa_glass('\uf000'),
    fa_music('\uf001'),
    fa_search('\uf002'),
    fa_envelope_o('\uf003'),
    fa_heart('\uf004'),
    fa_star('\uf005'),
    // 局部  下面都是fa_xxx("xxx")此处为了方便就不贴完了。

    char character;

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

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

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

1 如上代码 源码中定义了枚举类 实现接口Icon
2 枚举中定义了个char 类型character 字段 并通过构造进行初始化
3 返回函数中进行了字符串处理 然后返回字符
4 源码中的
fa_glass(’\uf000’),
fa_music(’\uf001’),
fa_search(’\uf002’),
fa_envelope_o(’\uf003’),
fa_heart(’\uf004’),
fa_star(’\uf005’),
等等，就是我们在xml中使用的名字。这些都是Font Awesome中提供的图标

4 更多Font Awesome图标使用

Font Awesome 官网

首先我们进入官网

点击图标库

这里搜索我们想要的图标就行（比如搜索 coffee 点击进入）

把这个fa-coffee 放到xml的text属性中运行就可以看到 咖啡图标了。

五、 自定义字体图标库

如上 三.2 的图片中还记的我们 .with(new FontModel()); 这段代码吗？这其实是对我们自定义的字体图标库进行初始化。

我们都知道阿里有个矢量图标库（图标贼丰富）： 地址连接
我们如果想要使用这上面的图标，这时我们就要自定义了。

1、首先搜索几个图标加入购物车

2 、如下图我添加了两个图标（添加后进行下载）

下载文件解压如下：

两个重要的文件：
1 ttf文件
2 index html文件

3 拷贝 ttf文件到我们的asset文件夹下

4 开始仿照（参考上文FontAwesomeModule分析过程）FontAwesomeModule 定义我们自己的字体图标

4.1定义类

package com.example.administrator.modelmall.icon;

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

/**
 * Create by SunnyDay on 2019/03/17
 *
 * 自定义字体图标模块
 *
 * 使用其他的第三方字体图标
 */
public class FontModel implements IconFontDescriptor {
    /**
     * 返回下载的ttf文件
     * */
    @Override
    public String ttfFileName() {
        return "iconfont.ttf";
    }

    /**
     * 返回个icon类型数组
     *
     * */
    @Override
    public Icon[] characters() {
        return  IconModel.values();
    }
}

1 如上我们定义类实现IconFontDescriptor 接口
2 ttfFileName（）中我们返回我们拷贝到assets下的ttf完整文件名
3 characters() 方法中我们返回自定义枚举值

4.2自定义枚举类

package com.example.administrator.modelmall.icon;

import com.joanzapata.iconify.Icon;

/**
 * Create by SunnyDay on 2019/03/17
 * <p>
 * 实现 Icon 接口
 */
public enum IconModel implements Icon {
    // &#xe6c3  支付宝
    // &#xe502  扫一扫
    icon_scan('\ue502'),
    icon_ali_pay('\ue6c3');

    private char character;
    IconModel(char character) {
        this.character = character;
    }

    /**
     * 参考 font
     */
    @Override
    public String key() {
        return name().replace('_', '-');
    }

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

如上写法和FontAwesome 十分类似 也是实现接口，定义个字段，两个方法的返回值我们也可以直接摘抄。

重点：枚举实例的编写

还记得我们上文中的index_demo.html 文件吗？ 打开

枚举类中我们随便取两个实例名：吧相应的编码拷贝来作为参数，这里需要把&#x 变为\ue就行了。

5 使用（十分简单xml中直接{类名}就ojbk了）

ps：别忘了在application注册下我们自定义的字体图标

简单使用：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/orange">

        <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <com.joanzapata.iconify.widget.IconTextView
                android:gravity="center"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="left"
                android:layout_weight="1"
                android:paddingLeft="10dp"
                android:text="{icon-scan}"
                android:textColor="@color/white"
                android:textSize="25sp"
                tools:ignore="HardcodedText" />

            <android.support.v7.widget.AppCompatEditText
                android:gravity="center"
                android:hint="search here"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="5"
                tools:ignore="HardcodedText" />

            <com.joanzapata.iconify.widget.IconTextView
                android:gravity="center"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="right"
                android:layout_weight="1"
                android:paddingRight="10dp"
                android:text="{fa-comment-o}"
                android:textColor="@color/white"
                android:textSize="25sp"
                tools:ignore="HardcodedText" />

        </android.support.v7.widget.LinearLayoutCompat>
    </android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>

如上xml代码 我们一个使用了FontAwesomeModule的，字体图标库提供好的，一个是使用我们自定义的。

效果图：

六 、小结

本文就简单的讲解下具体使用IconTextView加载字体图标的具体使用，及其自定义过程详解，IconDrawable的使用参考github项目的示例。

ps：新版安卓studio使用字体图标有坑

The end