要点
- ベクター型ドローアブルとは、関連する色情報とともに点、線、曲線のセットとして XML ファイルで定義されるベクター グラフィックです。
- ベクター型ドローアブルは拡張性があるため、表示品質を損なうことなくサイズを変更できます。 APK ファイルのサイズを小さくしてパフォーマンスを向上させることができるため、Android アプリでの使用に最適です。
- Android Studio でベクター型ドローアブルを作成するには、プロジェクト内のドローアブル フォルダを右クリックし、[New] > [Vector Asset] を選択します。また、SVG ファイルをベクター型ドローアブルとして Android Studio としてインポートすることもできます。
はじめに
VectorDrawable
はベクター グラフィックで、点、線、曲線のセットおよび関連する色情報として XML ファイルで定義されます。ベクター型ドローアブルを使用する主な利点は、画像のスケーラビリティです。画質を損なうことなく拡大縮小できます。つまり、画質を損なうことなく、同じファイルをさまざまな画面密度に合わせてサイズ変更できます。
これにより、APK ファイルが小さくなり、デベロッパーによる保守が少なくなります。また、ディスプレイ解像度ごとに複数の画像を使用するのではなく、複数の XML ファイルを使用して、ベクター画像をアニメーションに使用することもできます。
このページと以下の動画では、XML でベクター型ドローアブルを作成する方法の概要を説明します。Android Studio では、多密度のベクター グラフィックを追加するで説明しているように、SVG ファイルをベクター型ドローアブル形式に変換することもできます。
Android 5.0(API レベル 21)は、VectorDrawable
と AnimatedVectorDrawable
によるベクター型ドローアブルを正式にサポートした最初のバージョンですが、VectorDrawableCompat
クラスと AnimatedVectorDrawableCompat
クラスを提供する Android サポート ライブラリを使用することで、以前のバージョンをサポートできます。
VectorDrawable クラスについて
VectorDrawable
は静的ドローアブル オブジェクトを定義します。SVG 形式と同様に、各ベクター グラフィックは、path
オブジェクトと group
オブジェクトで構成されるツリー階層として定義されます。各 path
にはオブジェクトのアウトラインのジオメトリが含まれ、group
には変換の詳細が含まれます。すべてのパスは、XML ファイル内で表示される順序で描画されます。
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 つの個別のリソース ファイル、またはドローアブル全体を定義する単一の 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.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 Bundle 形式を使用して 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)より前の fillColor
、fillType
、strokeColor
機能を使用する場合、VectorDrawableCompat
および AnimatedVectorDrawableCompat
は 2 つのサポート ライブラリ(support-vector-drawable
と animated-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") } }
VectorDrawableCompat
と AnimatedVectorDrawableCompat
は、Android 4.0(API レベル 14)以降を搭載しているすべてのデバイスで使用できます。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 などのシステム定義の interpolator ではなく、柔軟な補間器(パスとして表される)を定義するために使用されます。
サポート ライブラリ 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>