相信广大安卓的开发者已经对于安卓的适配问题是非常头疼的,安卓各种广泛的机型,各种奇葩的分辨率,简直不厌其烦,由于多种图片导致的安卓资源的浪费是普遍存在的,并且很多公司UI在切图的时候,只切IOS的2x和3x,大部分的时候安卓其实也不太晓得需要多大的图,所以很多公司就按照IOS的图片来设置,这样显然是不完美的。
谷歌在解决安卓的屏幕视频的时候大致经历了一下几个过程,从最初的drawable到minmap到现在的安卓VectorDrawable,作为安卓开发者我们必须不断的进行新的尝试,跟随技术发展的趋势。
Vector Drawable
Android 5.0发布的时候,Google提供了Vector的支持。Vector Drawable相对于普通的Drawable来说,有以下几个好处:
- Vector图像可以自动进行适配,不需要通过分辨率来设置不同的图片
- Vector图像可以大幅减少图像的体积,同样一张图,用Vector来实现,可能只有PNG的几十分之一
- 使用简单,很多设计工具,都可以直接导出SVG图像,从而转换成Vector图像
- 功能强大,不用写很多代码就可以实现非常复杂的动画
- 成熟、稳定,前端已经非常广泛的进行使用了
Vector图像刚发布的时候,是只支持Android 5.0+的,对于Android pre-L的系统来说,并不能使用,所以,可以说那时候的Vector并没有什么卵用。不过自从AppCompat 23.2之后,Google对p-View的Android系统也进行了兼容,也就是说,Vector可以使用于Android 2.1以上的所有系统,只需要引用com.android.support:appcompat-v7:23.2.0以上的版本就可以了,这时候,Vector应该算是迎来了它的春天。
(以上摘自网上介绍)Vector语法简介
- M = moveto(M X,Y) :将画笔移动到指定的坐标位置
- L = lineto(L X,Y) :画直线到指定的坐标位置
- H = horizontal lineto(H X):画水平线到指定的X坐标位置
- V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
- C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
- S = smooth curveto(S X2,Y2,ENDX,ENDY)
- Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
- T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
- A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
- Z = closepath():关闭路径
好了,再多的就不介绍了,语法我们也不用管,画图也比较麻烦,我们也不可能自己去画图,知道怎么用就行。
Vector使用
我们下载一个SVG格式的图标。
4.下载完成如下。
在这里我们最好是重新命名下,比如加上颜色和大小,这样便于我们直观的了解这个drawable是什么。
5.导入我们刚刚下载的SVG图片。
如果不勾选OverRide就默认的是24dp,勾选了就是你导入的多大的图,就转换成多大的图。
6.生成Vector drawable图片。
自动生成的图片
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="32dp" android:height="32dp" android:viewportWidth="1024.0" android:viewportHeight="1024.0"> <path android:pathData="M512,832c-176.4,0 -320,-143.6 -320,-320S335.6,192 512,192s320,143.6 320,320 -143.6,320 -320,320m0,-704C300.3,128 128,300.3 128,512s172.3,384 384,384 384,-172.3 384,-384S723.7,128 512,128" android:fillColor="#ffffff"/> <path android:pathData="M683.9,470.9H544v-140a32,32 0,1 0,-64 0v140h-139.9a32,32 0,0 0,0 64H480v140a32,32 0,0 0,64 0v-140h140a32,32 0,0 0,0 -64" android:fillColor="#ffffff"/> </vector>
我们不用管这里边什么意思。
7.使用。
在代码中直接使用,用imageview设置drawable就行。以下是我使用的效果。
类似于这种小图标类型的,完全不用切图,也不用你去适配了,一个vector完全搞定。