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 derecede önemli üç ila beş hedef
  • Kompakt pencere boyutları
  • Uygulama ekranlarında tutarlı hedefler
4 hedef içeren bir gezinme çubuğu. Her hedefin
Şekil 1. 4 hedef içeren bir gezinme çubuğu.

Bu sayfada, uygulamanızda ilgili ekranlar ve temel gezinme ile bir gezinme çubuğunun nasıl gösterileceği gösterilmektedir.

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ımlayan zorunlu bir lambda işlevi. Burada genellikle gezinme etkinliklerini yönetir, seçili öğe durumunu günceller veya ilgili içeriği yüklersiniz.
  • label: Öğe içinde metin gösterir. İsteğe bağlıdır.
  • icon: Öğe içinde bir simge gösterir. İsteğe bağlıdır.

Ö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))
    }
}
Navigation.kt

Önemli noktalar

  • NavigationBar, her biri bir Destination'a karşılık gelen bir öğe koleksiyonu 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 öğenin durumunu yönetir.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }, şu anda 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 işlevinin onClick lambdası, tıklanan öğeyi 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'ten oluşturulan gezinme çubuğu gösterilmektedir:

Alt gezinme çubuğunda yatay olarak listelenen 3 hedefin yer aldığı bir uygulama ekranı: Şarkılar, Albüm ve Oynatma Listesi. 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'nin ilişkili simgeleriyle birlikte 3 hedef içeren bir gezinme çubuğu.

Ek kaynaklar