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,
1. Şekil. 4 hedef içeren bir gezinme çubuğu.

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

API yüzeyi

Hedef değiştirme mantığını uygulamak için NavigationBar ve NavigationBarItem composable'larını 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ının öğeyi tıkladığında gerçekleştirilecek işlemi tanımlayan zorunlu bir lambda işlevi. Genellikle gezinme etkinliklerini burada işler, seçili öğe durumunu günceller veya ilgili içeriği yüklersiniz.
  • label: Öğedeki metni gösterir. İsteğe bağlıdır.
  • icon: Öğede bir simge gösterir. İsteğe bağlıdır.

Örnek: Alt gezinme çubuğu

Aşağıdaki snippet, kullanıcıların bir uygulamada farklı ekranlar arasında gezinmesini sağlamak 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 öğenin bir Destination ile eşleştiği bir öğe koleksiyonunu 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) } ş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.
  • onClick NavigationBarItem lambdası, tıklanan öğeyi 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 AppNavHost composable'ını çağırır, navController ve startDestination değerlerini iletir.

Sonuç

Aşağıdaki resimde, önceki snippet'ten elde edilen gezinme çubuğu gösterilmektedir:

Alt gezinme çubuğunda yatay olarak listelenen 3 hedef içeren bir uygulama ekranı: Şarkılar, Albüm ve Oynatma Listesi. Her hedefle alakalı bir simge eşleştirilir (ör. "Şarkılar" için nota simgesi).
Şekil 2. Şarkılar, Albüm ve Oynatma Listesi olmak üzere ilişkili simgelerle 3 hedef içeren bir gezinme çubuğu.

Ek kaynaklar