Android Vector曲折的匹配的路

Android Vector曲折的配合的路

个别年前写书之早晚,就以研讨Android
L提出的Vector,可研究下发现,完全无拥有兼容性,相信这也是其从未给周边采用的一个缘故,经过Google的不懈努力,现在Vector终于迎来了她的春季。

4.jpg

在文章后,会让出本文的Demo和效应图,并开源在Github

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图像

概念

第一,需要讲解两独概念——SVG和Vector。

SVG,即Scalable Vector Graphics
矢量图,这种图像格式在前者被已经使用的那个大了,详见WIKI:https://en.wikipedia.org/wiki/Scalable\_Vector\_Graphics

Vector,在Android中指的凡Vector
Drawable,也便是Android中之矢量图,详见:https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

故此,可以说Vector就是Android中的SVG实现,因为Android中之Vector并无是支持一切的SVG语法,也无必要,因为整体的SVG语法是非常复杂的,但早已支持的SVG语法已经够了,特别是Path语法,几乎是Android中Vector的标配,详细可参考:http://www.w3.org/TR/SVG/paths.html

Vector语法简介

Android以同样栽简化的艺术对SVG进行了配合,这种艺术尽管是透过以她的Path标签,通过Path标签,几乎可以实现SVG中的其它具有标签,虽然可能会见复杂一点,但这些事物还是好透过工具来好的,所以,不用操心写起来会非常复杂。

Path指令解析如下所示:

  1. 支持之命:

  2. M = moveto(M X,Y) :将画笔移动到指定的坐标位置

  3. L = lineto(L X,Y) :画直线到指定的坐标位置
  4. H = horizontal lineto(H X):画水平线至指定的X坐标位置
  5. V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
  6. C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三潮贝赛曲线
  7. S = smooth curveto(S X2,Y2,ENDX,ENDY)
  8. Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二不良贝赛曲线
  9. T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
  10. A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
  11. Z = closepath():关闭路径

  12. 采用条件:

  13. 盖标轴为以(0,0)为着力,X轴水平向右侧,Y轴水平往下

  14. 有指令大小写均只是。大写绝对定位,参照全局坐标系;小写相对稳定,参照父容器坐标系
  15. 指令和数据间的空格可以简单
  16. 平指令出现反复可只用一个

只顾,’M’处理常,只是走了画笔, 没有写其他事物。
它吗可于末端给起高达而绘制不连续线。

至于这些语法,开发者需要的并无是任何贯通,而是能看明白即可,其它的都可提交工具来兑现。

从PNG到SVG

  • 设计师

若是打一般采用的PNG图像转换到SVG图像,对于设计师来说,并无是同项难事,因为多数的规划工具(PS、Illustrator等等)都支持导出各种格式的图像,如PNG、JPG,当然,也包括SVG,因此,设计师可以了按照老的方开展统筹,只是最后导出的早晚,选择SVG即可。

  • 程序员

未求开发者都去学运用这些计划工具,开发者可以利用部分工具,自己转换一些比基础的图像,http://inloop.github.io/svg2android/
就是这么一个挺牛逼的网站,可以在线将一般图像转换为Android Vector
Drawable。如图所示:

5.png

抑或,还好使SVG的编辑器来展开SVG图像的编,例如http://editor.method.ac/

6.png

使用Android Studio

行使Android Studio的Vector
Asset,可以老有利的缔造Vector图像,甚至足以一直通过当地的SVG图像来生成Vector图像,如图所示:

2.png

进去以后,就可生成Vector图像,如图所示:

3.png

Google的配合的路

只兼容L+

Vector是当Android L中提取出来的初定义,所以于刚起的当儿是单兼容L+的。

Gradle Plugin 1.5的兼容

自打Gradle Plugin 1.5发端,Google支持了扳平栽兼容方式,即在Android
L之上,使用Vector,而于L之下,则采取Gradle将Vector生成PNG图像。

Android gradle plugin
1.5发表后,加入了一个跟VectorDrawable有关的新力量。Android build
tools
提供了另外一种缓解兼容性的方案,如果编译的本子是5.0之前的本,那么build
tools
会把VectorDrawable生成对应之png图片,这样以5.0之下的版本则使用的是浮动的png图,而当5.0上述的本被则采用VectorDrawable.在build.gradle添加generatedDensities配置,可以安排生成的png图片的密度。

AppCompat23.2的兼容

从今AppCompat23.2开始,Google开始支持在亚版本及用Vector。

静态Vector图像

咱俩发不少措施能获得这些Vector,那么哪些用其也,Android
5.0上述之采取就不讲话了,不顶有广阔代表性,我们由pre-L版本的相当开始做打。

pre-L版本兼容

VectorDrawableCompat依赖于AAPT的片效果,它能维系最近矢量图使用的增长的性质ID,以便他们可被pre-L版本之前的援。

当Android
5.0前用Vector,需要aapt来对资源拓展一些处理,这同过程可以在aapt的安排中开展设置,如果无启用这样一个flag,那么以5.0之下的配备及运行就会见有android.content.res.Resources$NotFoundException。

率先,你待以类型的build.gradle脚本中,增加对Vector兼容性的支撑,代码如下所示:

使用Gradle Plugin 2.0以上:

android {

    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

使用Gradle Plugin 2.0以下,Gradle Plugin 1.5以上:

android {
  defaultConfig {
    // Stops the Gradle plugin’s automatic rasterization of vectors
    generatedDensities = []
  }
  // Flag to tell aapt to keep the attribute ids around
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

譬如前提到的,这种兼容方式实际上是预先关闭AAPT对pre-L版本采用Vector的服,即于L版本之上,使用Vector,而当pre-L版本及,使用Gradle生成相应的PNG图片,generatedDensities这个数组,实际上就是一旦生成PNG的图分辨率的频繁组,使用appcompat后就是无欲这样了。

自,最重大的还是添加appcompat的支持:

compile 'com.android.support:appcompat-v7:23.4.0'

而且,确保您下的凡AppCompatActivity而非是普普通通的Activity。

Vector图像

一个基本的Vector图像,实际上也是一个xml文件,如下所示:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="200dp"
        android:height="200dp"
        android:viewportHeight="500"
        android:viewportWidth="500">

    <path
        android:name="square"
        android:fillColor="#000000"
        android:pathData="M100,100 L400,100 L400,400 L100,400 z"/>

</vector>

展示如图所示:

7.png

此间需要解释下此的几乎单标签:

  • android:width \ android:height:定义图片的宽高
  • android:viewportHeight \
    android:viewportWidth:定义图像被分割的百分比大小,例如例子中之500,即把200dp大小的图像划分成500卖,后面Path标签中的坐标,就全部使用的是此处划分后底坐标体系。

如此做有一个雅好的用意,就是用图像大小与图像分离,后面可以擅自修改图像大小,而无待修改PathData中之坐标。

  • android:fillColor:PathData中之这些性就无详细讲了,与Canvas绘图的性基本类似。

当控件被利用

起矣静态的Vector图像,就可当控件被运用了。

得窥见,这里我们采取的还是惯常的ImageView,好像并无是AppcomatImageView,这是因使用了Appcomat后,系统会自动将ImageView转换为AppcomatImageView。

ImageView\ImageButton

对此ImageView这样的控件,要配合Vector图像,只需要以之前的android:src属性,换成app:srcCompat即可,示例代码如下所示:

<ImageView
    android:id="@+id/iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/vector_image"/>

当代码中安的话,代码如下所示:

ImageView iv = (ImageView) findViewById(R.id.iv);
iv.setImageResource(R.drawable.vector_image);

setBackgroundResource也是好装Vector的API

Button

Button并无克一直行使app:srcCompat来用Vector图像,需要经Selector来展开动,首先,创建两独图像,用于Selector的有限独状态,代码如下所示:

selector1.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M14.59,8L12,10.59 9.41,8 8,9.41 10.59,12 8,14.59 9.41,16 12,13.41 14.59,16 16,14.59 13.41,12 16,9.41 14.59,8zM12,2C6.47,2 2,6.47 2,12s4.47,10 10,10 10,-4.47 10,-10S17.53,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
</vector>

selector2.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M11,15h2v2h-2zM11,7h2v6h-2zM11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z"/>
</vector>

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/selector1" android:state_pressed="true"/>
    <item android:drawable="@drawable/selector2"/>
</selector>

非常简单,只是将一般的Selector中之图像换成了Vector图像而已,接下去,在Button中采取是Selector即可:

<Button
    android:id="@+id/btn"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:background="@drawable/selector"/>

然后运行,如果你认为可以运行,那就是最最天真了,都说了凡相当,怎么能够没坑呢,这里就是是一个坑……

此坑实际上是发出历史渊源的,Google的如出一辙各类开发者在博客中描绘及:

First up, this functionality was originally released in 23.2.0, but
then we found some memory usage and Configuration updating issues so
we it removed in 23.3.0. In 23.4.0 (technically a fix release) we’ve
re-added the same functionality but behind a flag which you need to
manually enable.

其实,他们的是改变,就影响了看似DrawableContainers(DrawableContainers
which reference other drawables resources which contain only a vector
resource)这样的切近,它的一个名列前茅,就是Selector(StateListDrawable也是)。这个开发者在文中涉及的flag,就是下边的就段代码,放在Activity的前面就是好了:

static {
    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}

翻开这flag后,你就得正常使用Selector这样的DrawableContainers了。同时,你还开启了仿佛android:drawableLeft这样的compound
drawable的使用权限,以及RadioButton的应用权限,以及ImageView’s src属性。

RadioButton

RadioButton的Button同样好定义,代码如下所示:

<RadioButton
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:button="@drawable/selector"/>

动态Vector基础

动态Vector才是Android Vector Drawable的精髓所在

动态的Vector需要经animated-vector标签来开展落实,它就是比如一个粘合剂,将控件与Vector图像粘合在了一同,一个基础之animated-vector代码如下所示:

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/XXXXX1">

    <target
        android:name="left"
        android:animation="@animator/XXXXX2"/>

</animated-vector>

其实就中间仅来半点只举足轻重是亟需关怀的,XXXXX1和XXXXX2。一个现实的演示如下所示:

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_arrow">

    <target
        android:name="left"
        android:animation="@animator/anim_left"/>

    <target
        android:name="right"
        android:animation="@animator/anim_right"/>

</animated-vector>

此地表示目标图像是drawable/ic_arrow,对left、right分别下了anim_left、anim_right动画。这里的name属性,就是在静态Vector图像中group或者path标签的name属性。

animated-vector标签在现的Android
Studio中其实是会见报错的,但这个并无影响编译和运行,属于Android
Studio的Bug。

对象图像

XXXXX1凡目标Vector图像,也便是静态的Vector图像,例如:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="120dp"
        android:height="120dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">

    <group android:name="left">
        <path
            android:fillColor="#FF000000"
            android:pathData="M9.01,14L2,14v2h7.01v3L13,15l-3.99,-4v3"/>
    </group>

    <group android:name="right">
        <path
            android:fillColor="#FF000000"
            android:pathData="M14.99,13v-3L22,10L22,8h-7.01L14.99,5L11,9l3.99,4"/>
    </group>

</vector>

可窥见,这里的Vector图像比之前我们看见的要多矣一个group标签。group标签的作用产生零星只:

  • 本着Path进行分组,由于我们后面要对Path进行动画,所以可以叫具备同等动画效果的Path在同一个Group中
  • 拓展动画效果,单个的path标签是从未translateX和translateY属性的,因此无法使用性质动画来控制path
    translateY,而group标签是部分,所以我们需要先以有关的path标签元素包裹于一个个底group标签中.

动画效果

XXXXX2实际上就是是模板要贯彻之卡通,动画效果实在就是基础的性质动画,例如:

anim_left.xml

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:interpolator/anticipate_overshoot"
    android:propertyName="translateX"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="-10"
    android:valueType="floatType"/>

anim_right.xml

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:interpolator/anticipate_overshoot"
    android:propertyName="translateX"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="10"
    android:valueType="floatType"/>

在代码中行使

ImageView imageView = (ImageView) findViewById(R.id.iv);
AnimatedVectorDrawableCompat animatedVectorDrawableCompat = AnimatedVectorDrawableCompat.create(
        this, R.drawable.square_anim
);
imageView.setImageDrawable(animatedVectorDrawableCompat);
((Animatable) imageView.getDrawable()).start();

动态Vector兼容性问题

向下兼容问题

同说交相当,就只好涉及坑,几乎有的以配合而召开的改,都见面留给有不行填满之坑,动态Vector动画也不殊,虽然Google已经对Vector图像进行了Android
2.1上述之匹配,但于动态Vector动画,还是发生成千上万范围的,例如:

  • Path Morphing,即路径变换动画,在Android pre-L版本下是无法用的。
  • Path Interpolation,即路径插值器,在Android
    pre-L版本只能利用系统的插值器,不克由定义。
  • Path
    Animation,即路径动画,这个貌似用贝塞尔曲线来取代,所以没有尽老影响。

迈入兼容问题

除去在亚版本及的兼容性问题,在L版本之上,也设有兼容性问题,即持续了AppCompatActivity的界面,如果直接设置ImageView的srcCompat,那么Path
Morphing动画是无法生效的,因为默认的AppCompatActivity已经默认使用ImageViewCompat给换了,但是AnimatedVectorDrawableCompat是匪支持Path
Morphing动画的,所以,在AppCompatActivity界面里面纵使不算了。

解决办法很粗略,即以代码来给ImageView添加动画:

ImageView imageView = (ImageView) view;
AnimatedVectorDrawable morphing = (AnimatedVectorDrawable) getDrawable(morphing);
imageView.setImageDrawable(morphing);
if (morphing != null) {
    morphing.start();
}

留意不要使用AnimatedVectorDrawableCompat即可。

抽取string兼容问题

开发者有时候为代码简洁可能会见将Vector图像中的pathData放到string.xml中,然后在Vector图像中引用string。

只是这种措施要通过生成png来配合5.0之下机型的话,会报pathData错误,编译器不见面失去读取string.xml,只能把pathData写及Vector图像中,动画文件中呢是一样,这为是以配合做出的授命呢,不得而知。

另兼容问题

其他非常意外、诡异、不克亮的兼容性问题,只能通过本文件夹的法来展开兼容了,例如drawable-v21及drawable,分别创建两个文本称相同的资源在少单公文夹下,这样在21以上版本,会下drawable-v21之资源,而任何会采取drawable下之资源。

动态Vector进阶

用好ObjectAnimator

所谓Vector动画进阶,实际上就是当采取ObjectAnimator的有些性能,特别是trimPathStart、trimPathEnd这点儿单针对Vector的性能(要顾pathData属性不匹配pre-L)。

及时片独特性的官文档如下所示:

android:trimPathStart
The fraction of the path to trim from the start, in the range from 0 to 1.
android:trimPathEnd
The fraction of the path to trim from the end, in the range from 0 to 1.
android:trimPathOffset
Shift trim region (allows showed region to include the start and end), in the range from 0 to 1.

实则特别简短,就是一个图像的截取,设置一个百分比即可,即当前绘制多少比例的图像,其余部分不绘制,Start和End分别就是打PathData的Start和End开始算,大家参考几个例就是可知领略了。

理解Path Morph

Path
Morph动画是Vector动画的一个高等应用,说到底,也不怕是片只PathData的易,但是这种转移并无是随心所欲的,对于有数个PathData,它们会拓展Path
Morph的前提是,它们有着同样个数的显要点,即有限独途径的转换,只是关键点的坐标变化,掌握了马上一个基本原理,实现Path
Morph就非常容易了。

学习Vector

每当Github上自起源了一个Vector的卡通片Demo库,地址如下所示:

https://github.com/xuyisheng/VectorDemo

其一Demo分为片有些,一部分凡是可兼容Android
pre-L版本与L+版本的Vector动画,另一样有(通过Actionbar的按钮切换)是只能兼容L+的Vector动画。

每个Vector动画,基本还饱含四片段内容,即:

  • Vector:图像资源
  • Animated-vector:动画、图像粘合剂
  • ObjectAnimator:动画资源
  • 代码:启动动画

每个Vector动画通过就四个组成部分去开展解析,就死清晰了。

此间显示下Demo的效益图:

vector.gif

Vector性能问题

产生读者以篇章尾留言,询问VectorDrawable的性质问题,这里解释一下。

  1. Bitmap的绘图效率并不一定会比Vector高,它们有得之平衡点,当Vector比较简单时,其效率是早晚比Bitmap高的,所以,为了保Vector的赛效率,Vector需要进一步简便易行,PathData更加正式、精简,当Vector图像变得非常复杂时,就用采用Bitmap来代替了
  2. Vector适用于ICON、Button、ImageView的图标等稍的ICON,或者是内需的卡通片效果,由于Bitmap在GPU中产生缓存功能,而Vector并从未,所以Vector图像不可知召开往往之重绘
  3. Vector图像过于复杂时,不仅仅要留意绘制效率,初始化效率也是索要考虑的重点元素
  4. SVG加载速度会急忙给PNG,但渲染速度会慢吃PNG,毕竟PNG有硬件加速,但平均下来,加载速度的提升弥补了绘图的速度缺陷。
    Google的是视频被,已经对Vector的效率问题召开了讲,可以参见下:

参考

https://medium.com/@shemag8/animated-vector-drawable-e4d7743d372c\#.3vkt12j20
https://github.com/jpuderer/AnimatedButton