Android Academy · Pelajaran

Navigasi Bawah

Bangun navigasi bawah berbasis tab.

Navigasi Bawah adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Bilah Navigasi Bawah

Banyak aplikasi menempatkan bagian tingkat atasnya di dalam bilah navigasi bawah. Compose menyediakan NavigationBar dan NavigationBarItem untuk keperluan ini.

NavigationBar

NavigationBar adalah wadah yang biasanya ditempatkan di slot bottomBar milik Scaffold. Wadah ini menampung beberapa NavigationBarItem.

NavigationBar {
    // items go here
}

NavigationBarItem

Setiap tab adalah sebuah NavigationBarItem dengan icon, label opsional, penanda selected, dan onClick.

NavigationBarItem(
    selected = true,
    onClick = { },
    icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
    label = { Text("Home") }
)

Memodelkan Tab

Tentukan tab sebagai data agar Anda dapat mengulanginya. Kelas data sederhana dengan rute, label, dan ikon sudah memadai.

data class Tab(val route: String, val label: String, val icon: ImageVector)

val tabs = listOf(
    Tab("home", "Home", Icons.Default.Home),
    Tab("profile", "Profile", Icons.Default.Person)
)

Melacak Rute Saat Ini

Untuk menyoroti tab aktif, Anda memerlukan rute saat ini. Baca rute tersebut dari entri tumpukan navigasi saat ini milik pengontrol.

val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.route

Menandai Tab yang Dipilih

Bandingkan rute setiap tab dengan currentRoute untuk menetapkan penanda selected, sehingga bilah menyoroti item yang tepat.

NavigationBarItem(
    selected = currentRoute == tab.route,
    onClick = { navController.navigate(tab.route) },
    icon = { Icon(tab.icon, contentDescription = tab.label) },
    label = { Text(tab.label) }
)

Menghindari Penumpukan Tumpukan Navigasi

Mengetuk tab berulang kali seharusnya tidak menumpuk tujuan. Gunakan popUpTo pada tujuan awal, ditambah launchSingleTop, saat berpindah antar-tab.

navController.navigate(tab.route) {
    popUpTo(navController.graph.startDestinationId) { saveState = true }
    launchSingleTop = true
    restoreState = true
}

saveState / restoreState

saveState dan restoreState mempertahankan posisi gulir dan keadaan setiap tab saat Anda berpindah dari dan kembali ke tab tersebut—perilaku yang diharapkan dari tab bawah.

Integrasi Scaffold

Bungkus semuanya di dalam Scaffold. Letakkan bilah di bottomBar dan NavHost di dalam konten, dengan menggunakan padding yang disediakan agar konten tidak tersembunyi di balik bilah.

Scaffold(
    bottomBar = { BottomBar(navController) }
) { padding ->
    NavHost(
        navController,
        startDestination = "home",
        modifier = Modifier.padding(padding)
    ) { /* destinations */ }
}

Mengulang Item

Buat bilah dengan mengiterasi daftar tab agar kode tetap singkat dan konsisten.

NavigationBar {
    tabs.forEach { tab ->
        NavigationBarItem(
            selected = currentRoute == tab.route,
            onClick = { navController.navigate(tab.route) },
            icon = { Icon(tab.icon, contentDescription = tab.label) },
            label = { Text(tab.label) }
        )
    }
}

Menyatukan Semuanya

Bilah bawah lengkap yang terhubung ke pengontrol dan menyoroti tab aktif.

@Composable
fun BottomBar(navController: NavController) {
    val entry by navController.currentBackStackEntryAsState()
    val current = entry?.destination?.route
    NavigationBar {
        tabs.forEach { tab ->
            NavigationBarItem(
                selected = current == tab.route,
                onClick = { navController.navigate(tab.route) },
                icon = { Icon(tab.icon, contentDescription = tab.label) },
                label = { Text(tab.label) }
            )
        }
    }
}

Pemeriksaan Singkat

Bagaimana cara mengetahui NavigationBarItem mana yang harus ditandai sebagai selected?

Rangkuman

Navigasi bawah:

NavigationBar menampung NavigationBarItem.
Lacak tab aktif melalui currentBackStackEntryAsState() dan tetapkan selected.
Gunakan popUpTo + launchSingleTop + saveState/restoreState untuk perpindahan tab yang rapi.
Tempatkan semuanya di dalam bottomBar milik Scaffold.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Navigasi Bawah” gratis?

Ya — teks lengkap “Navigasi Bawah” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Navigasi Bawah”?

Bangun navigasi bawah berbasis tab. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Navigasi Bawah” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy