コード記述のみでベクターのマテリアルアイコン使えます。
drawable の作成が不要なので便利、変更もしやすいです。
Icon(
imageVector = Icons.Filled.Favorite,
contentDescription = null
)
Image(
imageVector = Icons.Filled.Favorite,
contentDescription = null
)
悪い点としては、
絵柄が49個しかない
絵柄を見ながら選択できない
というところでしょうか。
対応策を考えてみましょう。
絵柄が49個しかない
compose 公式のアイコン群(2500個以上)を追加できます。
implementation "androidx.compose.material:material-icons-extended:x.y.z"
エディタのサジェスチョンも大量に増えます。
ただ、少し読み込みが遅い。
そこらへんは、公式に注意点があります。
警告: material-icons-extended は大規模なライブラリであり、APK のサイズに影響する可能性があります。そのため、製品版ビルドでは R8/Proguard を使用し、使用されていないリソースを取り除くことを検討してください。また、サイズが大きいために、開発中は、プロジェクトのビルド時間と Android Studio のプレビューの読み込み時間が増加する可能性があります。
👉 Compose のリソース | Jetpack Compose | Android Developers
サイズにも注意する必要があるようです。
絵柄を見ながら選択できない
これがすごく困ります。
別で、WEB画面を開くか、Android Studio の Vector Asset Tool を開くかして、絵柄を見て選択して、その名前から、サジェスチョンさせる、くらいしか方法がない。なんかいい方法あったら教えなさいよ。
👉 Material Symbols and Icons - Google Fonts
将来的には、ライブプレビュー(今現在はリテラルのみ)ですばやく見れるようになるのかもしれません。
Android Studio Electric Eel 以降では、ライブ編集を使用して Compose の開発を高速化できます。ライブ編集は、リテラルのライブ編集をより強力にしたものです。この機能では、プレビューを自動的に更新し、コードの変更をエミュレータまたはデバイスにデプロイすることで、コンポーザブルの更新の影響をリアルタイムで確認できます。
👉 Compose のツール | Jetpack Compose | Android Developers
まとめ
将来性を見越して、ImageVector を使って
@Composable
fun LikeButton() {
Button(onClick = {}) {
Icon(
imageVector = Icons.Filled.ThumbUp,
contentDescription = null
)
Spacer(Modifier.size(ButtonDefaults.IconSpacing))
Text("Like")
}
}
と書きたいです!
ちなみに、これまでのように ベクター drawable を作成して、id で使う記述もできます。
Icon(
painter = painterResource(id = R.drawable.ic_baseline_favorite_24),
contentDescription = null
)
しかし、変更時に drawable 消し忘れでゴミが溜まりそう。
あと、
Icons.Default は Icons.Filled のエイリアス
だそうです。
👉 Android Jetpack Compose Icons doesn't contain some of the material icons - Stack Overflow
