Android VectorDrawable and SVG

Android VectorDrawable and SVG
VectorDrawable

Android L began to provide new APIsVectorDrawableYou can use resources of the SVG type, that is, vector graphs. The label in the xml file is The following is an example.

  
  
       android:height=256dp    android:width=256dp    
       android:viewportWidth=32    android:viewportHeight=32>  
     
   
  

In this way, a static vector graph can be defined and used as a normal image resource. If it is set to imageView, a heart shape is displayed. The heart-shaped display is abovepathThis tag,pathIt represents an element, and the drawn content ispathDataA long string of characters, which contains a series of commands drawn by SVG. operations such as moveTo, lineTo, and close can correspond to Path operations in Graphics. For details, see SVG path Ref, it will be briefly described later.
VectorDrawableDefines a static graph and a classAnimatedVectorDrawableTo make the vector image animated. Generally, three steps are required:

Define VectorDrawable

Define the AnimatedVectorDrawable and add an animation to the element of the preceding vector graph.

Define an animation File

Due to the characteristics of vector graphs,AnimatedVectorDawableIt can achieve some special effects. It can be used to animation pathData in VectorDrawable, from a gradient to another image, such as the toolbar icon in Material Design; it can be used to animation trimPathStart and trimPathEnd, you can get the drawing trajectory of the image.

SVG Path Data

The main Commands are as follows:

M: move to move draw point L: line to straight line Z: close C: cubic betiller cubic besell curve Q: quatratic betiller quadratic besell curve A: ellipse arc

Each Command is case-sensitive. uppercase indicates that the following parameters are absolute coordinates, while lowercase indicates relative coordinates. Parameters are separated by spaces or commas.

Command details:

M (x y) moves to x, y L (x y) and connects to x and y in a straight line. Also, the command H (x) is simplified for horizontal connections, and V (y) is vertically connected to Z, no parameter. Connection start and end points C (x1 y1 x2 y2 x y), control points x1, y1 x2, y2, end point x, y Q (x1 y1 x y), control points x1, y1, end x, y A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)
Rx ry elliptical radius
X-axis-rotation x axis rotation angle
When large-arc-flag is 0, it indicates taking a small radian, and 1 indicates taking a large radian.
Sweep-flag 0 is clockwise and 1 is clockwise.
There is an illustration:
Application

On github, we can see an example of a VectorDrawable application that implements a dynamic searchbar. The principle is to animation the attribute VectorDrawable trimPathStart. The initial design is as follows:

Reference www.bkjia.com