Android Studio使用IconFont阿里矢量图标库

什么是矢量图

矢量图 svg 是 W3C（World Wide Web ConSortium 国际互联网标准组织）在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。矢量图像用点和线来描述物体，所以文件会比较小，同时也能提供高清晰的画面。用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。

只要跟着本文章的步骤保证你能很快的集成到项目中使用

优缺点

1. 文件小，图像中保存的是线条和图块的信息，所以矢量图形文件与分辨率和图像大小无关，只与图像的复杂程度有关，图像文件所占的存储空间较小。

2. 图像可以无级缩放，对图形进行缩放，旋转或变形操作时，图形不会产生锯齿效果。

3. 矢量图缩放自由且不会失真，完全适配于任何分辨率的屏幕。

4. 最大的缺点是难以表现色彩层次丰富的逼真图像效果。

5. 跨平台，因为矢量图是纯文本格式来描述的，所以不受平台的限制。

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