android5.0之Vector Drawables（矢量图）

以你之姓@ 2022-09-21 13:00 180阅读 0赞

## android5.0之Vector Drawables（矢量图） ##

### 效果图： ###

![这里写图片描述][20160619221609628]

### 在res/drawable/目录下创建heart.xml，文件内容： ###

<?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="256dp" android:height="256dp" android:viewportHeight="32" android:viewportWidth="32">
        <path android:fillColor="#f00" android:pathData="M20.5,9.5 c-1.955,0,-3.83,1.268,-4.5,3 c-0.67,-1.732,-2.547,-3,-4.5,-3 C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5 c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z" />
    
    </vector>

pathData有5个参数（为了便于阅读，我在不同的参数之间用空格分割，但是空格并不是必须的，注意逗号不是参数分割符）。第一个参数值是M100,100，表示将当前的绘制点移动到100, 100的位置（大写字母M表示我们使用的是绝对坐标，我们可以使用小写字母m来表示相对坐标，这个规则适用于所有参数）。这将当前的位置定位到了正方形绘制区域的左上角

### 指定控件使用 ###

--------------------

## VectorDrawable动画： ##

### 方式一： ###

### 效果图： ###

![这里写图片描述][20160619221718457]  
在res/drawable目录下创建一个vector\_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportWidth="500" android:viewportHeight="500" android:width="500px" android:height="500px">
    
        <group android:name="android">
            <group android:name="head_eyes">
                <path android:name="head" android:fillColor="#9FBF3B" android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" />
                <path android:name="left_eye" android:fillColor="#FFFFFF" android:pathData="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" />
                <path android:name="right_eye" android:fillColor="#FFFFFF" android:pathData="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" />
            </group>
            <group android:name="arms">
                <path android:name="left_arm" android:fillColor="#9FBF3B" android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" />
                <path android:name="right_arm" android:fillColor="#9FBF3B" android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" />
            </group>
            <path android:name="body" android:fillColor="#9FBF3B" android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" />
        </group>
    
    </vector>

在res/drawable目录下创建vector\_animator.xml

<?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="head_eyes" android:animation="@animator/shrug" />
    
        <target android:name="arms" android:animation="@animator/shrug" />
    
    </animated-vector>

在res/aninator目录下创建shrug.xml动画

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <objectAnimator android:propertyName="translateY" android:valueType="floatType" android:valueFrom="0" android:valueTo="-10" android:repeatMode="reverse" android:repeatCount="infinite" android:duration="250" />
    </set>

在控件中使用：

在java代码中执行动画：

public class MainActivity extends AppCompatActivity { 
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            final ImageView imageView = (ImageView) findViewById(R.id.iv);
    
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Drawable drawable = v.getBackground();
                    if (drawable instanceof Animatable) {
                        ((Animatable) drawable).start();
                    }
                }
            });
        }
    }

--------------------

### 方式二： ###

### 效果图： ###

![这里写图片描述][20160619221813874]  
创建另外一个vector\_drawable1.xml和vector\_animator1.xml。

vector\_drawable.xml

vector\_aniator.xml

<?xml version="1.0" encoding="utf-8"?>
    <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vector_drawable1">
        <target android:name="rotationGroup" android:animation="@animator/rotation" />
    
        <target android:name="path" android:animation="@animator/path" />
    </animated-vector>

**rotation.xml动画和path.xml动画**

rotation.xml

**path.xml**

在控件中使用：

在java代码中执行动画：

参考：[VectorDrawable-第一二三四章][VectorDrawable-]

[20160619221609628]: /images/20220721/72b3eadbfe1a4d4499bada9cc71c6349.png
[20160619221718457]: /images/20220721/a10189770b8942ff96af1376cd73bc9f.png
[20160619221813874]: /images/20220721/42afa7ca15d740c487f1b5df53b4ef16.png
[VectorDrawable-]: http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0201/2396.html