Android Vector的第一次尝试

时间：2021-12-13 07:05:53

     相信广大安卓的开发者已经对于安卓的适配问题是非常头疼的，安卓各种广泛的机型，各种奇葩的分辨率，简直不厌其烦，由于多种图片导致的安卓资源的浪费是普遍存在的，并且很多公司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使用

1.在drawable目录下，点击右键
Android Vector的第一次尝试

2.新建一个vector资源，选择本地SVG矢量图。

Android Vector的第一次尝试
 我们去哪里找到SVG图片转换成vector图片呢？不要告诉我你不知道阿里的图标库。

3.阿里图标库，我们随便找一个图标。

Android Vector的第一次尝试

我们下载一个SVG格式的图标。

4.下载完成如下。

Android Vector的第一次尝试

在这里我们最好是重新命名下，比如加上颜色和大小，这样便于我们直观的了解这个drawable是什么。

5.导入我们刚刚下载的SVG图片。

Android Vector的第一次尝试

如果不勾选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就行。以下是我使用的效果。

Android Vector的第一次尝试

类似于这种小图标类型的，完全不用切图，也不用你去适配了，一个vector完全搞定。


标签：

相关文章