Many Android projects use Jetpack Navigation for page switching. Navigation is highly abstract in design, only responsible for Navigation logic, not concerned with the specific implementation of the page, no matter Activity, Fragment or even a defined View can realize Navigation based on Navigation. Composable, of course.

Jetpack Compose, as a declarative UI framework, is often compared to React, Flutter, etc. Unfortunately, Compose lacks the Navigation mechanism of other frameworks and now uses Jetpack’s own Navigation mechanism. Compose can be navigated by abstracting the Composable as Destination, which complements Compose’s weakness.

Installation

To use navigation-compose, just add a dependency to build.gradle:

implementation "Androidx. Navigation: navigation - compose: 1.0.0 - alpha02"
Copy the code

NavController

In Navigation we get the NavController using the findNavController extension method and then jump. The NavController was designed to manage configuration information such as NavGraph, so it was stateful. To get a stateful instance of Compose’s pure function, do the following

val navController = rememberNavController()
Copy the code

NavHost

NavHost is the owner of NavController, NavHostFragment is the implementation of NavHostFragment. Compose renders the UI based on the Composable function. There is no concrete instance of Fragment as a carrier, so Compose’s NavHost is more abstract. You can think of it as a container that renders the current UI during “page transitions” via the NavController

val navController = rememberNavController()
NavHost(
        navController = navController,
        startDestination = "first_screen"
) {
    composable("first_screen") {
        // first screen
    }
    composable("second_screen") {
        // second screen}}Copy the code

As mentioned above, NavHost takes two arguments, navController and startDestination, which is standard usage for Navigation and will not be described again. Its composables within the DSL are used to declare individual pages

A Navigation Sample

Compose a complete Navigation definition for Compose is as follows:

@Composable
fun ComposeNavigation(a) {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = "first_screen"
    ) {
        composable("first_screen") {
            FirstScreen(navController = navController)
        }
        composable("second_screen") {
            SecondScreen(navController = navController)
        }
        composable("third_screen") {
            ThirdScreen(navController = navController)
        }
    }
}
Copy the code

Three pages are configured, starting with the parameter first_screen Composable () as the ID of Destination for subsequent jumps

@Composable
fun FirstScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "First Screen\n" +
                    "Click me to go to Second Screen",
            color = Color.Green,
            style = TextStyle(textAlign = TextAlign.Center),
            modifier = Modifier.padding(24.dp).clickable(onClick = {
                // this will navigate to second screen
                navController.navigate("second_screen")}))}}Copy the code

Navigate to SecondScreen via navController.navigate(“second_screen”) from FirstScreen as above.

Similarly, other pages are defined as follows:

@Composable
fun SecondScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Second Screen\n" +
                    "Click me to go to Third Screen",
            color = Color.Yellow,
            style = TextStyle(textAlign = TextAlign.Center),
            modifier = Modifier.clickable(onClick = {
                // this will navigate to third screen
                navController.navigate("third_screen")}))}}@Composable
fun ThirdScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Third Screen\n" +
                    "Click me to go to First Screen",
            color = Color.Red,
            style = TextStyle(textAlign = TextAlign.Center),
            modifier = Modifier.clickable(onClick = {
                // this will navigate to first screen
                navController.navigate("first_screen")}))}}Copy the code

Finally, call ComposeNavigation in setContent:

override fun onCreate(savedInstanceState: Bundle?). {
    super.onCreate(savedInstanceState)
    setContent {
        ComposeNavigationTheme {
            ComposeNavigation()
        }
    }
}
Copy the code

After that, you can switch pages in the Compose project, and BackStack can be rolled back.

Fin

Previously, if you wanted to implement a multi-page APP using Compose, you had to write the Compose code inside your Fragment or Activity. Now with Navigation, you can completely get rid of fragments or activities, thanks to Navigation’s highly abstract design. Interested students can read NavController source code for details.