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ında, üst uygulama çubuğunun altına yerleştirilir. Ana içerik hedeflerini gösterir ve yalnızca bir grup sekme gerektiğinde kullanılmalıdır.
  • İkincil sekmeler: İçerik alanında, ilgili içeriği daha fazla ayırmak ve hiyerarşi oluşturmak için kullanılır. Bir ekranda birden fazla sekme düzeyi gerektiğinde bu düğmeler gereklidir.
İlişkili simgelerle (Uçuşlar, Seyahatler ve Keşfet) birlikte 3 ana sekme gösterilir. İlişkili simgeler olmadan 2 ikincil sekme (Genel Bakış, Özellikler) gösterilir.
1. Şekil. Birincil sekmeler (1) ve ikincil sekmeler (2).

Bu sayfada, uygulamanızdaki birincil sekmelerin ilgili ekranlar ve temel gezinme ile nasıl gösterileceği açıklanmaktadır.

API yüzeyi

Sekmeleri uygulamak için Tab, PrimaryTabRow ve SecondaryTabRow composable'larını kullanın. Tab composable, satırdaki tek bir sekmeyi temsil eder ve genellikle 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ı sekme üzerinde tıkladığında gerçekleştirilecek işlemi tanımlayan zorunlu bir lambda işlevi. Genellikle gezinme etkinliklerini burada işler, 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 etkinleştirilip etkinleştirilmediğini ve sekmeyle etkileşime girilip girilemeyeceğini kontrol eder. Yanlış olarak ayarlanırsa sekme devre dışı durumda görünür ve tıklamalara yanıt vermez.

Örnek: Sekme tabanlı 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 sekmenin bir Destination ile eşleştiği yatay bir sekme satırı gösterir.
  • val navController = rememberNavController(), NavHostController örneği oluşturur ve hatırlar. Bu örnek, NavHost içindeki gezinmeyi yönetir.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }, seçili sekmenin durumunu yönetir.
    • startDestination.ordinal, Destination.SONGS enum girişinin sayısal dizinini (konumunu) alır.
  • Bir sekmeyi tıkladığınızda onClick lambda çağrıları navController.navigate(route = destination.route) ilgili ekrana gitmek için kullanılır.
  • Tab lambda'sı, tıklanan sekmeyi görsel olarak vurgulamak için selectedDestination durumunu onClick olarak günceller.
  • Seçilen ekranın gerçek içeriğini görüntülemek için AppNavHost composable'ını çağırır, navController ve startDestination değerlerini 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 bulunur. Şarkılar sekmesi seçili ve altı çizilidir.
Şekil 2. Yatay olarak düzenlenmiş 3 sekme (Şarkılar, Albüm ve Oynatma Listesi)

Ek kaynaklar