Android Vector Drawable

このチュートリアルでは、Android Vector Drawable について説明します。さらに、Android アプリケーションに実装します。

多くの場合、描画可能な画像として PNG を使用します。 PNG 画像をさまざまな画面サイズに対応させるために、サイズと密度が異なる複数の PNG アセットを作成します。

ここで、Vector Drawable が私たちを救ってくれます! 彼らは PNG image.

A VectorDrawable は、点、線、曲線のセットとして XML ファイルで定義されたベクトルグラフィックで、関連する色情報とともに定義されています。彼らはあまりにも画面に迅速にレンダリングされます。 VectorDrawable は XML ファイルです。

Drawable フォルダに新しい Vector Asset を追加するには、新規作成｜Vector Asset.

これで、Material Design アイコンの Vector drawable を作成することができるようになりました。 VectorDrawable のコードは次のようになります:

これらは vector タグに設定されます。 android:viewportWidth と android:viewportHeight は描画可能な境界の幅と高さを設定する際に使用される。これらの寸法の範囲内で、ベクターの描画対象はキャンバスに描かれる。

pathは、描画対象を作成するタグである。パスの中では、線、曲線、円弧を作成し、境界線、背景色を設定する。

Vector Drawable は Android Lollipop 以降で導入されましたが、下位互換性のおかげで、以前のバージョンとも互換性があります。

パスコマンドは、アルファベットと座標から構成されています。絵を描くようにパスを作成することを想像してください。大文字のアルファベットは絶対位置を表します。小文字は相対的な位置を表します。

M – movetoコマンド。これは、ビュー上の指定された座標に鉛筆を移動させるという方法です。例 M 100 100 は、キャンバス上の 100, 100 の座標に想像上の鉛筆を移動します。
L – line to コマンド。現在の位置から指定された位置まで線を引くために使用されます。 M 100 100, L 120 100 は水平線を描きます。
z – これはパスを閉じるために使用します。最後の位置から最初の位置まで線を引きます。例 M 100 100 L 120 100 L 120 120 L 100 120 Z は正方形を作成します。
C – これはベジェ曲線を作成するために使用します。この後、3組の座標を指定する必要がある。 1番目と2番目は、初期点と終了点の間の2つの制御点になります。
A – 円弧を描くために使用されます。 aの後は、次のような形式で指定する必要がある。 (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ryとx軸は指定した2つの半径です。

groupタグ内にパスタグを設定すると、ベクターのパスを複数指定できます。

上記の知識を使ってAndroidアプリケーションでランダムに面白いVector Drawableを作って見ましょう。