Serba-Serbi Jetpack Compose (Bagian 4) — Navigation

Assalamualaikum sobat. Artikel ini merupakan lanjutan dari rangkaian artikel Serba-Serbi Jetpack Compose. Anda bisa melihat artikel sebelumnya di link berikut :

Bagian 1: Pengenalan
Bagian 2: View & Layout
Bagian 3: State
Bagian 4: Navigation (Anda di sini)

Dalam artikel ini saya akan membahas terkait dasar-dasar implementasi navigation saat menggunakan Jetpack Compose.

Saat kita membahas tentang navigasi ketika menggunakan tradisional UI Toolkit, biasanya kita akan membahas terkait perpindahan dari satu Activity ke Activity yang lain, atau dari satu Fragment ke Fragment yang lain. Namun, saat kita menggunkan Jetpack Compose, secara umum kita akan membangun semua halaman dengan membuat composable function. Jadi sangatlah mungkin jika ada sebuah project aplikasi Android dengan menggunakan Jetpack Compose yang hanya memiliki satu buah Activity yang berperan menjadi root container saja.

Untuk perpindahan antar halaman yang dibuat dengan Jetpack Compose, kita perlu menggunakan library Navigation Component. Ini adalah official library yang sama dengan yang kita gunakan saat kita menggunakan tradisional UI Toolkit, hanya saja library yang akan kita pakai ini adalah versi yang men-support Jetpack Compose.

Sebelum masuk ke implementasi, kita perlu menambahkan library navigasi ini dalam dependensi projek, berikut adalah caranya

dependencies {
    val nav_version = "2.7.1" // <- Masukan versi library di sini

    implementation("androidx.navigation:navigation-compose:$nav_version")
}

Setelah menambahkan dependensinya, kita perlu membuat sebuah objek bernama NavHostController. Objek ini berfungsi merekam semua perubahan state terkait navigasi yang terjadi. Objek ini pula yang nanti akan kita gunakan untuk men-trigger perpindahan halaman. Kita bisa membuat objek ini dengan memanggil fungsi rememberNavController(). Kita bisa membuat objek ini di dalam parent composable function untuk memudahkan.

Objek kedua yang perlu kita buat adalah NavHost. Objek ini berfungsi sebagai penghubung antara NavHostController dengan semua halaman yang akan kita daftarkan sebagai objek destinasi. Kita bisa membuat objek NavHost dengan cara seperti berikut,

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "list") {
        composable("list") { ListScreen(navController) }
        composable("detail") { DetailScreen(navController) }
    }
}

Dapat dilihat bahwa kita memerlukan objek NavHostController yang sebelumnya telah kita buat. Kita juga perlu mengisi parameter startDestination yang menunjukan nama dari Destination yang akan menjadi titik awal navigasi. Cara untuk mendaftarkan halaman composable function (ListScreen & DetailScreen) kita menjadi sebuah objek destinasi adalah dengan membungkusnya dengan fungsi composable() (seperti yang ada di contoh).

Dapat juga dilihat bahwa kita memberikan objek NavHostController kita ke dalam halaman composable function (ListScreen & DetailScreen), hal ini diperlukan agar masing-masing halaman bisa melakukan proses navigasi ke halaman yang mereka inginkan. Sebagai contoh, jika kita ingin pindah dari halaman “list” ke halaman “detail” kita hanya perlu memanggil fungsi navigate() seperti dibawah

@Composable
fun ListScreen(navHostController: NavHostController) {
  Scaffold(topBar = { MyAppBar(title = "My App", icon = Icons.Default.Home) }) {

    Surface(modifier = Modifier.fillMaxSize().padding(it)) {
      Button(
        onClick = { navHostController.navigate("detail") }) {
          // Your UI Button
        }
    }
  }
}

Jika kita ingin melakukan navigasi sekaligus mengirim sebuah parameter maka ada beberapa perubahan yang perlu dilakukan. Sebagai contoh, kita ingin mencoba mengirim parameter userId dari halaman List ke halaman Detail. Perubahan pertama yang perlu dilakukan adalah saat menggunakan fungsi composable() di dalam NavHost seperti contoh berikut,

composable(
  "detail/{userId}",
  arguments = listOf(navArgument("userId") {type = NavType.IntType})
) { stack ->
  DetailScreen(stack.arguments!!.getInt("userId"), navController)
}

Lalu, untuk masuk ke halaman Detail kita perlu mengirimkan data userId seperti berikut,

navHostController.navigate("detail/${profile.id}")

Terakhir, ada catatan dari official documentation terkait pengiriman data pada saat navigasi ini, yaitu bahwa tidak disarankan untuk mengirimkan objek yang kompleks pada saat navigasi.