Tab

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 diperlukan satu set tab.
  • Tab sekunder: Digunakan dalam area konten untuk memisahkan lebih lanjut konten terkait dan menetapkan hierarki. Tab ini diperlukan jika layar memerlukan lebih dari satu tingkat tab.
3 tab utama ditampilkan dengan ikon terkait (Penerbangan, Perjalanan, dan Jelajahi). 2 tab sekunder ditampilkan (Ringkasan, Spesifikasi) tanpa ikon terkait.
Gambar 1. Tab utama (1) dan tab sekunder (2).

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 merepresentasikan setiap tab dalam baris, dan biasanya digunakan di dalam PrimaryTabRow (untuk tab indikator utama) atau SecondaryTabRow (untuk tab indikator sekunder).

Tab mencakup parameter utama berikut:

  • selected: Menentukan apakah tab saat ini ditandai secara visual.
  • onClick(): Fungsi lambda wajib 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 disetel ke salah (false), tab akan muncul dalam keadaan dinonaktifkan dan tidak akan merespons klik.

Contoh: Navigasi berbasis tab

Cuplikan berikut menerapkan panel navigasi atas dengan tab untuk menavigasi antar-layar yang berbeda 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 dipilih.
    • startDestination.ordinal mendapatkan indeks numerik (posisi) entri enum Destination.SONGS.
  • Saat Anda mengklik tab, lambda onClick akan memanggil navController.navigate(route = destination.route) untuk membuka layar yang sesuai.
  • Lambda onClick dari Tab memperbarui status selectedDestination untuk menandai tab yang diklik secara visual.
  • Composable ini memanggil composable AppNavHost, meneruskan navController dan startDestination, untuk menampilkan konten sebenarnya dari layar yang dipilih.

Hasil

Gambar berikut menunjukkan hasil cuplikan sebelumnya:

3 tab yang disusun secara horizontal di bagian atas layar aplikasi. Tabnya adalah Lagu, Album, dan Playlist, dengan tab Lagu dipilih dan digarisbawahi.
Gambar 2. 3 tab—Lagu, Album, dan Playlist—yang disusun secara horizontal.

Referensi lainnya