Sekmeler

Sekmeler, ilgili içerik gruplarını düzenlemenize olanak tanır. İki tür sekme vardır:

  • Birincil sekmeler: İçerik bölmesinin üst kısmına, üst uygulama çubuğunun altına yerleştirilir. Ana içerik hedeflerini gösterirler ve yalnızca bir sekme grubu gerektiğinde kullanılmalıdır.
  • İkincil sekmeler: İlgili içeriği daha da ayırmak ve hiyerarşi oluşturmak için bir içerik alanında kullanılır. Bir ekranda birden fazla sekme düzeyi gerektiğinde gereklidir.
3 birincil sekme, ilişkili simgelerle gösterilir (Uçuşlar, Geziler ve Keşfet). İlişkili simgeler olmadan 2 ikincil sekme (Genel Bakış, Özellikler) gösterilir.
Şekil 1. Birincil sekmeler (1) ve ikincil sekmeler (2).

Bu sayfada, uygulamanızda birincil sekmelerin ilgili ekranlarla ve temel gezinmeyle nasıl gösterileceği gösterilmektedir.

API yüzeyi

Sekmeleri uygulamak için Tab, PrimaryTabRow ve SecondaryTabRow bileşenlerini kullanın. Tab bileşimi, satırdaki tek bir sekmeyi temsil eder ve genellikle bir PrimaryTabRow (birincil gösterge sekmeleri için) veya SecondaryTabRow (ikincil gösterge sekmeleri için) içinde kullanılır.

Tab aşağıdaki temel parametreleri içerir:

  • selected: Geçerli sekmenin görsel olarak vurgulanıp vurgulanmayacağını belirler.
  • onClick(): Kullanıcı sekmeyi tıkladığında gerçekleştirilecek işlemi tanımlayan zorunlu bir lambda işlevi. Genellikle gezinme etkinliklerini burada ele alır, seçili sekme durumunu günceller veya ilgili içeriği yüklersiniz.
  • text: Sekmedeki metni gösterir. İsteğe bağlıdır.
  • icon: Sekmede bir simge gösterir. İsteğe bağlıdır.
  • enabled: Sekmenin etkin olup olmadığını ve sekmeyle etkileşim kurulup kurulamayacağını kontrol eder. Yanlış değerine ayarlanırsa sekme devre dışı durumda gösterilir ve tıklamalara yanıt vermez.

Örnek: Sekmeye dayalı gezinme

Aşağıdaki snippet, bir uygulamadaki farklı ekranlar arasında gezinmek için sekmeler içeren bir üst gezinme çubuğu uygular:

@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

Önemli noktalar

  • PrimaryTabRow, her sekme bir Destination'a karşılık gelecek şekilde yatay bir sekme satırı gösterir.
  • val navController = rememberNavController(), NavHost içindeki gezinmeyi yöneten bir NavHostController örneği oluşturup hatırlar.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }, şu anda seçili sekmenin durumunu yönetir.
    • startDestination.ordinal, Destination.SONGS enum girişinin sayısal dizinini (konumunu) alır.
  • Bir sekme tıklandığında, ilgili ekrana gitmek için navController.navigate(route = destination.route) çağrılır.
  • Tab işlevinin onClick lambdası, tıklanan sekmeyi görsel olarak vurgulamak için selectedDestination durumunu günceller.
  • Seçilen ekranın asıl içeriğini görüntülemek için AppNavHost bileşenini çağırır ve navController ile startDestination parametrelerini iletir.

Sonuç

Aşağıdaki resimde önceki snippet'in sonucu gösterilmektedir:

Uygulama ekranının üst kısmında yatay olarak düzenlenmiş 3 sekme. Şarkılar, Albüm ve Oynatma Listesi sekmeleri gösterilir. Şarkılar sekmesi seçili ve altı çizilidir.
Şekil 2. Şarkılar, Albüm ve Oynatma Listesi olmak üzere yatay olarak düzenlenmiş 3 sekme

Ek kaynaklar