How to play the Android vector graph vectordrawable_android

Starting with 5.0 (API level 21), Android is starting to support vector graphics. What is the vector map and the vector map has any advantages and disadvantages is not covered in this article, the specific reference vector map encyclopedia. But here's the advantage:

Holds the least information, the file size is smaller than the bitmap, and the file size is independent of the size of the object
arbitrary magnification of vector graphics will not lose details or affect sharpness, because vector graphics are not resolution-independent.

From the above two advantages, the use of vector graphs in the project can at least reduce the size of our APK package, and can provide great convenience when the screen is fit, because the vector graph is resolution-independent.

As I said before, vector maps are not supported until 21. So what if I want to go down a compatible change? This problem should be put in the past, I would say GitHub under the answer you want. But now I wouldn't say that, because Google upgraded the support library some time ago, and the official is backwards compatible with the use of vector graphics. To ask which version is compatible, I tell you that vector graphics are compatible to API7, and vector graphics animations are compatible to API11 (whether you have already satisfied your use).

OK, let's talk about how to use vector graphs in a project.

First, the use of vectordrawable
According to the official view, to use the vector map on the lower version, you need to introduce a new compatible library support-vector-drawable in the project, and the version of the APPCOMPAT-V7 library will be in 23.2.0+ (this 23.2.1 has already been published). You will also need to modify the Gradle configuration, and do not allow gradle to generate a PNG file for you in a low version (API21 below) for you at the time of construction, because the Android studio1.4 supports vector graphics.

Modify the APPCOMPAT-V7 version
compile ' com.android.support:appcompat-v7:23.2.0 '
Note: Here I only introduced the 23.2.0 version of the APPCOMPAT-V7 library, synchronized Gradle after the compilation of support-vector-drawable-23.2.0 and animated-vector-drawable-23.2.0 these two libraries.

modifying Gradle configuration Files
If your Gradle plugin version is below 2.0, you should modify this

Android {
 Defaultconfig {
  //Do not allow Gradle to automatically generate a PNG map with different screen resolutions
  generateddensities = []
 }

 aaptoptions {
  additionalparameters "--no-version-vectors"
 }
}

If your Gradle plugin version is 2.0+, you should modify this

Android {
 Defaultconfig {
  vectordrawables.usesupportlibrary = True
 }
}

By modifying these steps, you can use vector maps in your project. So, let's officially say how to use it.

Android Studio has provided us with a vector Asset studio tool that allows me to generate vectors from material icon and SVG files. The specific use can refer to the official documentation, here is not much to say.

The android vector diagram is in the form of an XML document, as follows defines a vector map that contains data about the vector graph.

<!--res/drawable/heart.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.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,8zm15.5,11c0.83,0 1.5,-0.67 1.5,-1.5s16.33,8 15.5,8 14,8.67 14,9.5s0.67,1.5 1.5,1.5zM8.5,11c0.83,0 1.5,- 0.67 1.5,-1.5s9.33,8 8.5,8 7,8.67 7,9.5 7.67,11 8.5,11zm12,17.5c2.33,0 4.31,-1.46 5.11,-3.5l6.89,14c0.8,2.04 2.78,3.5 5.11,3.5z "/>
</vector>

This is what I generated by material icon, which corresponds to the class vectordrawable in Android, the Vectordrawablecompat in the Compatibility Pack.

With the vector graphic defined, we can use it as a normal graphic. However, there are a few points to note:

* Use the Android:src property where you want to replace it with the App:srccompat property

 <?xml version= "1.0" encoding= "Utf-8"?> <relativelayout "xmlns:android=" /schemas.android.com/apk/res/android "xmlns:tools=" Http://schemas.android.com/tools "xmlns:app=" http://
  Schemas.android.com/apk/res-auto "android:layout_width=" match_parent "android:layout_height=" Match_parent "
  android:paddingbottom= "@dimen/activity_vertical_margin" android:paddingleft= "@dimen/activity_horizontal_margin"
  android:paddingright= "@dimen/activity_horizontal_margin" android:paddingtop= "@dimen/activity_vertical_margin"
    tools:context= "Com.damon.vectordrawabledemo.MainActivity" > <imageview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" app:srccompat= "@drawable/ic_mood_black_24dp"/> </RelativeLayout> 
    

* When using vector maps in non-src properties, vector maps need to be used in drawable containers (e.g. statelistdrawable, insetdrawable, layerdrawable, Levellistdrawable, and rotatedrawable) wrapped up to use. Otherwise, the error will be in the case of a lower version.
The use of the code is no different from the normal PNG image, and the same API is invoked.

So we put the vector map into our project, I put a few pictures to compare the next vector and PNG map of the different, in order to show the advantages of the vector map.

The first is PNG's original and enlarged image

The second is the original and enlarged image of the vector graph.

Contrast at a glance. And the size of the XML of the vector graph is only 655 bytes, and the size of PNG with different resolution adds up to several K. Vector maps only need to maintain one XML, while PNG needs to maintain multiple graphics resources.

Vector map XML file supported tags and attributes can refer to here, including the common fill, stroke, coloring and so on.

Second, the use of vector graphics to make animation
The 23.2 Support library also emits a compatible version of the vector graph animation animatedvectordrawablecompat, the corresponding compatibility package is Animated-vector-drawable,xml tag is animated-vector. Animatedvectordrawablecompat can be animated in the form of attributes to drive vectordrawable animation, in particular, three steps need to go:

* Define a VECTORDRAWABLECOMPAT XML

<vector xmlns:android= "Http://schemas.android.com/apk/res/android" <!--the size of the picture itself--> android:width= "500px" android:height= "500px" <!--canvas size--> android:viewportheight= "android:viewportwidth=" > <!-- To combine multiple path or subgroup, group provides properties such as rotation, scaling, and panning. These attributes are worth changing and will reflect on the path and subgroup elements within it--> <group android:scalex= "5.0" android:scaley= "5.0" > <!--here gro Up and path have a Name property that is used to specify the object to be driven by animation when animating--> <path android:name= "star" Android:pathdata= "M 50.0,90.0 L 82.9193546357,27.2774101308 l 12.5993502926,35.8158045183 l 59.5726265715,88.837672697 L 76.5249063296,20.0595700732 l 10.2916450361,45.1785327898 L 68.5889268818,85.4182410261 L 68.5889268818,14.5817589739 l 10.2916450361,54.8214672102 l 76.5249063296,79.9404299268 L 59.5726265715,11.162327303 L 12.5993502926,64.1841954817 l 82.9193546357,72.7225898692 l 50.0,10.0 l 17.0806453643,72.7225898692 L 87.4006497074,64.1841954817 l 40.4273734285,11.162327303 L 23.4750936704,79.9404299268 l 89.7083549639,54.8214672102 l 31.4110731182,14.5817589739 l 31.4110731182,85.4182410261 L 89.7083549639,45.1785327898 l 23.4750936704,20.0595700732 l 40.4273734285,88.837672697 L 87.4006497074,35.8158045183 L 17.0806453643,27.2774101308 L 50.0,90.0z "android:strokecolor=" @color/coloraccent "android:strokewidth=" 2 "
 > </group> </vector>

* Define XML for Animatedvectordrawablecompat

<?xml version= "1.0" encoding= "Utf-8"?> <animated-vector xmlns:android=
"http://schemas.android.com/" Apk/res/android "
  android:drawable=" @drawable/vector_drawable ">
  <target
    android:name=" Star "
    android:animation= "@animator/star_anim"/>
</animated-vector>

As you can see, the root element is animated-vector and has a required property android:drawable to specify the vector graph object to drive. Child label target is used to specify the name of the group and path within the vector graph to be driven (this corresponds to the group and path names in the Vectordrawablecompat XML) On the other hand, specify which property animation to use to drive the properties of group and path to change to produce animation effects.

* Create property Animation
Animations that drive Trimpathstart and Strokecolor properties

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <objectanimator
    android:duration=" 5000 "
    android:propertyname=" Trimpathstart
    " Android:repeatcount= "Infinite"
    android:repeatmode= "restart"
    android:valuefrom= "1"
    android:valueto= "0"/>
  <objectanimator
    android:duration= "5000"
    android:propertyname= "Strokecolor"
    Android:repeatcount= "Infinite"
    android:repeatmode= "restart"
    android:valuefrom= "@color/coloraccent"
    android:valueto= "@color/colorprimarydark"/>
</set>

In this way, the preparation work is done. We can animate it using vector graphics. Change the src of ImageView to vector graph animation

 <imageview
    android:id= "@+id/image_view"
    android:layout_width= "200DP"
    android:layout_height= " 200DP "
    app:srccompat=" @drawable/vector_drawable_anim "/>

To start an animation in Java code

 ImageView ImageView = (imageview) Findviewbyid (R.id.image_view);
drawable drawable = imageview.getdrawable ();
Animatedvectordrawablecompat implements the Animatable interface
if (drawable instanceof animatable) {
  ((animatable) drawable) . Start ();
}

This realizes the vector graph animation, looks at the effect picture.

OK, so much for the use of vector graphs and vector graphics animations. Specific details and other attributes in the XML what's the use of the official document, you can try it yourself will be very clear.

Wen/damonzh (author of Jane book)
Original link: http://www.jianshu.com/p/456df1434739