Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Menu navigasi

Menu navigasi memungkinkan pengguna beralih antar-tujuan dalam aplikasi. Anda harus menggunakan menu navigasi untuk:

Tiga hingga lima tujuan yang sama pentingnya
Ukuran jendela ringkas
Tujuan yang konsisten di seluruh layar aplikasi

Menu navigasi dengan 4 tujuan. Setiap tujuan memiliki nama placeholder yang disebut "Label", dengan tujuan yang dipilih muncul dengan ikon lingkaran, dan tujuan lainnya sebagai segitiga. — **Gambar 1.** Menu navigasi dengan 4 tujuan.

Halaman ini menunjukkan cara menampilkan menu navigasi di aplikasi Anda dengan layar terkait dan navigasi dasar.

Platform API

Gunakan composable NavigationBar dan NavigationBarItem untuk mengimplementasikan logika pengalihan tujuan. Setiap NavigationBarItem mewakili satu tujuan.

NavigationBarItem mencakup parameter utama berikut:

selected: Menentukan apakah item saat ini disorot secara visual.
onClick(): Menentukan tindakan yang akan dilakukan saat pengguna mengklik item. Logika untuk menangani peristiwa navigasi, memperbarui status item yang dipilih, atau memuat konten yang sesuai termasuk dalam bagian ini.
label: Menampilkan teks dalam item. Opsional.
icon: Menampilkan ikon dalam item. Opsional.

Contoh: Menu navigasi bawah

Cuplikan berikut mengimplementasikan menu navigasi bawah dengan item sehingga pengguna dapat berpindah di antara berbagai layar dalam aplikasi:

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}Navigation.kt

Poin-poin utama

NavigationBar menampilkan kumpulan item, dengan setiap item sesuai dengan Destination.
val navController = rememberNavController() membuat dan mengingat instance NavHostController, yang mengelola navigasi dalam NavHost.
var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } mengelola status item yang dipilih.
- startDestination.ordinal mendapatkan indeks numerik (posisi) entri enum Destination.SONGS.
Saat item diklik, navController.navigate(route = destination.route) dipanggil untuk membuka layar yang sesuai.
Lambda onClick dari NavigationBarItem memperbarui status selectedDestination untuk menandai item yang diklik secara visual.
Logika navigasi memanggil composable AppNavHost, meneruskan navController dan startDestination, untuk menampilkan konten sebenarnya dari layar yang dipilih.

Hasil

Gambar berikut menampilkan menu navigasi yang dihasilkan dari cuplikan sebelumnya: