この記事は、 Google Developer Expert (GDE) @STAR_ZERO さんに寄稿いただいたゲスト記事です。この「エキスパートに学ぶシリーズ」では、まだ Jetpack Compose を使ったことがないデベロッパー向けに既存アプリで段階的に導入を進める方法や導入するメリットについて GDE の方々よりご紹介いただきます。
新規アプリにて Jetpack Compose を導入することは最適な方法ですが、 Jetpack Compose は View-base UI と統合することができ、既存アプリに対しても段階的に導入が可能になっています。
この記事では、まだ Jetpack Compose を使用したことがない方向けに、既存アプリに Jetpack Compose を導入する手順について紹介します。
Jetpack Compose を最大限に活かすために、最新の Android Studio 安定版をインストールします。また、それにあわせて build.gradle の Android Gradle Plugin のバージョンもアップデートします。今回は執筆時点での安定版である 7.3.0 を指定しています。
buildscript { // ... dependencies { classpath "com.android.tools.build:gradle:7.3.0" // ... }}
buildscript {
// ...
dependencies {
classpath "com.android.tools.build:gradle:7.3.0"
}
Jetpack Compose は Kotlin でのみ実装することが可能になっています。まだ Kotlin を使用していないプロジェクトについては Kotlin の導入を行う必要があります。 Kotlin は Java と同時に使用することができます。既存アプリに Kotlin を導入するにはこちらのページを確認してください。
Jetpack Compose を使用するには Gradle で構成を追加する必要があります。
サポートされてる minSdk のバージョンは 21 からです。21 以上にアップデートし、さらに Jetpack Compose を有効にする設定と、 Java と Kotlin のターゲットバージョンの設定を追加します。
最後に使用してる Kotlin バージョンによって適切な Jetpack Compose Compiler のバージョンが変わります。こちらのページの Kotlin と Compiler のバージョンの対応表があるので、適切なバージョンを指定します。
android { defaultConfig { // … // Jetpack Compose がサポートされているのは 21 から minSdk 21 } // … buildFeatures { // Jetpack Compose を有効にする compose true } // Java と Kotlin のターゲットを Java8 に設定 compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } kotlinOptions { jvmTarget = '1.8' } composeOptions { // Jetpack Compose の Compiler バージョンを指定 // Kotlin のバージョンから適切なバージョンを指定する kotlinCompilerExtensionVersion "1.3.1" }}
android {
defaultConfig {
// …
// Jetpack Compose がサポートされているのは 21 から
minSdk 21
buildFeatures {
// Jetpack Compose を有効にする
compose true
// Java と Kotlin のターゲットを Java8 に設定
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
kotlinOptions {
jvmTarget = '1.8'
composeOptions {
// Jetpack Compose の Compiler バージョンを指定
// Kotlin のバージョンから適切なバージョンを指定する
kotlinCompilerExtensionVersion "1.3.1"
以下のように build.gradle に必要なライブラリを追加します。
dependencies { // … // Activity と Jetpack Compose の統合 implementation 'androidx.activity:activity-compose:1.6.0' // Material Design implementation 'androidx.compose.material:material:1.2.1' // Jetpack Compos eのアニメーション implementation 'androidx.compose.animation:animation:1.2.1' // プレビュー等のツール implementation 'androidx.compose.ui:ui-tooling:1.2.1' // ViewModelとJetpack Composeの統合 implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'}
// Activity と Jetpack Compose の統合
implementation 'androidx.activity:activity-compose:1.6.0'
// Material Design
implementation 'androidx.compose.material:material:1.2.1'
// Jetpack Compos eのアニメーション
implementation 'androidx.compose.animation:animation:1.2.1'
// プレビュー等のツール
implementation 'androidx.compose.ui:ui-tooling:1.2.1'
// ViewModelとJetpack Composeの統合
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
このとき、推移的依存関係により使用してるライブラリのバージョンも上がってしまう可能性があるので注意です。
Jetpack Compose で使用するテーマは新しく作成していくこともできますし、既存 View システムで使用しているテーマを再利用することもできます。
Material Component を使用している場合は MDC Compose Theme Adapter 、 AppCompat のテーマを使っている場合は AppCompat Compose Theme Adapter を使用することで再利用できます。
// MDC Compose Theme Adapterimplementation "com.google.android.material:compose-theme-adapter:1.1.19"// AppCompat Compose Theme Adapterimplementation "com.google.accompanist:accompanist-appcompat-theme:0.25.1"
// MDC Compose Theme Adapter
implementation "com.google.android.material:compose-theme-adapter:1.1.19"
// AppCompat Compose Theme Adapter
implementation "com.google.accompanist:accompanist-appcompat-theme:0.25.1"
MDC Compose Theme Adapter を使用する場合は MdcTheme を使用することで XML で定義されてるTheme を再利用することが出来ます。
MdcTheme { Box( modifier = Modifier.background( // XML の Theme の colorPrimary の色 color = MaterialTheme.colors.primary ) ) { Text( text = "Hello, Compose!", // XML の Theme の textAppearanceHeadline1 のスタイル style = MaterialTheme.typography.h1 ) }}
MdcTheme {
Box(
modifier = Modifier.background(
// XML の Theme の colorPrimary の色
color = MaterialTheme.colors.primary
)
) {
Text(
text = "Hello, Compose!",
// XML の Theme の textAppearanceHeadline1 のスタイル
style = MaterialTheme.typography.h1
新規画面を Activity と Jetpack Compose で実装する例になります。 ComponentActivity を継承した Activity を作成し、 setContent のラムダブロック内に Jetpack Compose の実装をしていきます。
class MyActivity: ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { // この中に Jetpack Compose のコードを書いていく MdcTheme { Text(text = "Hello, Compose!") } } }}
class MyActivity: ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// この中に Jetpack Compose のコードを書いていく
Text(text = "Hello, Compose!")
新規画面を Fragment と Jetpack Compose で実装する場合は次のようになります。 Fragment で実装する際は注意があり、 setViewCompositionStrategy を設定して Jetpack Compose の Composition を正しく破棄する必要があります。詳しくはこちらのページを確認してください。
class MyFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { // Fragment の View が破棄されるときに Composition も破棄する setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { // この中に Jetpack Compose のコードを書いていく MdcTheme { Text(text = "Hello, Compose!") } } } }}
class MyFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
return ComposeView(requireContext()).apply {
// Fragment の View が破棄されるときに Composition も破棄する
setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
紹介したとおり、既存アプリにも Jetpack Compose を導入することは意外と簡単に出来るようになっています。もしかしたら既存アプリに導入するのは難しいと思っている方もいらっしゃるかもしれませんが、段階的に導入することで可能なところから少しずつ Jetpack Compose を使っていくことができます。
Jetpack Compose を使うことで効率よく UI を実装することができますので、ぜひ挑戦してみてください。
