Android Studio使用IconFont阿里矢量图标库
什么是矢量图
矢量图 svg 是 W3C（World Wide Web ConSortium 国际互联网标准组织）在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。矢量图像用点和线来描述物体，所以文件会比较小，同时也能提供高清晰的画面。用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。
只要跟着本文章的步骤保证你能很快的集成到项目中使用
优缺点
-
文件小，图像中保存的是线条和图块的信息，所以矢量图形文件与分辨率和图像大小无关，只与图像的复杂程度有关，图像文件所占的存储空间较小。
-
图像可以无级缩放，对图形进行缩放，旋转或变形操作时，图形不会产生锯齿效果。
-
矢量图缩放*且不会失真，完全适配于任何分辨率的屏幕。
-
最大的缺点是难以表现色彩层次丰富的逼真图像效果。
-
跨平台，因为矢量图是纯文本格式来描述的，所以不受平台的限制。
6.在xml中无法实时显示图片。
为什么要用IconFont矢量图标
开发app时候为了适配不同的手机屏幕，需要切很多套图，然后我们很繁琐的给图标命名，然之后放入不同的drawable文件夹，要做很多得无用功，而现在阿里巴巴给我们提供了矢量图标库，给我节省了大量的麻烦而又无用的工作，我们不再需要往res下的资源文件夹放各种图标
先看一下某网迭代了五年项目的Analyze APK详情，res资源下的图片占据了二十多MB,这些图片图标都是会用到的，所以都会打包到APK中，无疑增大了APK的大小。
Analyze APK
Android 使用阿里巴巴IconFont图标
1. 第一步：打开阿里巴巴IconFont官网 ,登陆后的首页（不用解释怎么登陆的了吧）。
IconFont首页
2. 第二步：点击第一步 三八节项图标后，然后选择你想要的图标后点击加入购物车。
选择需要的图标加入购物车
3. 第三步：在第二步中选择想要的图标加入购物车后点击右上角的购物车图后，点击添加至项目，如果没有项目先创建一个项目。
添加到项目
4. 第四步：点击第三步中的添加至项目按钮后，会跳到我的项目中，我们后续加入图标都会在这里。然后点击下载至本地按钮把资源下载到本地磁盘。
项目中的图标
5. 第五步：打开下载的资源包，拿到iconfont.ttf文件，此文件就是我们所需要的资源。将iconfont.ttf文件复制粘贴到我们Android Studio项目assets文件夹中。
iconfont.ttf资源
放进assets中
6. 第六步：打开IconFont我的项目，找到图标的代码，或者打开我们下载的资源包中的demo_index.html也可以看到图标代码。
项目中的图标代码
7. 第七步：把IconFont我的项目中的图标代码添加到AndroidStudio的string.xml中。
添加到string.xml中
8. 第八步：测试一波，在xml中写一个TextView，然后再Activity中设置下Typeface。
在xml中，text值设置string.xml中的name，textSize可以设置图标大小，textColor可以设置图标的颜色。
xml布局
在Activity中代码：首先通过assets中的iconfont.ttf创建Typeface类，然后给具体的TextView设置setTypeface。
Typeface font = Typeface.createFromAsset(getAssets(), "iconfont.ttf");
womanIcon.setTypeface(font);
womanIcon.setText(getResources().getString(R.string.woman));Activity中代码
到这我们看下效果图
效果图
有什么问题呢
- 每次都要给TextView设置Typeface。
进一步封装
9. 第九步：我们封装一个类，不需要手动设置Typeface。
自定义TextView
package com.kelin.iconfont;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;
/**
* 创建： PengJunShan on 2019-02-26 14:52 描述：
*/
@SuppressLint("AppCompatCustomView")
public class FontIconView extends TextView {
public FontIconView(Context context) {
super(context);
init(context);
}
public FontIconView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public FontIconView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
/**
* 初始化
* @param context
*/
private void init(Context context) {
//设置字体图标
Typeface font = Typeface.createFromAsset(context.getAssets(), "iconfont.ttf");
this.setTypeface(font);
}
}
在xml中直接使用，无需在Activity中手动设置Typeface了。
image.png
上传图标到项目
在实际工作中IconFont图标无法提供我们想要的图标怎么办？可以让公司ui做一个SVG矢量图，我们把这个图标上传到IconFont中我的项目中，然后就可以普通的图标一样使用了。
在我的项目中点击上传图标到项目按钮，然后选择一张svg矢量图上传。上传成功后再我的项目中可以看到自己上传的图标，然后下载至本地在AS中替换iconfont.ttf文件 在string.xml中添加新的图标名字 就可以使用了
我的项目
选择矢量图上传
看到刚刚上传的图标
引用自己上传的图标
效果图
原文链接：https://www.jianshu.com/p/52169364a25b