Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - TabRow

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

TabRow pada Jetpack Compose

TabRow adalah komponen UI di Jetpack Compose yang digunakan untuk menampilkan beberapa tab secara horizontal. Setiap tab biasanya berisi teks atau ikon yang mewakili konten yang berbeda. Pengguna dapat memilih tab untuk beralih antara konten yang berbeda.

Kapan Harus Menggunakan TabRow:

Navigasi Antar Halaman: TabRow cocok digunakan untuk navigasi antara beberapa halaman atau konten yang berbeda dalam aplikasi.
Pilihan Tidak Eksklusif: TabRow digunakan ketika Anda ingin pengguna dapat memilih beberapa tab sekaligus, bukan hanya satu pilihan eksklusif.
Navigasi Visual: Cocok digunakan untuk menyediakan navigasi yang visual dan intuitif, terutama jika konten aplikasi terbagi menjadi beberapa bagian atau kategori.

TabRow umumnya digunakan bersama dengan komponen seperti ViewPager atau pengelolaan konten yang serupa untuk menampilkan konten yang sesuai dengan tab yang dipilih.

Parameter/Atribut

@Composable
fun TabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    containerColor: Color = TabRowDefaults.containerColor,
    contentColor: Color = TabRowDefaults.contentColor,
    indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
        if (selectedTabIndex < tabPositions.size) {
            TabRowDefaults.Indicator(
                Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
            )
        }
    },
    divider: @Composable () -> Unit = @Composable {
        Divider()
    },
    tabs: @Composable () -> Unit
)

TabRow Parameter

selectedTabIndex: Int
- Indeks dari tab yang dipilih saat ini.
modifier: Modifier = Modifier
- Modifier yang dapat digunakan untuk menyesuaikan tata letak atau gaya TabRow.
containerColor: Color = TabRowDefaults.containerColor
- Warna latar belakang dari TabRow.
contentColor: Color = TabRowDefaults.contentColor
- Warna konten dalam TabRow seperti teks atau ikon.
indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions -> ... }
- Fungsi @Composable yang digunakan untuk menentukan penanda (indicator) dari tab-tab di TabRow. Ini menerima daftar posisi tab sebagai argumen dan mengembalikan unit @Composable untuk menggambar penanda yang sesuai dengan tab yang dipilih.
divider: @Composable () -> Unit = @Composable { Divider() }
- Fungsi @Composable yang digunakan untuk menentukan pembatas antara tab dalam TabRow. Secara default, Divider() digunakan sebagai pembatas antar tab.
tabs: @Composable () -> Unit
- Fungsi @Composable yang digunakan untuk mendefinisikan konten dari tab-tab dalam TabRow. Anda harus menyediakan fungsi ini untuk menentukan tab-tab yang akan ditampilkan.

Contoh

@Composable
fun DemoTabRow(modifier: Modifier = Modifier) {
    TabRow(
        selectedTabIndex = 0,
        tabs = {
            Tab(
                selected = true,
                content = { Text("Tab 1") },
                onClick = { /* Handle tab 1 click */ }
            )
            Tab(
                selected = false,
                content = { Text("Tab 2") },
                onClick = { /* Handle tab 2 click */ }
            )
            Tab(
                selected = false,
                content = { Text("Tab 3") },
                onClick = { /* Handle tab 3 click */ }
            )
        }
    )
}

Switch