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

发表评论

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