はじめに
Google I/O 2021でアナウンスされたように、今後Jetpack ComposeでUIを組み込んでいくのが推奨されていくようです。
そこで、本記事では既存のアプリにJetpack Composeを組み込む方法を説明します。
既存のアプリにJetpack Composeを組み込む
レイアウト
レイアウトファイルの一部でComposeを使う時の例です。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:textSize="20sp"
android:textColor="@color/black"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.compose.ui.platform.ComposeView
android:id="@+id/compose"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/hello"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
通常のレイアウトファイルでComposeを使いたい箇所にComposeViewを記述します。
このComposeView内にコード上でCompose関数を使うことになります。
Compose関数の追加
上記のレイアウトをActivity内でCompose関数と一緒に使う時の例です。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
findViewById<ComposeView>(R.id.compose).setContent {
Greeting(message = "Hello Compose!")
}
}
@Composable
fun Greeting(message: String) {
Text(text = message, fontSize = 20.sp, textAlign = TextAlign.Center)
}
}
ComposeViewを取得して、それに対してsetContentブロックを定義します。
そのブロック内でCompose関数を呼び出す等して、ComposeでUIを記述できます。
完成イメージ
おわりに
今回は既存のxmlで実装したレイアウトの一部にComposeで実装したレイアウトを組み込む方法を説明しました。
比較的簡単に組み込めるので、徐々にComposeで実装する部分を増やしていくことはできると思います。