はじめに
Android 5.0から vector
を使ったリソースを扱えるようになりました。
vector型のdrawableを使用することでデザインを損なうことなく画像を拡張でき、画面密度ごとに画像を用意しなくてもよくなります!
VectorDrawable
ベクター型ドローアブルを作成する
そしてAndroidStudio1.4で .svg から VectorDrawable を生成する VectorAssets
がサポートされ、vectorが簡単に扱えるようになりました。
実際に業務で導入してみたのでこちらにまとめてみます。
(まだ使い始めたばかりのため誤っている箇所があるかもしれません、ご了承ください。)
手順
- 使いたい画像を
.svg
で書き出す - svg で書かれたファイルを Vector Asset Studio を使って vector に変換する
- vector に変換したファイルを res/drawable に .xml として格納する(Vector Asset Studio を使用した場合は自動で格納されます)
- 必要に応じて中身のパラメータを変更する
- そのまま @drawable/hogehoge 画像として使う
まずは事前準備
build.gradleに
classpath 'com.android.tools.build:gradle:1.4.0-beta3
classpath 'com.github.ben-manes:gradle-versions-plugin:0.11.3
を追加します。
Vector Asset Studio を使って svg -> vector 変換
プロジェクトの res/drawable
で New - Vector Asset
を選択します。
すると Vector Asset Studio
が表示されるので、.svg で書きだした画像を選択します。
公式のMaterialIcons一覧から読み出すこともできます。
そして必要に応じて下記のパラメータを変更します。(Override default size... はMaterialDesign用にサイズを最適化してくれるようです。)
各パラメータの説明
android:width, android:height
画像を表示させるサイズ(dp)を指定します。
画像をImageViewなどで表示させる際、このサイズより大きくしたり小さくしたりするとジャギったりぼやけたりします。
基本的には 画像px = 表示dp で扱うようです。(公式のMaterialIconsもそうなっています)android:viewportWidth, android:viewportHeight
実際の画像サイズ(px)を指定します。
書きだした画像のサイズを指定してください。android:fillColor
pathの色を指定します。
ここを変更するだけでpath全体の色が変わります。android:pathData
画像を描画するためのpathです。
画像px = 表示dp でもそうでなくても特に問題なく表示できます。
例えば48pxで書きだした画像を32dpとして画面に表示させても表示に違和感がでません。
同じpathdataの画像でも極端でなければwidth, heightをいじって様々なサイズに流用しても大丈夫そうです。
その他
xxhdpi基準でデザインする場合
- vectorに指定する dp を
px / 3
にする -
サイズ / 3
で書き出してもらい、開発側でサイズ指定する際は dp = px にする
のどちらかがよさそうです。