Android Vector的第一次尝试

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


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


 我们去哪里找到SVG图片转换成vector图片呢?不要告诉我你不知道阿里的图标库。

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


我们下载一个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完全搞定。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值