Jetpack Compose - ScrollableTabRow

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

ScrollableTabRow pada Jetpack Compose

ScrollableTabRow adalah komponen UI di Jetpack Compose yang mirip dengan TabRow, tetapi memungkinkan pengguna untuk menelusuri tab secara horizontal ketika tab lebih banyak dari yang dapat ditampilkan dalam layar. Ini berguna ketika Anda memiliki banyak tab atau tab dengan teks panjang yang tidak muat dalam layar.

Kapan Harus Menggunakan ScrollableTabRow:

• Banyak Tab: Ketika Anda memiliki banyak tab yang tidak dapat muat dalam layar secara horizontal.
• Tab dengan Teks Panjang: Ketika teks pada tab panjang dan tidak muat dalam lebar layar.

Perbedaan dengan TabRow:

• Scrollability: ScrollableTabRow dapat digulir secara horizontal, sedangkan TabRow menampilkan semua tab yang dapat muat dalam lebar layar.
• Penggunaan Ruang: ScrollableTabRow memungkinkan Anda menampilkan lebih banyak tab tanpa mengorbankan ukuran teks atau ikon tab.

Parameter/Atribut

@Composable
fun ScrollableTabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    containerColor: Color = TabRowDefaults.containerColor,
    contentColor: Color = TabRowDefaults.contentColor,
    edgePadding: Dp = ScrollableTabRowPadding,
    indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
        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 DemoScrollableTabRow(modifier: Modifier = Modifier) {
    ScrollableTabRow(selectedTabIndex = 1) {
        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 */ }
        )
        Tab(
            selected = false,
            content = { Text("Tab 4") },
            onClick = { /* Handle tab 4 click */ }
        )
        Tab(
            selected = false,
            content = { Text("Tab 5") },
            onClick = { /* Handle tab 5 click */ }
        )
    }
}

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video