Tutorial: Jetpack Compose basics メモ

Jetpack Composeを学習するために Jetpack Compose Pathway を進めてている。そこでの学びや感想をメモとして残しておく。

今回は Tutorial: Jetpack Compose basics を終わらせた。

useIRは無くても動く

Android Studioの「New Project」から「Empty Compose Activity」を選択し作成したプロジェクトの build.gradle に次のような記述があった。

build.gradle

android {
    kotlinOptions {
        jvmTarget = '1.8'
        useIR = true
    }
    ...
 }
 ...

この useIR は設定しなくても動作はした。調べてみたところKMMなどのマルチプラットフォーム関係の設定のようだった。実際のプロダクトにJetpack Composeを導入する場合には必須ではなさそう。

ひとつのComposableで複数のPreviewができる

次のようにひとつのComposableに複数のPreviewを設定して同時に確認ができる。＠Preview で利用できるパラメータは、@Preview のリファレンスを参照すると良い。

複数のComposableを同時にPreviewできる

また、複数のComposableのPreviewを同じファイル内に記述した場合は、そのPreviewも同時に確認することができる。これは、Composableを記述するファイルの分割ルールなどを定めるうえでの目安になりそう。

rememberを利用するときのimport

「4: Lists and animations」の「Animate messages while expanding」で remember を利用する箇所がある。ここで次のようなエラーが表示された。

どうやら getValue と setValue が定義されていないとのことなので調べてみたら、それぞれimportしてあげれば良いとのことだった。ただし、Android Studioでフォーマットかけたら androidx.compose.runtime.* になったので迷ったらこれを記述すれば良さそう。

- import androidx.compose.runtime.Composable
- import androidx.compose.runtime.remember
- import androidx.compose.runtime.setValue
- import androidx.compose.runtime.getValue
+ import androidx.compose.runtime.*

Composeの定義場所やパッケージをどうするか

ひとつのComposeで複数のパターンのPreviewを行う場合などに同時に確認できると良さそうなので、ひとつのファイルにひとつのComposeを定義し、あとは同じファイル内の複数のPreview用のComposeを定義していくのが良さそう。

パッケージの階層とかはアーキテクチャによっても変わりそうなので、とりあえずはGoogleのサンプルアプリなど、ネットに公開されているものを参考に試行錯誤すれば良さそう。

レイアウトの想像は慣れか

いままでViewのレイアウトをXMLで記述していて慣れていたからか、ビルドしなくてもコードを読むだけでレイアウトが想像できていた。しかし、Jetpack Composeで実際にコードを書いたり読んだりしてみると実際のレイアウトが想像しにくいと感じた。これはAndroidアプリの開発を始めたときもXMLで同じだったと思うので、そのうち慣れてくると思う。

また、プルリクエストやマージリクエストでは、CIなどで変更のあるComposableのスクショとかを自動で作成する方法ができそうだけど、その画像はどこにアップロードするのかとか考えないといけない。