Nested navigation pada Jetpack Compose adalah teknik untuk membuat struktur navigasi yang lebih kompleks dengan mengelompokkan rute-rute navigasi ke dalam beberapa navigation graphs. Setiap navigation graph bisa memiliki rute-rute sendiri dan bisa dihubungkan dengan navigation graph lainnya. Ini memungkinkan kita untuk mengelola alur navigasi yang lebih rumit, terutama ketika ada alur dalam aplikasi yang harus tetap independen atau terpisah dari alur lainnya.Contohnya, pada aplikasi yang memiliki dua bagian utama, seperti Home dan Profile, Anda dapat membuat navigation graph untuk masing-masing bagian. Misalnya, navigation graph untuk Home dapat memiliki layar HomeDetail, dan navigation graph untuk Profile dapat memiliki layar ProfileSettings. Dengan nested navigation, Anda bisa berpindah antara layar Home dan HomeDetail tanpa mengganggu navigasi di bagian Profile, dan sebaliknya. Cara membuat nested navigation sebagai berikut :
Tambahkan dependencies yang diperlukan di build.gradle
implementation "androidx.navigation:navigation-compose:2.8.2"
Implementasi Composables untuk Setiap Layar. Buat beberapa Composable sederhana untuk tiap layar (Home, Profile, Home detail).
@Composable
fun HomeScreen(navController: NavHostController) {
Column {
Text(text = "Home Screen")
Button(onClick = { navController.navigate("homeNav/homeDetail") }) {
Text(text = "Go to Home Detail")
}
}
}
@Composable
fun HomeDetailScreen() {
Text(text = "Home Detail Screen")
}
@Composable
fun ProfileScreen(navController: NavHostController) {
Column {
Text(text = "Profile Screen")
Button(onClick = { navController.navigate("profileNav/profileSettings") }) {
Text(text = "Go to Profile Settings")
}
}
}
@Composable
fun ProfileSettingsScreen() {
Text(text = "Profile Settings Screen")
}
Implementasi Main Navigation Graph dengan Nested Navigation
Buat fungsi MainNavGraph yang mendefinisikan alur navigasi utama beserta nested navigation untuk masing-masing bagian.
@Composable
fun MainNavGraph(navController: NavHostController) {
NavHost(navController = navController, startDestination = "home") {
// Route utama untuk layar Home dan Profile
composable("home") { HomeScreen(navController) }
composable("profile") { ProfileScreen(navController) }
// Nested navigation untuk Home
navigation(startDestination = "homeDetail", route = "homeNav") {
composable("homeDetail") { HomeDetailScreen() }
}
// Nested navigation untuk Profile
navigation(startDestination = "profileSettings", route = "profileNav") {
composable("profileSettings") { ProfileSettingsScreen() }
}
}
}
Setup NavController pada Fungsi Main Activity. Pada MainActivity, buatlah NavController dan panggil MainNavGraph.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val navController = rememberNavController()
MainNavGraph(navController = navController)
}
}
}
Dengan struktur ini, Anda bisa mengakses HomeDetailScreen dan ProfileSettings,Screen sebagai bagian dari nested navigation.
Selamat Mencoba..
