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

比眉伴天荒 2023-02-24 08:58 37阅读 0赞

什么是矢量图

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

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

优缺点

1.  文件小，[图像][Link 1]中保存的是线条和图块的信息，所以矢量图形文件与[分辨率][Link 2]和图像大小无关，只与图像的复杂程度有关，图像文件所占的[存储空间][Link 3]较小。
2.  [图像][Link 1]可以无级缩放，对图形进行缩放，旋转或变形操作时，图形不会产生锯齿效果。
3.  矢量图缩放自由且不会失真，完全适配于任何分辨率的屏幕。
4.  最大的缺点是难以表现色彩层次丰富的逼真图像效果。
5.  跨平台，因为矢量图是纯文本格式来描述的，所以不受平台的限制。

6.在xml中无法实时显示图片。

为什么要用IconFont矢量图标

> 开发app时候为了适配不同的[手机屏幕][Link 4]，需要切很多套图，然后我们很繁琐的给图标命名，然之后放入不同的drawable文件夹，要做很多得无用功，而现在[阿里巴巴][Link 5]给我们提供了矢量图标库，给我节省了大量的麻烦而又无用的工作，我们不再需要往res下的资源文件夹放各种图标

> 先看一下某网迭代了五年项目的Analyze APK详情，res资源下的图片占据了二十多MB,这些图片图标都是会用到的，所以都会打包到APK中，无疑增大了APK的大小。
> 
>  
> 
> ![format_png][]
> 
> Analyze APK

Android 使用阿里巴巴IconFont图标

1. 第一步：打开[阿里巴巴IconFont官网][IconFont] ,登陆后的首页（不用解释怎么登陆的了吧）。

![format_png 1][]

IconFont首页

2. 第二步：点击`第一步` 三八节项图标后，然后选择你想要的图标后点击加入购物车。

![format_png 2][]

选择需要的图标加入购物车

3. 第三步：在`第二步`中选择想要的图标加入购物车后点击右上角的购物车图后，点击添加至项目，如果没有项目先创建一个项目。

![format_png 3][]

添加到项目

4. 第四步：点击`第三步`中的添加至项目按钮后，会跳到我的项目中，我们后续加入图标都会在这里。然后点击下载至本地按钮把资源下载到本地磁盘。

![format_png 4][]

项目中的图标

5. 第五步：打开下载的资源包，拿到iconfont.ttf文件，此文件就是我们所需要的资源。将iconfont.ttf文件复制粘贴到我们Android Studio项目assets文件夹中。

![format_png 5][]

iconfont.ttf资源

![format_png 6][]

放进assets中

6. 第六步：打开IconFont我的项目，找到图标的代码，或者打开我们下载的资源包中的demo\_index.html也可以看到图标代码。

![format_png 7][]

项目中的图标代码

7. 第七步：把IconFont我的项目中的图标代码添加到AndroidStudio的string.xml中。

![format_png 8][]

添加到string.xml中

8. 第八步：测试一波，在xml中写一个TextView，然后再Activity中设置下Typeface。

> 在xml中，text值设置string.xml中的name，textSize可以设置图标大小，textColor可以设置图标的颜色。

![format_png 9][]

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));

![format_png 10][]

Activity中代码

到这我们看下效果图

![format_png 11][]

效果图

有什么问题呢

*  每次都要给TextView设置Typeface。

进一步封装

9. 第九步：我们封装一个类，不需要手动设置Typeface。

![format_png 12][]

自定义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了。

![format_png 13][]

image.png

上传图标到项目

> 在实际工作中IconFont图标无法提供我们想要的图标怎么办？可以让公司ui做一个SVG矢量图，我们把这个图标上传到IconFont中我的项目中，然后就可以普通的图标一样使用了。

> 在我的项目中点击上传图标到项目按钮，然后选择一张svg矢量图上传。上传成功后再我的项目中可以看到自己上传的图标，然后下载至本地在AS中替换iconfont.ttf文件 在string.xml中添加新的图标名字 就可以使用了

![format_png 14][]

我的项目

![format_png 15][]

选择矢量图上传

![format_png 16][]

看到刚刚上传的图标

![format_png 17][]

引用自己上传的图标

![format_png 18][]

效果图

原文链接：https://www.jianshu.com/p/52169364a25b

[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fbaike.baidu.com%2Fitem%2F%25E5%259B%25BE%25E5%2583%258F
[Link 2]: https://links.jianshu.com/go?to=https%3A%2F%2Fbaike.baidu.com%2Fitem%2F%25E5%2588%2586%25E8%25BE%25A8%25E7%258E%2587
[Link 3]: https://links.jianshu.com/go?to=https%3A%2F%2Fbaike.baidu.com%2Fitem%2F%25E5%25AD%2598%25E5%2582%25A8%25E7%25A9%25BA%25E9%2597%25B4
[Link 4]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3D%25E6%2589%258B%25E6%259C%25BA%25E5%25B1%258F%25E5%25B9%2595%26tn%3D24004469_oem_dg%26rsv_dl%3Dgh_pl_sl_csd
[Link 5]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3D%25E9%2598%25BF%25E9%2587%258C%25E5%25B7%25B4%25E5%25B7%25B4%26tn%3D24004469_oem_dg%26rsv_dl%3Dgh_pl_sl_csd
[format_png]: /images/20230209/72cb96bfb7ed4fc19302381cf1cdfe8d.png
[IconFont]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.iconfont.cn%2F
[format_png 1]: /images/20230209/fcf697e0129e4c7e9636216701ee17a0.png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LWY0YjE3ODQ0OGNjNTM2ZGIucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTQ2ZjcxMmVhOWVhYzY0NWYucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LWJhYWY1YTNmNjY0OWUwNDkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LThiYWEzNTVmNGFlZTYwMzQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvODE3L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTlmYTg4YTBkYmFmMGY3NTAucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTViYjRiYTQ4MTg1OGM0ZDMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTA5YjAxYTdiY2VhY2UwMzQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTMxNDExYmM2ZTQ4N2IyZDQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTNjZDRiOWQ2YWM2ZGQ4NGUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTE5Y2FkZDU2NjQyYjczZGQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzYzL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTNlNDJiMDEyZWE4ODIzYzEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LWZiOGYwNTM4NTA3NDJhMDkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LWIwOGY2OWVhYzcwOTEyYTMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTc0MGNmMTg1NWNiYjhjZTkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LWQ2NjJmOWQ5MWE5MjIzZTkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LTZkZjhmZWRjYTdiY2ZhNTAucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zNzM1MTU2LWFkYjc1YjAwM2RmOTE4NGUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzYwL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png