众所周知,在android5.0以后,谷歌推出了android矢量图的相关使用包。 那么使用矢量图有什么好处呢?
- 减少应用包apk的大小,减少了美工的工作量。因为不用在生成各种尺寸的图片进行适配。只要一套xml文件既可以解决所有的尺寸适配。
- 一定程度上也减少了应用的内存。 当然,也有缺点,因为xml其实是绘制的文件,也就是使用的时候才去调用cpu进行绘制,所以一定程度上还是会耗点性能,当然不是很大影响。除非你的矢量图非常复杂。或者非常巨大。不过我们正常使用的矢量图标都是很小的,所以并没有特别大的影响。
另外,这里还是推荐矢量图和位图结合使用。图标用矢量图实现,对于比较大的展示图片,还是用位图来比较好。推荐适配drawable-xxhdpi的位图尺寸即可。具体为什么,可以参考网上的其他文章,都有详细的介绍。 那么接下来,我们就开始讲如何使用位图。
- 首先是在app主模块的defaultConfig配置
defaultConfig { vectorDrawables.useSupportLibrary = true }
- 为了适配5.0以下的低版本,可以在application中的onCreate中加入如下方法
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) { AppCompatDelegate.setCompatVectorFromResourcesEnabled(true); //支持SVG }
以上就是使用矢量图需要添加的配置信息。接下来开始讲使用。 首先,需要有svg的图片矢量文件,一般美工可以生成这种格式的图片,这边为了测试,你可以上阿里的一个图标库随便下载一个svg文件,不知道的可以先了解一下阿里的iconfont。也可以直接进入官网 https://www.iconfont.cn/ 随便搜索一个图标,比如首页图标,可以设置不同的颜色,然后通过svg下载将svg文件下载到本地。如下图:
之后在android studio项目里面右建“drawable” —“New” — “Vector Asset”,打开如下界面
选择1,local file, 2的位置是文件名称,3是本地svg文件的地址。之后点击next=》finish之后,即可在drawable文件夹下生成一个对应的android可以使用的矢量文件xml。
有时候通过上面的方式,可能生成不了对应的VectorDrawable资源文件,我推测可能是矢量图过于复杂或者文件名包含中文等原因,android studio识别不了,所以也可以使用在线工具将svg文件转换成VectorDrawable资源文件。
工具地址:http://inloop.github.io/svg2android/
接下来开始讲生成的xml文件怎么使用。重点讲Imageview和Textview的使用。 两者在代码中动态添加的方式和普通图片的添加方式都是一样的,这里主要讲在xml布局文件里面的设置方式。 imageview必须把XML的矢量文件写在srcCompat里面。如下
<ImageView
android:id=“@+id/iv”
android:layout_width=“80dp”
android:layout_height=“80dp”
app:srcCompat=“@drawable/home_bottom_homepage_pressed” />
对于textview,在drawableTop或者drawableLeft里面直接添加矢量xml文件在5.0以下的版本是会报错的。要想兼容5.0以下的版本,必须依附于StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable等才能使用。比如建一个selector文件,在里面加入xml矢量文件。就可以在textview使用selector了。相当于,要先在textview的布局文件里面添加矢量图,就得再包裹一层。 以上,就是关于android矢量图的所有矢量总结。 注:对于比较复杂的矢量图或者比较大的矢量图,建议还是用位图比较好。就像上面说过的,可以位图和矢量图混合使用。仅适配drawable-xxhdpi即可。