【Jetpack Compose】Icon() や Image() で ImageVector をより便利に使う

コード記述のみでベクターのマテリアルアイコン使えます。

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"

エディタのサジェスチョンも大量に増えます。

androidx.compose.material:material-icons-extended

ただ、少し読み込みが遅い。

そこらへんは、公式に注意点があります。

警告: material-icons-extended は大規模なライブラリであり、APK のサイズに影響する可能性があります。そのため、製品版ビルドでは R8/Proguard を使用し、使用されていないリソースを取り除くことを検討してください。また、サイズが大きいために、開発中は、プロジェクトのビルド時間と Android Studio のプレビューの読み込み時間が増加する可能性があります。

👉 Compose のリソース  |  Jetpack Compose  |  Android Developers hatena-bookmark

サイズにも注意する必要があるようです。

 

絵柄を見ながら選択できない

これがすごく困ります。

別で、WEB画面を開くか、Android Studio の Vector Asset Tool を開くかして、絵柄を見て選択して、その名前から、サジェスチョンさせる、くらいしか方法がない。なんかいい方法あったら教えなさいよ。

Material Symbols and Icons - Google Fonts

👉 Material Symbols and Icons - Google Fonts hatena-bookmark

 Vector Asset Tool



将来的には、ライブプレビュー(今現在はリテラルのみ)ですばやく見れるようになるのかもしれません。

Android Studio Electric Eel 以降では、ライブ編集を使用して Compose の開発を高速化できます。ライブ編集は、リテラルのライブ編集をより強力にしたものです。この機能では、プレビューを自動的に更新し、コードの変更をエミュレータまたはデバイスにデプロイすることで、コンポーザブルの更新の影響をリアルタイムで確認できます。

 

👉 Compose のツール  |  Jetpack Compose  |  Android Developers hatena-bookmark

 

まとめ

将来性を見越して、ImageVector を使って


@Composable
fun LikeButton() {
  Button(onClick = {}) {
    Icon(
      imageVector = Icons.Filled.ThumbUp,
      contentDescription = null
    )
    Spacer(Modifier.size(ButtonDefaults.IconSpacing))
    Text("Like")
  }
}

と書きたいです!

Icons.Filled.ThumbUp

ちなみに、これまでのように ベクター 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 hatena-bookmark

👉 【Jetpack Compose】Compose Settings で数分で設定画面を作る hatena-bookmark


【Dagger-Hilt】「androidx.hilt:hilt-lifecycle-viewmodel」を使ってはならない Dagger 2.34+

The Hilt Android Gradle plugin is applied but no com.google.dagger:hilt-android dependency was found.

The Hilt Android Gradle plugin is applied but no com.google.dagger:hilt-android dependency was found.

すいません、またハマっちゃいました、2回目です。

原因は以下なのですが。

androidx.hilt:hilt-lifecycle-viewmodel artifacts were deprecated in the Dagger 2.34 release in favor of native Hilt API.

👉 ComponentProcessingStep was unable to process '*Application_HiltComponents.SingletonC' · Issue #3257 · google/dagger hatena-bookmark

Migration steps:
...
4. Remove the old androidx.hilt:hilt-lifecycle-viewmodel dependency from your build.gradle file

👉 Release Dagger 2.34 · google/dagger hatena-bookmark

以下があると、ビルドでコケます。


implementation 'androidx.hilt:hilt-lifecycle-viewmodel:x.y.z'

知ってます、みんなハマっています。

 

対応方法

これでいけます。


dependencies {

  //implementation 'androidx.hilt:hilt-lifecycle-viewmodel:1.0.0-alpha03'
  //kapt 'androidx.hilt:hilt-compiler:1.0.0'

  implementation 'com.google.dagger:hilt-android:2.42'
  kapt 'com.google.dagger:hilt-compiler:2.42'

androidx.hilt.* だけでは、ビルドできないか、インストール→起動後に落ちます。まだあやしい。

androidx.hilt:hilt-lifecycle-viewmodel

 

なぜ、ハマるのか

公式リファレンスに記述があるんですよね、この記述。

Hilt と Jetpack の統合  |  Android デベロッパー  |  Android Developers

👉 Hilt と Jetpack の統合  |  Android デベロッパー  |  Android Developers hatena-bookmark

Hilt に隠れて Dagger のバージョンが見えづらくなってることにも原因があるように思います。

👉 Error: ComponentProcessingStep was unable to process 'AppApplication_HiltComponents.SingletonC' because 'DefaultActivityViewModelFactory' could not be resolved. hatena-bookmark


@Composable Scaffold で This material API is experimental and is likely to change or to be removed in the future.

Jetpack Compose で Material3 を使うと、


This material API is experimental and is likely to change or to be removed in the future.

で、ビルド通らず。

AndroidStudio が提案してくる対応としては以下。

@Composable Scaffold で This material API is experimental and is likely to change or to be removed in the future.

アノテーションを付けるのもアレですね。

gradle 側から一括無視しておきましょう。


kotlinOptions {
  allWarningsAsErrors = false
  freeCompilerArgs += [
      "-Xopt-in=kotlin.RequiresOptIn",
      "-Xopt-in=kotlinx.coroutines.ExperimentalCoroutinesApi",
      "-Xopt-in=kotlinx.coroutines.FlowPreview",
      "-Xopt-in=kotlinx.serialization.ExperimentalSerializationApi",
      "-Xopt-in=kotlin.Experimental"
  ]
}

👉 Opt-in requirement marker annotation on override requires the same marker on base declaration hatena-bookmark

少し将来に向けて修正。


'-Xopt-in' → '-opt-in'

👉 '-Xopt-in' is deprecated and will be removed in a future release, please use -opt-in instead hatena-bookmark

よって、今回のビルドエラーについてのみで言えば、以下で避けるのが良さげです。


freeCompilerArgs += '-opt-in=androidx.compose.material3.ExperimentalMaterial3Api'

この記述をどこに書くか。

対象が複数になるのを考慮して


freeCompilerArgs += [
    '-opt-in=androidx.compose.material3.ExperimentalMaterial3Api',
]

としておきます。

 

build.gradle (app) allprojects/subprojects {} 内


allprojects { // subproject {
  tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {

    kotlinOptions {
      allWarningsAsErrors = false
      freeCompilerArgs += [
          '-opt-in=androidx.compose.material3.ExperimentalMaterial3Api',
      ]
    }

  }
}

 

build.gradle (module) android {} 内


android {

  kotlinOptions {
    jvmTarget = JavaVersion.VERSION_11.toString()

    allWarningsAsErrors = false
    freeCompilerArgs += [
        '-opt-in=androidx.compose.material3.ExperimentalMaterial3Api',
    ]

  }

 

build.gradle (module) の最後


dependencies {
  // ...
  debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.9.1'
}

tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {

  kotlinOptions {
    allWarningsAsErrors = false
    freeCompilerArgs += [
        '-opt-in=androidx.compose.material3.ExperimentalMaterial3Api',
    ]
  }

}

 

まとめ

プロジェクトの構成に合わせて、多少の拡張性を考慮しながら設定する必要があるでしょう。

👉 Opt-in requirements | Kotlin hatena-bookmark
👉 tachiyomi/build.gradle.kts at master · tachiyomiorg/tachiyomi hatena-bookmark