Tab

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Tab memungkinkan Anda mengatur grup konten terkait. Ada dua jenis tab:

• Tab utama: Ditempatkan di bagian atas panel konten di bawah panel aplikasi atas. Tab ini menampilkan tujuan konten utama, dan harus digunakan jika hanya satu kumpulan tab yang diperlukan.
• Tab sekunder: Digunakan dalam area konten untuk lebih memisahkan konten terkait dan membuat hierarki. Ini diperlukan saat layar memerlukan lebih dari satu level tab.

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

Platform API

Gunakan composable Tab, PrimaryTabRow, dan SecondaryTabRow untuk menerapkan tab. Composable Tab mewakili setiap tab dalam baris, dan biasanya digunakan di dalam PrimaryTabRow (untuk tab indikator utama) atau SecondaryTabRow (untuk tab indikator sekunder).

Tab menyertakan parameter utama berikut:

• selected: Menentukan apakah tab saat ini ditandai secara visual.
• onClick(): Fungsi lambda yang diperlukan yang menentukan tindakan yang akan dilakukan saat pengguna mengklik tab. Di sinilah Anda biasanya menangani peristiwa navigasi, memperbarui status tab yang dipilih, atau memuat konten yang sesuai.
• text: Menampilkan teks dalam tab. Opsional.
• icon: Menampilkan ikon dalam tab. Opsional.
• enabled: Mengontrol apakah tab diaktifkan dan dapat berinteraksi. Jika ditetapkan ke salah (false), tab akan ditampilkan dalam status nonaktif dan tidak akan merespons klik.

Contoh: Navigasi berbasis tab

Cuplikan berikut menerapkan menu navigasi atas dengan tab untuk menavigasi antara berbagai layar dalam aplikasi:

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

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Poin utama

• PrimaryTabRow menampilkan baris tab horizontal, dengan setiap tab 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 tab yang saat ini dipilih.
  • startDestination.ordinal mendapatkan indeks numerik (posisi) entri enum Destination.SONGS.
• Saat tab diklik, navController.navigate(route = destination.route) akan dipanggil untuk membuka layar yang sesuai.
• Lambda onClick dari Tab memperbarui status selectedDestination untuk menandai tab yang diklik secara visual.
• Fungsi ini memanggil composable AppNavHost, yang meneruskan navController dan startDestination, untuk menampilkan konten sebenarnya dari layar yang dipilih.

Hasil

Gambar berikut menunjukkan hasil cuplikan sebelumnya:

Referensi lainnya

• Material 3 - Tab
• Navigasi dengan Compose