【Android】Compose Multiplatformについて

まずはComposeの前提となる知識を記載します

パッケージ

ComposeはJetpackライブラリ内でandroidx.composeというパッケージでバンドルされている

Composeモジュールについて

Compose Runtime

アノテーションや状態の更新を検出するAPIなどの仕組みを提供

Compose UI

テキストやグラフィックスの描画、タッチイベントの検出などUIを構成するために必要な仕組みを提供

Compose Foundation

UIコンポーネントを提供するモジュール。プレーンなコンポーネントのみを提供

Compose Material3

Googleが提唱するマテリアルデザインに準拠したコンポーネントを提供する

Compose Compiler

Composeの記述したコードをコンパイルするKotlinコンパイラプラグイン。Composeのコードを理解して実行時にUI描画に必要なコードを生成する

Composeのインポートについて

@Composable自体はJetpack ComposeとCompose Multiplatformで同一のものを利用するため個別にアノテーションが用意されているわけではない。

AndroidでPreviewについて

例えばandroidx.compose.meterial3.*やandroidx.compose.ui.tooling.preview.PreviewなどはAndroid専用で利用できるモジュールのためcommonMainディレクトリ内で参照することができない。

そのため、作成したComposable関数をプレビューで確認したい場合はAndroid側のモジュール内でPreviewアノテーションを利用して確認する

iOSのPreviewについて

CMPのiosMainで開発したものはAndroidの用にPreviewで確認することはできないため実機 or Simulatorでビルドする必要がある。プラグインを入れている場合はRun ConfigurationでiosAppを選択すればビルドすることが可能(実際にはXcodeが呼び出されて実行されている)

またはXcodeアプリからビルドしたい場合は./gradlew assembleXCFrameworkなどを実行して組み込んだ上でビルドする必要がある。

Android StudioなどからiosAppを直接ビルドするときは内部ではassembleXCFrameworkは実行されておらずKotlin/Nativeが直接iOSバイナリようにビルドされています

また、どちらを利用する場合でもComposableをiOSで確認するには必ずComposeUIViewControllerクラスを利用してコンポーザブルを表示させる必要があります。SwiftUIでいうところのUIKitでSwiftUIを利用するためにUIHostingControllerを利用するイメージです。