图片资源是我们app开发中经常使用的，同时图标我们也经常使用，比如常见的扫码icon，消息icon这都是字体图标。
图片大时---->app 变大
分辨率变化频繁或者大时---->图片很难高保帧
属于字体 基于svg 伸缩不失真
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也可以添加。
在我们的自定义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());
}
}
我们的项目中(如下图先忽略第三个)
<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 我们可以看出 这里他定义了FontAwesomeModule类，实现IconFontDescriptor接口
2 接口中他首先返回 xxx.ttf字符串这里我们先不管。继续看 还返回了FontAwesomeIcons.values()
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中提供的图标
首先我们进入官网
点击图标库
这里搜索我们想要的图标就行（比如搜索 coffee 点击进入）
把这个fa-coffee 放到xml的text属性中运行就可以看到 咖啡图标了。
如上 三.2 的图片中还记的我们 .with(new FontModel()); 这段代码吗？这其实是对我们自定义的字体图标库进行初始化。
我们都知道阿里有个矢量图标库（图标贼丰富）： 地址连接
我们如果想要使用这上面的图标，这时我们就要自定义了。
下载文件解压如下：
两个重要的文件：
1 ttf文件
2 index html文件
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 {
//  支付宝
//  扫一扫
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就行了。
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项目的示例。