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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图