Jetpack Compose は View との相互運用性をサポートしています。Compose で View を使用したり、View で Compose を使用したりできます。これにより、すべての View をすぐに移行することなく、既存の View ベースのアプリに Compose を導入できます。
移行手順
- 計画を作成する: 移行を実行するための堅牢なステップバイステップの計画を作成します。移行タスクの優先順位付けされたバックログをおすすめします。
- 移行候補の XML を特定する : 階層のリーフノードである最小のコンポーネントから特定して開始し、階層の下から上に向かって移行計画を拡張して、階層内のより上位のコンポーネントに段階的に移行します。初期移行の候補として適しているのは、小規模でステートレスであり、依存関係が少ないものです。
- 階層を分析する: 移行する XML ビューを特定したら、その XML レイアウト構造と実装を分析します。
- 初期状態をキャプチャする: スクリーンショット テストを実行して、選択した XML ビューの初期状態をキャプチャします。
- 前提条件: Compose の依存関係を設定する プロジェクトに Compose の依存関係とコンパイラが設定されているかどうかを確認します。インストールされていない場合は、Compose の依存関係とコンパイラを設定するの手順に沿ってインストールします。
- 前提条件: Compose のテーマ設定 プロジェクトに Compose のテーマ設定がすでに設定されているかどうかを確認します。そうでない場合は、Compose のテーマ設定に沿って設定します。アプリが相互運用されている間は、元の XML テーマを維持します。XML テーマを Compose に移行するで、プロジェクトが完全に Compose に移行されるまで、状態を宣言する方法のパターンを確認してください。
- XML ビューを Compose に移行する: XML コードを Compose に変換し、適切なテーマを適用して、移行したコンポーザブルの Compose プレビューを追加します。一般的な移行シナリオについては、参考資料をご覧ください。たとえば、Compose で Lazy API に移行するには、RecyclerView を Compose に移行するの手順に沿って操作します。
- 使用箇所を置き換える: 新しい Compose コンポーネントを使用するように、XML ビューの以前の使用箇所を置き換えます。Views に Compose を追加するには、Views での Compose の手順に沿って操作します。Compose でビューを追加するには、Compose のビューの手順に沿って操作します。
- 移行を検証する: スクリーンショット テストでキャプチャされた初期状態が、移行されたコンポーザブルの Compose プレビューと同じであることを確認します。一致しない場合は、新しいコンポーザブル UI を反復処理し、初期状態と一致するように改善します。新しいコンポーザブルの新しい Compose UI テストを作成します。
- XML の削除: 新しく移行したコンポーザブルが最初の XML UI と一致したら、廃止された XML ビューコードとそのテストを削除します。
一般的な移行シナリオ
コンポーザブルで dp 拡張機能と sp 拡張機能（16.dp、20.sp）が使用されていることを確認します。tools:text が XML ビューに存在する場合は、別の @Preview コンポーザブルで使用します。
属性から修飾子への変換
ほとんどの XML 属性は、modifier チェーンまたはコンポーザブル関数のパラメータの一部になります。
| XML 属性 | Compose の同等の機能 |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
（デフォルトの動作。通常は修飾子不要） |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp)（外側のパディング） |
android:gravity="center" |
contentAlignment = Alignment.Center（ボックス）または horizontalAlignment / verticalArrangement（列/行） |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
if (visible) { ... } ブロックでラップする |
スタイルを移行する（styles.xml）
XML スタイルでは、複数の属性を組み合わせてスタイルを作成することがよくあります。Compose では、特定のスタイルでコンポーザブルのバリエーションを作成することで実現します。
スタイルとベース コンポーネントに従って名前が付けられた個別の @Composable 関数を提供し、それらのコンポーネントのスタイルとユースケースの違いを示します。
- パターン: XML 要素がカスタム スタイル（
style="@style/MyPrimaryButton"）を使用している場合は、インラインでスタイルを複製しないでください。代わりに、特定のコンポーザブルを作成することを提案します。 - 例:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - 作成:
MyPrimaryButton(onClick = { ... })
- XML:
- 共通属性グループ: スタイルで共通の修飾子（パディング + 高さなど）を設定する場合は、読み取り可能な拡張プロパティまたは共有の Modifier 変数に抽出します。