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 saat hanya satu set tab yang diperlukan.
  • Tab sekunder: Digunakan dalam area konten untuk memisahkan lebih lanjut konten terkait dan membuat hierarki. Tab ini diperlukan saat 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 mengimplementasikan 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 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 false, tab akan muncul dalam status nonaktif dan tidak akan merespons klik.

Contoh: Navigasi berbasis tab

Cuplikan berikut mengimplementasikan menu navigasi atas dengan tab untuk beralih antar-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)
    }
}

Poin-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.
  • Fungsi 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— disusun secara horizontal.

Referensi lainnya