Navigasi halaman di Jetpack Compose

 Hai guys, di artikel saya kali ini, saya akan bagikan ke kalian bagaimana integrasi library jetpack compose dengan jetpack navigation. Bagi kalian belum tahu tantang jetpack compose, Jetpack Compose adalah Toolkit yang digunakan untuk membuat UI di android tanpa menggunakan xml. Sederhananya seperti itu, jika kalian ingin tahu lebih dalam silahkan kunjungi di dokumentasi resmi Jetpack Compose.

Library navigation, menyediakan API untuk digunakan di Jetpack Compose. Pada saat artikel ini dibuat, library navigation-compose versi 2.4.0-alpha01. Baik langsung saja kita buat project pertama kita.

Note: Pastikan menggunakan versi Android Studio terbaru dan menggunakan library yang terbaru, hal ini dilakukan untuk menghindari crash pada aplikasi.

Persiapan project

Buat project jetpack compose dengan library compose dengan versi terbaru.

Setelah itu, tambahkan library navigation-compose di app/build.gradle.

// Navigation
implementation "androidx.navigation:navigation-compose:2.4.0-alpha01"

Membuat tampilan

Langkah berikutnya membuat tampilan sederhana. Disini saya tidak membatasi kalian untuk membuat tampilan, yang penting dari tampilan tersebut bisa digunakan untuk pengimplementasian navigation-compose. Pada case ini, saya menggunakan 2 screen:

• HomeScreen : berisi list yang memuat data person, lalu ketika item list ditekan maka akan menavigasi ke halaman detail
• DetailScreen : berisi detail data dari person, pada halaman detail nantinya akan ada penerapan navigateUp()

Untuk lebih detailnya silahkan kunjungi repo github saya.

Membuat Navigation Graph

Navigation Graph digunakan untuk mendeskripsikan route mana saja yang akan digunakan diaplikasi kita. Tak hanya itu, di bagian ini juga mengatur halaman dengan rute tertentu dan membuat argument pada masing masing halaman untuk passing data antar halaman. Berikut langkah - langkahnya :

1. Membuat object destinasi Sebelum membuat NavGraph, kita buat terlebih dahulu destinasi apa saja yang ada di aplikasi kita. ```kotlin /**

   • Destinations used in the App. */ object MainDestinations { const val HOME_ROUTE = "home" const val DETAIL_ROUTE = "detail"

     const val DETAIL_ID_KEY = "personId" }

2. Membuat model aksi pada setiap halaman
Bagian ini, digunakan untuk mempermudah kita membuat aksi yang bertujuan untuk berpindah halaman
```kotlin
/**
 * Models the navigation actions in the app.
 */
class MainActions(navController: NavHostController) {
    val homeScreen: () -> Unit = {
        navController.navigate(HOME_ROUTE)
    }
    val detailScreen: (Int) -> Unit = { id ->
        navController.navigate("$DETAIL_ROUTE/$id")
    }
    val upPress: () -> Unit = {
        navController.navigateUp()
    }
}

1. Terakhir buat NavGraph nya

   COPY

   @Composable
   fun NavGraph(
    finishActivity: () -> Unit = {},
    navController: NavHostController = rememberNavController(),
    startDestination: String = HOME_ROUTE
   ) {
    val actions = remember(navController) { MainActions(navController) }
   
    NavHost(
        navController = navController,
        startDestination = startDestination
    ) {
        composable(HOME_ROUTE) {
            // Intercept back in Home: make it finish the activity
            BackHandler {
                finishActivity()
            }
            HomeScreen(toDetail = {
                actions.detailScreen(it)
            })
        }
        composable(
            "${MainDestinations.DETAIL_ROUTE}/{$DETAIL_ID_KEY}",
            arguments = listOf(
                navArgument(DETAIL_ID_KEY) { type = NavType.IntType }
            )
        ) { backStackEntry: NavBackStackEntry ->
            val arguments = requireNotNull(backStackEntry.arguments)
            val currentPersonId = arguments.getInt(DETAIL_ID_KEY, 0)
            DetailScreen(
                id = currentPersonId,
                backToHome = { actions.upPress() },
            )
        }
    }
   }
   

   Kalau kita belajar tentang Navigation, navController disini hampir sama penggunaanya kita menggunakan tampilan non-compose. Setalah itu membuat NavHost, NavHost memerlukan navController yang telah dideskripsikan. startDestination merupakan destinasi awal dari aplikasi kita.

Didalam NavHost berisi composable() yakni halaman halaman compose yang ada di aplikasi kita dengan memberi nama atau route pada parameternya. Didalamnya terdapat composable function yang dipanggil sebagai tampilan dari halaman.

arguments = listOf(
                navArgument(DETAIL_ID_KEY) { type = NavType.IntType }
            )

didalam composable() juga terdapat arguments untuk mengirim data ke halaman tersebut. Pada kasus ini saya membutuhkan data ID pada halaman detail.

val arguments = requireNotNull(backStackEntry.arguments)
val currentPersonId = arguments.getInt(DETAIL_ID_KEY, 0)
DetailScreen(
    id = currentPersonId,
    backToHome = { actions.upPress() },
)

Untuk menghandle back press saya memanfaatkan high order function untuk membuat callback dari UI ketika ada suatu event.

Berpindah halaman

Untuk berpindah halaman cukup mudah, saya hanya memanfaatkan high order function untuk membuat callback dari tampilan atau UI ketika ada suatu event (click atau long press).

......
return Row(modifier = Modifier.padding(8.dp).clickable {
        toDetail(person.id)
    }) {
......

Panggil NavGraph di MainActivity

Terakhir memanggil NavGraph() di MainActivity. Masukan juga parameter - parameter yang di perlukan oleh NavGraph()

Surface(color = MaterialTheme.colors.background) {
    val navController = rememberNavController()
    NavGraph(finishActivity = {finish()}, navController = navController)
}

Consclusion

Nah itu dia tutorial dari saya kalian juga bisa kunjungi repo di github saya artefact dari study case diatas