Gezinme çubuğu

Gezinme çubuğu, kullanıcıların bir uygulamadaki hedefler arasında geçiş yapmasına olanak tanır. Gezinme çubuklarını şu amaçlarla kullanmalısınız:

  • Eşit öneme sahip üç ila beş hedef
  • Kompakt pencere boyutları
  • Uygulama ekranlarında tutarlı hedefler
4 hedef içeren bir gezinme çubuğu. Her hedefin "Etiket" adlı bir yer tutucu adı vardır. Seçilen hedef daire simgesiyle, diğer hedefler ise üçgen simgesiyle gösterilir.
Şekil 1. 4 hedef içeren bir gezinme çubuğu.

Bu sayfada, uygulamanızda ilgili ekranlar ve temel gezinme özellikleriyle gezinme çubuğunu nasıl göstereceğiniz açıklanmaktadır.

API yüzeyi

Hedef değiştirme mantığını uygulamak için NavigationBar ve NavigationBarItem bileşenlerini kullanın. Her NavigationBarItem tek bir hedefi temsil eder.

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

  • selected: Geçerli öğenin görsel olarak vurgulanıp vurgulanmayacağını belirler.
  • onClick(): Kullanıcı öğeyi tıkladığında gerçekleştirilecek işlemi tanımlar. Gezinme etkinliklerini işleme, seçili öğe durumunu güncelleme veya ilgili içeriği yükleme mantığı burada yer alır.
  • label: Öğe içindeki metni gösterir. İsteğe bağlı.
  • icon: Öğenin içinde bir simge gösterir. İsteğe bağlı.

Örnek: Alt gezinme çubuğu

Aşağıdaki snippet, kullanıcıların bir uygulamadaki farklı ekranlar arasında gezinebilmesi için öğeler içeren bir alt gezinme çubuğu uygular:

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}

Önemli noktalar

  • NavigationBar, her bir öğenin bir Destination öğesine karşılık geldiği bir öğe koleksiyonu 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 öğenin durumunu yönetir.
    • startDestination.ordinal, Destination.SONGS enum girişinin sayısal dizinini (konumunu) alır.
  • Bir öğe tıklandığında ilgili ekrana gitmek için navController.navigate(route = destination.route) çağrılır.
  • NavigationBarItem öğesinin onClick lambda'sı, tıklanan öğeyi görsel olarak vurgulamak için selectedDestination durumunu günceller.
  • Gezinme mantığı, 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'ten elde edilen gezinme çubuğu gösterilmektedir:

Alt gezinme çubuğunda yatay olarak listelenen 3 hedefin (Şarkılar, Albüm ve Oynatma Listesi) bulunduğu bir uygulama ekranı. Her hedefin yanında alakalı bir simge bulunur (ör. "Şarkılar" için müzik notası).
Şekil 2. Şarkılar, Albüm ve Oynatma Listesi olmak üzere 3 hedef ve bunlarla ilişkili simgeler içeren bir gezinme çubuğu.

Ek kaynaklar