【开源】vector-compat

vector-compat

• 项目地址： https://github.com/wnafee/vector-compat

  介绍：

  Lollipop中VectorDrawable和AnimatedVectorDrawable 的一个兼容库，目前支持api 14以上。

  运行效果：

使用说明：

关于Lollipop中的VectorDrawable和AnimatedVectorDrawable，请看这个专题中的几篇文章就可以了 VectorDrawable专题  。

vector-compat提供了一些实现类似drawer图标动画效果的必要工具（当点击之后动画过度到一个箭头）。任何两个图标之间的动画过度都可以在xml中定义，不需要java代码。该库已经处理好了过度动画的事情。而且因为图标是矢量的，所以可以任意缩放，满足所有尺寸需求。

 

该库在MorphButton类中提供了一些现成的过度动画效果，后续会增加更多的效果。目前有如下的过度动画：

 1.播放-暂停动画（bi-directional morph）

 2.箭头-汉堡（就是一个几根横线的图标）过度动画（bi-directional morph）

我的目的就是为开发者提供一些常用的动画效果。

 

添加依赖

1 2 3

dependencies {     compile 'com.wnafee:vector-compat:1.0.2' }

VectorDrawable和AnimatedVectorDrawable的在xml中定义的语法跟lollipop文档描述的一模一样，不过也有区别：

所有<vector> 或者<animated-vector>节点下的属性都需要书写两次，一个是android:namespace一个是本地namespace。如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:width="48dp"     android:height="48dp"     android:viewportHeight="24"     android:viewportWidth="24"       app:width="48dp"     app:height="48dp"     app:viewportHeight="24"     app:viewportWidth="24">     <group         android:name="rotationGroup"         android:pivotX="12.0"         android:pivotY="12.0"         android:rotation="180.0"           app:name="rotationGroup"         app:pivotX="12.0"         app:pivotY="12.0"         app:rotation="180.0">           <path             android:name="v"             android:fillColor="#000000"             android:pathData="@string/path_arrow"               app:fillColor="#000000"             app:name="v"             app:pathData="@string/path_arrow" />     </group> </vector>

 

所有anim 的属性也必须写两次，一个是android:namespace一个是本地namespace，如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"       android:duration="@integer/anim_duration"     android:propertyName="pathData"     android:valueFrom="@string/path_arrow"     android:valueTo="@string/path_drawer"     android:valueType="pathType"       app:duration="@integer/anim_duration"     app:propertyName="pathData"     app:valueFrom="@string/path_arrow"     app:valueTo="@string/path_drawer"     app:valueType="pathType" />

 

Inflation

VectorDrawable和AnimatedVectorDrawable可以通过两种方式inflate:

调用getDrawable()静态方法:

1 2 3 4 5 6 7 8

//This will only inflate a drawable with <vector> as the root element VectorDrawable.getDrawable(context, R.drawable.ic_arrow_vector);   //This will only inflate a drawable with <animated-vector> as the root element AnimatedVectorDrawable.getDrawable(context, R.drawable.ic_arrow_to_menu_animated_vector);   // This will inflate any drawable and will auto-fallback to the lollipop implementation on api 21+ devices ResourcesCompat.getDrawable(context, R.drawable.any_drawable);

直接在xml使用MorphButton：

1 2 3 4 5 6 7

<!-- Insert xmlns:app="http://schemas.android.com/apk/res-auto" in your root layout element --> <com.wnafee.vector.MorphButton     android:id="@+id/playPauseBtn"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     app:morphStartDrawable="@drawable/ic_pause_to_play"     app:morphEndDrawable="@drawable/ic_play_to_pause" />

 

MorphButton

MorphButton是一个具有两种状态的控件：MorphState.START和MorphState.END。morphStartDrawable属性和morphEndDrawable属性决定了哪种状态下使用什么drawable。可以是任意类型的drawable（比如：BitmapDrawable, ColorDrawable, VectorDrawable, AnimatedVectorDrawable等）。

点击Button可以让其在两个状态之间切换。另外buttonde状态也可以通过代码手动指定：

1 2 3 4 5

// transition with no animation myMorphButton.setState(MorphState.END)    // ... or transition with animation if drawable is Animatable myMorphButton.setState(MorphState.START, true)