🚀

Jetpack Composeをプロジェクトに導入する

2024/03/15に公開

Android

Kotlin

Jetpack Compose

tech

はじめに

こんにちは現在内定先でAndroidエンジニアとして働かせていただいています。Ryunosukeです。
この記事ではAndroidViewでレイアウトを組んでいる既存のプロジェクトにJetpackComposeを導入するプロセスをまとめています。

導入背景

今までFlutterでの開発をメインで行っており、内定先のインターンで初めてAndroidのアプリ開発をさせていただくことになりました。アサインされたプロジェクトではAndroidViewでUIを組んでいたのですが、モダンなライブラリを取り入れたい＆UIを宣言的に構築したいという思いがあり、リプレイス作業を任せていただけました。
また、公式でもLess Code (コード量が少ない)、Intuitive (直感的)、Accelerate development (開発速度の向上)、Powerful (パワフル)などの特徴が挙げられています。

Jetpack Composeとは

JetpackComposeはAndroidのアプリ開発において宣言的にネイティブUIを構築するためのライブラリになります。
基本的な構文は以下のようになります。

@Composable
fun Greeting(name: String) {
        Text("Hello $name")
}

それぞれのUIコンポーネントごとに頭にComposableキーワードをつけ、関数として切り出していきます。

導入手順

1. build.gradle(app)で必要なプラグインの追加

はじめにapp配下のbuild.gradleに移り、composeを有効にします。

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.9"
    }
}

composeOptionsブロック内で定義されているkotlinCompilerExtensionVersionはKotlinのバージョンと紐づいており、Compatibility mapを確認してプロジェクトで使用しているKotlinのバージョンに紐づいたバージョンを指定してあげる必要があるようです。

次にComposeに関連するライブラリをdependencies内に記述していきます。

dependencies {
    //1
    def composeBom = platform('androidx.compose:compose-bom:2024.02.01')
    implementation composeBom
    androidTestImplementation composeBom

    //2
    //compose runtimeがないとエラーが起きます
    implementation 'androidx.compose.runtime:runtime'

    //setContentを使用するためインポートしてください
    implementation 'androidx.activity:activity-compose:1.7.0'

    //3
    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.8.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

まずはBOM(Bill Of Materials)を追加してください。BOMはComposeに関連するメジャーなライブラリ群のバージョン管理をしてくれるものになっています。BOMをインポートすることで

implementation 'androidx.compose.material3:material3'

のようにライブラリ一つ一つに具体的なバージョンを指定する必要はなくなりメンテナンスが楽になります。
公式ではBOMを使ってライブラリ群のバージョンを管理することが推奨されていますが個別でバージョンを管理することもできます。
また、BOMはCompose関連全てのライブラリのバージョンを管理しているわけではなくサポート外のものは自分達でバージョン管理やメンテナンスをする必要がありそうです。
詳しくはこちらを参照してください。
Compose RuntimeはComposeでネイティブUIを組む際に必要になる機能やAPIを提供してくれるものであり、これが定義されていないとエラーが起こります。
任意で自分たちのプロジェクトに必要なライブラリを選んで導入してください。特にPreviewなんかはComposableのUIを逐一確認できる(XMLのLayout Editorのようなもの)のでとても便利ですね。debugモードでのビルドを通してPreviewを確認できます。

2. ComposeでUIを構築し、Activityで呼び出す

前述した通り、composeでのUI構築はとてもシンプルでUIコンポーネントごとに関数として切り出し、頭に@Composableキーワードをつけてあげるだけです。レイアウトもColumnやRowなどのWidgetを使用して調整することができます。雰囲気は完全にFlutterですね。また、Previewを確認したい場合は@Composableキーワードの上に＠Previewキーワードを追加してあげればAnsroid StudioのDesignで確認することができます。

@Preview
@Composable
fun GreetingPreview() {
    ComposeappTheme {
        Greeting("Compose")
    }
}

では最後にComposableなUIをActivityファイルで呼び出してあげましょう。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeappTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Compose")
                }
            }
        }
    }
}

Composable関数はsetContent内で呼び出しが可能となっており、setContentメソッドは下記のプラグインを追加しないと使うことができません。

implementation 'androidx.activity:activity-compose:1.7.0'

導入してみての感想

今現在感じているメリットは以下になります。

宣言的なUIは書きやすい&読みやすい

Activityファイルがかなりスッキリしてコードの見通しが良くなる。

興味のある方はシンプルな構成の画面から導入してみてください！！