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ırlar.
  • İkincil sekmeler: İlgili içeriği daha fazla 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 kullanılırlar.
İlişkili simgelerle birlikte 3 ana sekme gösterilir (Uçuşlar, Geziler ve Keşfet). İlişkili simgeler olmadan 2 ikincil sekme (Genel Bakış, Teknik Özellikler) gösteriliyor.
Şekil 1. Birincil sekmeler (1) ve ikincil sekmeler (2).

Bu sayfada, uygulamanızda ilgili ekranlar ve temel gezinme ile birincil sekmelerin 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: Mevcut 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 işlediğiniz, seçili sekme durumunu güncellediğiniz veya ilgili içeriği yüklediğiniz yer burasıdır.
  • text: Sekmede metin gösterir. İsteğe bağlı.
  • icon: Sekmede bir simge gösterir. İsteğe bağlı.
  • enabled: Sekmenin etkinleştirilip etkinleştirilmediğini ve sekme ile etkileşim kurulup kurulamayacağını kontrol eder. Yanlış değerine ayarlanırsa sekme devre dışı durumda görünür 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)
    }
}

Önemli noktalar

  • PrimaryTabRow, her sekmenin bir Destination öğesine karşılık geldiği yatay bir sekme satırı gösterir.
  • val navController = rememberNavController(), NavHost içinde gezinmeyi yöneten bir NavHostController örneği oluşturur ve hatırlar.
  • 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, ilgili ekrana gitmek için navController.navigate(route = destination.route) işlevini çağırır.
  • Tab öğesinin onClick lambda'sı, tıklanan sekmeyi görsel olarak vurgulamak için selectedDestination durumunu günceller.
  • Seçilen ekranın gerçek içeriğini görüntülemek için navController ve startDestination değerlerini ileterek AppNavHost composable'ını çağırır.

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österiliyor. Şarkılar sekmesi seçili ve altı çizili.
Şekil 2. Yatay olarak düzenlenmiş 3 sekme: Şarkılar, Albüm ve Oynatma Listesi.

Ek kaynaklar