iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article

👋

Introduction to Compose Destinations

2022/08/03に公開

I struggled a bit when introducing this library for Navigation in a multi-module full-Compose app due to my lack of reading comprehension, so I'll briefly summarize the setup process.

Setup

build.gradle Settings (Common)

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'
}

Set the plugins in both app and feature build.gradle files (all modules that contain screens for navigation).
Since the KSP version depends on the Kotlin version, please update it while referring to the link below:
https://github.com/google/ksp/releases

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

Specifying dependencies.
If you're not using Version Catalogs, you can just copy and paste from the official documentation.

build.gradle Settings (app)

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

Add this inside the android block.
This specifies the storage location for code generated by KSP.

build.gradle Settings (feature)

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

The difference from app is whether it uses applicationVariants or libraryVariants.

setting.gradle (When using Version Catalogs)

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")
}

Since I don't mind setting.gradle getting a bit messy, I'm of the opinion not to move it to a TOML file.

Logic (Basics)

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

Add @Destination to the Composable targeted for navigation.
Also, add @RootNavGraph(start = true) to the Composable of the screen to be displayed first.

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)
                }
            }
        }
    }
}

After that, simply calling DestinationsNavHost(navGraph = NavGraphs.root as NavGraphSpec) completes the setup.

It becomes very convenient for things like specifying parameters, so please check the official documentation for more details.

Sample Project

Please refer to this commit: