Gezinme çubuğu

Raylar, büyük ekranlı cihazlarda çalışan uygulamalardaki hedeflere erişim sağlar. Aşağıdaki durumlarda gezinme raylarını kullanmalısınız:

  • Bir uygulamanın herhangi bir yerinden erişilmesi gereken üst düzey hedefler
  • Üç ila yedi ana hedef
  • Tablet veya masaüstü düzenleri
Bir ekranın sol tarafında, her biri ilişkili bir simgeye ve kayan işlem düğmesine sahip dört hedef (Tüm Dosyalar, Son, Fotoğraflar ve Kitaplık) içeren dikey bir gezinme çubuğu.
1. Şekil. Dört hedef ve bir kayan işlem düğmesi içeren gezinme çubuğu.

Bu sayfada, uygulamanızda ilgili ekranlar ve temel gezinme ile birlikte nasıl bant göstereceğiniz açıklanmaktadır.

API yüzeyi

Uygulamanızda bir bant uygulamak için NavigationRail composable'ı NavigationRailItem ile birlikte kullanın. NavigationRailItem, ray sütunundaki tek bir ray öğesini temsil eder.

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

  • selected: Mevcut ray öğesinin görsel olarak vurgulanıp vurgulanmayacağını belirler.
  • onClick(): Kullanıcı, bant öğesini tıkladığında gerçekleştirilecek işlemi tanımlayan zorunlu bir lambda işlevi. Genellikle gezinme etkinliklerini işlediğiniz, seçili ray öğesinin durumunu güncellediğiniz veya ilgili içeriği yüklediğiniz yerdir.
  • label: Ray öğesindeki metni gösterir. İsteğe bağlıdır.
  • icon: Bant öğesinde bir simge gösterir. İsteğe bağlıdır.

Örnek: Ray tabanlı gezinme

Aşağıdaki snippet, kullanıcıların bir uygulamadaki farklı ekranlar arasında gezinmesini sağlamak için bir gezinme sütunu uygular:

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

    Scaffold(modifier = modifier) { contentPadding ->
        NavigationRail(modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                NavigationRailItem(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    icon = {
                        Icon(
                            destination.icon,
                            contentDescription = destination.contentDescription
                        )
                    },
                    label = { Text(destination.label) }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Önemli noktalar

  • NavigationRail, her öğenin Destination ile eşleştiği bir ray öğeleri dikey sütunu 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 olan ray öğesinin durumunu yönetir.
    • startDestination.ordinal, Destination.SONGS enum girişinin sayısal dizinini (konumunu) alır.
  • Bir bant öğesi tıklandığında, ilgili ekrana gitmek için navController.navigate(route = destination.route) çağrılır.
  • NavigationRailItem öğesinin onClick lambdası, tıklanan ray öğesini 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'in sonucu gösterilmektedir:

Şarkılar, Albüm ve Oynatma Listesi olmak üzere 3 hedef içeren ve ilişkili simgelerin bulunduğu dikey bir gezinme çubuğu. Simgeler, raydaki her gezinme düğmesinin amacını görsel olarak gösterir. Her hedefle ilgili bir simge eşleştirilir (ör.
Şekil 2. Şarkılar, Albüm ve Oynatma Listesi olmak üzere ilişkili simgelerle 3 hedef içeren bir gezinme çubuğu.

Ek kaynaklar