Android使用IconFont阿里矢量图标

什么是矢量图

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

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

OkHttp3简单使用和封装使用
Retrofit2.0+RxJava2.0封装使用
Android开发 多语言、指纹登录、手势登录
Android Studio 使用SVN 主干和分支合并代码

优缺点
  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中添加新的图标名字 就可以使用了

我的项目
选择矢量图上传
看到刚刚上传的图标
引用自己上传的图标
效果图
点击下方喜欢收藏,万一后期项目用得到呢
谢谢进入我的博客,请多多点评
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,547评论 4 374
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,787评论 2 308
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,175评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,752评论 0 223
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,169评论 3 297
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,056评论 1 226
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,195评论 2 321
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,980评论 0 214
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,724评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,872评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,344评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,667评论 3 264
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,379评论 3 245
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,202评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,992评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,189评论 2 286
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,987评论 2 279

推荐阅读更多精彩内容