矢量可绘制对象概览

试用 Compose 方式
Jetpack Compose 是推荐在 Android 设备上使用的界面工具包。了解如何在 Compose 中显示图形。
<ph type="x-smartling-placeholder"></ph> ImageVector →

要点

  • 矢量可绘制对象是一种矢量图形，在 XML 文件中定义为一组点、线和 及其相关的颜色信息。
  • 矢量可绘制对象是可缩放的，这意味着它们可以在不损失显示质量的情况下调整大小。 因此，此类尺寸是 Android 应用的理想选择，因为它有助于缩减应用的大小， APK 文件并提升性能。
  • 您可以在 Android Studio 中创建矢量可绘制对象，方法是右键点击 drawable 文件夹 然后选择“新建”>“Vector Asset。您还可以将 SVG 文件导入 Android Studio 中的矢量可绘制对象。
。 Google Bard 于 2023 年 7 月 24 日生成的摘要

简介

VectorDrawable 是定义的矢量图形。 作为一组点、线和曲线及其关联的 颜色信息。使用矢量可绘制对象的主要优势是图片 可伸缩性它可以在不降低显示质量的情况下进行缩放，这意味着 系统会针对不同的屏幕密度调整同一文件的大小，而不会损失图像质量。 这不仅能缩减 APK 文件大小，还能减少开发者维护工作。您还可以 通过使用多个 XML 文件而不是多个 XML 文件，将矢量图像用于动画 为每种显示分辨率提供不同的图片。

本页和下面的视频简要介绍了如何在 XML 中创建矢量可绘制对象。 Android Studio 还可以将 SVG 文件转换为矢量可绘制对象格式，如 具体方法是：使用添加多密度矢量图形。

Android 5.0（API 级别 21）是首个正式支持矢量可绘制对象的 VectorDrawable 和 AnimatedVectorDrawable，但 您可以用 Android 支持库来支持旧版本，该库提供了 VectorDrawableCompat 和 AnimatedVectorDrawableCompat 类。

关于 VectorDrawable 类

VectorDrawable 定义静态可绘制对象 对象。与 SVG 格式类似，每个矢量图形都被定义为一棵树 层次结构，由 path 和 group 对象组成。 每个 path 都包含对象轮廓的几何图形， group 包含转换的详细信息。所有路径均已绘制 它们在 XML 文件中的显示顺序相同。

图 1. 矢量可绘制资源的层次结构示例

矢量资源 studio 工具提供了一种向项目中添加矢量图形的简单方法 保存为 XML 文件

XML 示例

下面是一个渲染图像的示例 VectorDrawable XML 文件 例如电池处于充电模式 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

此 XML 会渲染以下图像：

关于 AnimatedVectorDrawable 类

AnimatedVectorDrawable 为矢量属性添加动画 图形。您可以将动画矢量图形定义为三个单独的 资源文件或定义整个可绘制对象的单个 XML 文件。让我们 请看一下这两种方法以更好地理解：多个 XML 文件和单个 XML 文件 XML 文件。

多个 XML 文件

通过使用此方法，您可以定义三个单独的 XML 文件：

多个 XML 文件示例

以下 XML 文件展示了矢量图形的动画。

  • VectorDrawable 的 XML 文件：vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • AnimatedVectorDrawable 的 XML 文件：avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
  • 在 AnimatedVectorDrawable 的 XML 中使用的 Animator XML 文件 文件：rotation.xml 和 path_morph.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

    <set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="3000"
      android:propertyName="pathData"
      android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
      android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
      android:valueType="pathType"/>
</set>

单个 XML 文件

通过这种方法，您可以将相关的 XML 文件合并为一个 XML 文件包格式。在构建应用时， aapt 标记会创建单独的资源并在 动画矢量。此方法需要使用 Build Tools 24 或更高版本，并且 是向后兼容的

单个 XML 文件示例 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

矢量可绘制对象向后兼容性解决方案

在搭载较低版本平台的设备上支持矢量可绘制对象和动画矢量可绘制对象 Android 5.0（API 级别 21）以上版本，或者使用 fillColor、fillType 和 低于 Android 7.0（API 级别 24）的 strokeColor 功能， VectorDrawableCompat 和AnimatedVectorDrawableCompat 可通过两个支持库获得： support-vector-drawable和animated-vector-drawable： 。

Android Studio 1.4 引入了对矢量的有限兼容性支持 通过在构建时生成 PNG 文件来制作可绘制对象。然而，矢量可绘制对象 和动画矢量可绘制对象支持 库既提供灵活性， 广泛的兼容性 — 它是一个支持库，因此可以将其用于所有 Android 平台版本可向后兼容至 Android 2.1（API 级别 7 或更高级别）。要配置您的 应用使用矢量支持库，请添加 vectorDrawables 元素添加到应用模块中的 build.gradle 文件中。

使用以下代码段配置 vectorDrawables 元素：

Groovy

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Groovy

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities = []
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

Kotlin

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities()
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters("--no-version-vectors")
    }
}

您可以使用 VectorDrawableCompat 和 AnimatedVectorDrawableCompat（所有） 。Android 的运作方式 会加载可绘制对象，而不是在 XML 中等接受可绘制对象 ID 的所有地方加载 文件，支持加载矢量可绘制对象。通过 android.support.v7.appcompat 个包裹添加了一个号码 功能，以轻松使用矢量可绘制对象。首先，当您使用 android.support.v7.appcompat 个软件包，其中包含 ImageView 或子类，例如 ImageButton 和 FloatingActionButton，您可以 使用新的 app:srcCompat 属性引用矢量可绘制对象 以及 android:src 可用的任何其他可绘制对象： 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

如需在运行时更改可绘制对象，您可以使用 setImageResource() 方法。目前使用的是AppCompat app:srcCompat是最可靠的 矢量可绘制对象导入您的应用中。

支持库 25.4.0 及更高版本支持以下功能：

  • 路径变形（PathType 评估程序），用于变形 转换为另一条路径
  • 路径插值：用于定义 而不是由系统定义的 插值器，如 LinearInterpolator。

支持库 26.0.0-beta1 及更高版本支持以下功能：

  • 沿路径移动：几何图形对象可以四处移动， 在动画中沿着任意路径移动。

使用支持库的多个 XML 文件的示例

以下 XML 文件演示了使用多个 XML 文件的方法 为矢量图形添加动画效果。

  • VectorDrawable 的 XML 文件：vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • AnimatedVectorDrawable 的 XML 文件：avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
</animated-vector>
  • 用于 AnimatedVectorDrawable 的 XML 的 Animator XML 文件 文件：rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

单个 XML 文件

以下 XML 文件演示了使用单个 XML 文件的方法 为矢量图形添加动画效果。在构建应用时， aapt 标记会创建单独的资源并在 动画矢量。此方法需要使用 Build Tools 24 或更高版本，并且 是向后兼容的

使用支持库的单个 XML 文件的示例 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:rotation="45.0" >
                <path
                    android:name="vectorPath"
                    android:fillColor="#000000"
                    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotationGroup">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>