👋

Compose Destinationsの導入

2022/08/03に公開

Android

navigation

Jetpack Compose

tech

マルチモジュールのフルComposeのアプリでNavigationにこちらのライブラリを導入する時に読解力が皆無な事が原因で少し悩んだので、導入方法をさくっとまとめます。

導入

build.gradleの設定(共通)

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'kotlin-kapt'
    id 'dagger.hilt.android.plugin'
    id 'com.google.devtools.ksp' version '1.7.10-1.0.6'
}

appとfeatureのbuild.gradle(遷移させる画面があるモジュール)全てにpluginsを設定します。
KSPのバージョンはKotlinのバージョンに依存するので、↓を見ながら書き換えてください
https://github.com/google/ksp/releases

dependencies {
    implementation libs.compose.destinations.core
    ksp libs.compose.destinations.ksp
}

dependenciesの指定です。
VersionCatalogsを使わない場合は公式からコピペで大丈夫です。

build.gradleの設定(app)

android {
    applicationVariants.all { variant ->
        kotlin.sourceSets {
            getByName(variant.name) {
                kotlin.srcDir("build/generated/ksp/${variant.name}/kotlin")
            }
        }
    }
}

androidブロック内にこちらを記載します。
KSPで生成されるコードの格納場所を指定します。

build.gradleの設定(feature)

android {
    libraryVariants.all { variant ->
        kotlin.sourceSets {
            getByName(variant.name) {
                kotlin.srcDir("build/generated/ksp/${variant.name}/kotlin")
            }
        }
    }
}

appとはapplicationVariantsかlibraryVariantsかが違います。

setting.gradle(VersionCatalogsを使う場合)

versionCatalogs {
    version("compose-destinations", "1.6.15-beta")
    library("compose-destinations-core", "io.github.raamcosta.compose-destinations", "core").versionRef("compose-destinations")
    library("compose-destinations-ksp", "io.github.raamcosta.compose-destinations", "ksp").versionRef("compose-destinations")
}

※setting.gradleが汚れるのは気にならない性格なのでTOMLに出さない派です。

ロジック(基本)

@RootNavGraph(start = true)
@Destination
@Composable
fun InitialScreenRoute(
    navigator: DestinationsNavigator,
    viewModel: InitialScreenViewModel = hiltViewModel()
) {
    InitialScreen()
}

遷移対象のComposableに@Destinationを付けます。
また、一番最初に表示する画面のComposableに@RootNavGraph(start = true)を付けます。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Sample202207Theme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    DestinationsNavHost(navGraph = NavGraphs.root as NavGraphSpec)
                }
            }
        }
    }
}

あとはDestinationsNavHost(navGraph = NavGraphs.root as NavGraphSpec)を呼ぶだけで完成です。

パラメータ指定など便利になるので、続きは公式を見て使ってみてください

サンプルプロジェクト

こちらのcommitを参考にしてください