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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页