droidgirls.connpass.com こちらに参加してきたので感想などなど

VectorDrawable触ったことなかったけど、講師のこにふぁーさんの解説と用意してきてくださった課題のおかげで短い時間でさっくり動かすことができた。自分の整理用に書く

こちら当日のありがたいスライド（というか全てはここに書いてある） speakerdeck.com

VectorDrawableについてざっくり

VectorDrawableを使うとapkサイズが削減できる

SVG（Scalable Vector Graphics）を使っているのでpngなどのビットマップデータと違い、拡大しても画像が荒くなったりせず綺麗 → 今まで端末サイズ毎に用意してきたpngファイルを一つにできる。

Lollipop(API Level 21)未満もsupportされた

※Support Library23.2〜
但しanimatedVectorDrawableのmorphing animationは未だsupportされていない
（ただLollipop未満でも同じように動かせる方法もあるらしいとのこと）

逆にVectorDrawable使うべきじゃない時

大きい画像の場合（googleさん規定では200 × 200 より大きい画像）
また色や形状が複雑な画像の場合は初回読み込みが遅くなる

VectorDrawable使い方

svgファイル取得

一般的なデザインツール（sketchやadobe製品）なら大体svg吐き出しツールがある
GoogleのMaterial Designはすでに用意されてるものがある → https://design.google.com/icons

svgからXMLを作成

Android Studioの New > Vector Asset でXML作成してdrawableに吐き出してくれる
サイズは（きっと）小さければ小さいほど良いらしい

XMLをImageViewに設定

できたものをImageViewのandroid:srcをapp:srcCompatに変えて指定
srcから設定するときはsetImageResource()を使う
toolbarのメニューiconでも使用できる
※TextView内で画像指定するときは別途selectorファイルを作ってそれを指定する
- その他詳細やGradleの設定などはこちらを VectorDrawable対応まとめ - Qiita

AnimatedVectorDrawable使い方

XMLファイルを用意

① vector drawable
② animator
③ AnimatedVectorDrawable：①を@drawableに指定、②をtargetの@animatorに指定
※ ①と③のnameを同じものにしなくてはいけない★

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportHeight="48.0"
    android:viewportWidth="48.0">
    <path
        android:name="pause"★
        android:fillColor="#000000"
        android:pathData="@string/path_pause" />
</vector>

<animated-vector  
   android:drawable="@drawable/ic_pause_48dp">
    <target
        android:name="pause"★
        android:animation="@animator/anim_pause_to_play" />
</animated-vector>

※ 新しい書き方ではXMLは③のみでOKになった

srcにて③をImageViewに設定しstart()

Drawable drawable = imageView.getContext().getDrawable(③);
imageView.setImageDrawable(drawable);
Animatable animatable = (Animatable) drawable;
animatable.start();

toolなど

AnimatedVectorDrawableを生成してくれる神ツール
AndroidIconAnimator ：https://romannurik.github.io/AndroidIconAnimator/
pathなのでぱっと見形がわからないVectorDrawableをPullRequest上でプレビューしてくれる Chrome Extension
https://github.com/jmatsu/vector-drawable-previewer

詰まったところ

AnimatedVectorDrawableの③の書き方をすると Element animated-vector doesn't have required attribute android:drwableだのattribute is missing the android namespace prefixだのエラーが出る
→ 現状のAndroid studio（ver 2.2.3）の対応が追いついてないだけのようで、エラーは出るがこれで動く
5未満の端末でTextViewのandroid:drawableLeftで落ちる
→ StateListDrawableを作成してその中でVectorDrawableを指定してあげる必要がある（※参考）
→ 使用するActivityで以下の呼び出しが必要

static {
 AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}

感想

Lollipop未満もサポートされたってことでアイコン系はVectorDrawableに置き換えてどれだけサイズ減るか試してみたい
vectorファイルの命名がgoogleサンプルのic_〜〜_[size]dp.xmlが一般的？みたいだけどなんか気持ち悪い、皆さんどうしてるんだろう
AndroidIconAnimatorでファイル作ってみようとしたけど簡単なことしかできなかったムズイ(；・∀・) 出来たら書きますっ
pathの仕組みの解説をこにふぁーさんが「ね、簡単でしょ」的にしてたけど難しかった😭
こちらの用意してくださったサンプルコードが入門向けにとてもわかりやすかったです
こにふぁーさんありがとうございました！！！

何か間違ってたらご指摘お願いしますm(__)m

KITCHEN DRINKER

主にAndroid開発メモとか

VectorDrawableをさっくり触った話