项目快速实践--SVG【十万个为什么】

一、导语

这两天学习了下 SVG 在项目中的使用,学到了以前很多不知道东西,在这里打算以问答的形式作个总结。

这里主要针对项目中使用 SVG 实践性的总结,比较注重实用性,所以一些基本概念想了解,可以去 Android群侠传 学习。


二、问答

项目中使用 SVG 的好处?

SVG总结起来用两个优点,首先最主要的放大不会失真,其次相对同样的图标.png,图标.svg 字节更小。所以应用到项目中意义就非常明显,放大不会失真,那么针对 android 端的适配就好处多多了,不用准备多套 图标资源 ,可以减少 apk 的大小。

在这里可以测试下,去阿里矢量库下载好一张一模一样图标的 .svg 和 .png,。


这里写图片描述
这里写图片描述

将他们在 xml 中使用,上面的是 .png 图标,下面是 .svg 文件图标。


这里写图片描述
这里写图片描述

运行出来后,可以稍微看出来,下面的 svg 应该更清楚,现在将它们都放大。


这里写图片描述
这里写图片描述

两者的效果区别有多大很明显可以看出来,上面的 .png 已经非常模糊了。
然后两者的大小,其实只是一张 .png 和 .svg 相比较,他们的字节数量差不多。

在项目中使用的 SVG 有几种

SVG 有两种,一种是静态的就上面所示,还有种是带动画的,比较经典是 Google 规范的 toolbar 的菜单图标,有旋转效果。带动画的 SVG 实现方法即是通过 android5.0 以后提供的 API AnimatedVectorDrawable 实现的。通过 AnimatedVectorDrawable 连接静态的 VectorDrawable 和动态的 objectAnimator 。

SVG 怎样在 android studio 项目中使用

有了 .svg 文件后,在 android studio 中 res – > 右键 new –> Vector Assect


这里写图片描述

在这个界面 有三点要注意的,分别标红的 1 2 3

  • 1 表示使用 Google 提供的 MD风格的图标

    这里写图片描述

  • 2 使用本地的 .svg 文件图标,比如刚才前面我在 阿里矢量库下载图表文件。加载就可以了

  • 3 最重要的,需要将它勾上,并且 将左边的 Size 设置稍微大点,100 或者 200,因为我测试了下比较搞笑的是,如果勾上用它提供本身的大小,结果在控件上加载使用后,将宽高设置成比较大 100dp 或者 200dp后,竟然会模糊,所以我猜测这个 Size 设置的是图标支持的最大值。并且最为重要的是修改大的尺寸并不会增加生成出来 .xml 文件的字节数。

SVG 从哪里来

如果看了有关 SVG 的基本知识,我们都知道可以通过在 XML 文件中画出这个图标,比如将上面的图标 xml 文件打开也可以看到

这里写图片描述

简单图表的xml文件我们能看懂部分属性, width height path 等等,但是稍微复杂我们就画不出了,并且都很难看懂,所以这部分并不是我们前端负责,一般项目中只要不是非常复杂的图标可以从 UI 获取,他们有工具可以导出 .svg 文件,我们只负责使用,当然也可以简单的修改 width height color 等等,但是真正能做的并不多。

SVG 在 5.0 以下的使用

很多博客都说 SVG 在 5.0 以下不能使用,并且需要配置 Google 提供的方法配置 Gradle 才可以使用,不然会崩溃。理由当然是前面说 Google 提供的 API 是 5.0 以后才提供的。其实是可以的,比如我这里的系统版本就是 4.4 ,一样没问题,测试了发现,如果不使用带动画的 SVG 就没问题,如果静态的 SVG ,在 5.0 前后都可以使用,这点比较重要,可以根据自己的情况来是否要配置 Gradle 。

好的 有关 SVG 在项目中使用总结差不多就这些,都是非常实用,直接针对项目开发的。

猜你喜欢

转载自blog.csdn.net/guozhaohui628/article/details/79403862