ベクター型ドローアブルの概要

Compose を試す
Jetpack Compose は Android で推奨される UI ツールキットです。Compose でグラフィックを表示する方法を学習します。

要点

  • ベクター型ドローアブルは、関連する色情報とともに点、線、曲線のセットとして XML ファイルで定義されたベクター グラフィックです。
  • ベクター型ドローアブルはスケーラブルです。つまり、表示品質を損なうことなくサイズ変更が可能です。そのため、APK ファイルのサイズを削減してパフォーマンスを向上させることができるため、Android アプリでの使用に最適です。
  • Android Studio でベクター型ドローアブルを作成するには、プロジェクト内のドローアブル フォルダを右クリックして、[New] > [Vector Asset] を選択します。また、SVG ファイルをベクター型ドローアブルとして Android Studio にインポートすることもできます。
2023 年 7 月 24 日に Google Bard が生成した要約

はじめに

VectorDrawable はベクター グラフィックであり、関連する色情報とともに点、線、曲線のセットとして XML ファイル内で定義されます。ベクター型ドローアブルを使用する主な利点は、画像の拡張性です。ディスプレイ品質を損なうことなくスケーリングできます。つまり、画質を損なうことなく、同じファイルがさまざまな画面密度に合わせてサイズ変更されます。これにより、APK ファイルが小さくなり、デベロッパーによる保守が少なくなります。また、表示解像度ごとに複数の画像を使用するのではなく、複数の XML ファイルを使用してアニメーションにベクター画像を使用することもできます。

このページと以下の動画では、XML でベクター型ドローアブルを作成する方法の概要について説明しています。Android Studio では、複数密度のベクター グラフィックの追加で説明しているように、SVG ファイルをベクター型ドローアブル形式に変換することもできます。

VectorDrawableAnimatedVectorDrawable でベクター型ドローアブルを正式にサポートした最初のバージョンは Android 5.0(API レベル 21)でしたが、それより古いバージョンも、VectorDrawableCompat クラスと AnimatedVectorDrawableCompat クラスを提供する Android サポート ライブラリでサポートできます。

VectorDrawable クラスについて

VectorDrawable は静的ドローアブル オブジェクトを定義します。SVG 形式と同様に、各ベクター グラフィックは、path オブジェクトと group オブジェクトで構成されるツリー階層として定義されます。各 path にはオブジェクトの輪郭のジオメトリが含まれ、group には変換の詳細が含まれます。すべてのパスは、XML ファイルに表示される順序と同じ順序で描画されます。

図 1. ベクター型ドローアブル アセットの階層の例

Vector Asset 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 は、ベクター グラフィックのプロパティにアニメーションを追加します。アニメーション化ベクター グラフィックは、3 つの個別のリソース ファイルとして定義することも、ドローアブル全体を定義する 1 つの XML ファイルとして定義することもできます。理解を深めるために、複数の XML ファイル単一の XML ファイルの両方のアプローチを見てみましょう。

複数の XML ファイル

この方法を使用すると、3 つの別個の XML ファイルを定義できます。

  • VectorDrawable XML ファイル。
  • ターゲット VectorDrawable、アニメーション化するターゲットのパスとグループ、プロパティ、ObjectAnimator オブジェクトまたは AnimatorSet オブジェクトとして定義されたアニメーションを定義する AnimatedVectorDrawable 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 ファイルで使用されるアニメーター XML ファイル: rotation.xmlpath_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 バンドル形式で 1 つの 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)より前のプラットフォーム バージョンを搭載したデバイスでベクター型ドローアブルとアニメーション化ベクター型ドローアブルをサポートする場合、または Android 7.0(API レベル 24)より前の fillColorfillTypestrokeColor 機能を使用するには、VectorDrawableCompatAnimatedVectorDrawableCompat が 2 つのサポート ライブラリ(それぞれ support-vector-drawableanimated-vector-drawable)から利用できます。

Android Studio 1.4 では、ビルド時に PNG ファイルを生成することで、ベクター型ドローアブルの限定的な互換性サポートが導入されました。ただし、ベクター型ドローアブルとアニメーション化ベクター型ドローアブルのサポート ライブラリは、柔軟性と幅広い互換性を備えています。サポート ライブラリであるため、Android 2.1(API レベル 7 以降)のすべての Android プラットフォーム バージョンで使用できます。ベクター サポート ライブラリを使用するようにアプリを構成するには、アプリ モジュールの build.gradle ファイルに vectorDrawables 要素を追加します。

次のコード スニペットを使用して、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")
    }
}

VectorDrawableCompatAnimatedVectorDrawableCompat は、Android 4.0(API レベル 14)以降を搭載しているすべてのデバイスで使用できます。Android がドローアブルを読み込む方法は、XML ファイルなどのドローアブル ID を受け入れるすべての場所がベクター型ドローアブルの読み込みをサポートしているわけではありません。android.support.v7.appcompat パッケージには、ベクター型ドローアブルを簡単に使用できるようにするためのさまざまな機能が追加されています。まず、ImageView または ImageButtonFloatingActionButton などのサブクラスとともに android.support.v7.appcompat パッケージを使用する場合、新しい app:srcCompat 属性を使用して、ベクター型ドローアブルや android:src で使用可能な他のドローアブルを参照できます。

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

ドローアブルを実行時に変更するには、以前と同様に setImageResource() メソッドを使用します。ベクター型ドローアブルをアプリに統合する最も確実な方法は、AppCompatapp: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 ファイルで使用されるアニメーター 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>