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 sahip dört hedef (Tüm Dosyalar, Son, Fotoğraflar ve Kitaplık) ve kayan işlem düğmesi içeren dikey bir gezinme çubuğu.
Şekil 1. 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 rayları nasıl göstereceğiniz açıklanmaktadır.

API yüzeyi

Uygulamanızda bir ray uygulamak için NavigationRailItem ile NavigationRail composable'ını 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 burada gezinme etkinliklerini işler, seçili ray öğesinin durumunu günceller veya ilgili içeriği yüklersiniz.
  • label: Demiryolu öğesindeki metni gösterir. İsteğe bağlı.
  • icon: Reklam sütunu öğesinde bir simge gösterir. İsteğe bağlı.

Örnek: Ray tabanlı gezinme

Aşağıdaki snippet, kullanıcıların bir uygulamadaki farklı ekranlar arasında gezinmesini sağlamak için 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)
    }
}

Ö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) }, seçili 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.
  • onClick, NavigationRailItem lambda'sı, selectedDestination durumunu güncelleyerek tıklanan ray öğesini görsel olarak vurgular.
  • 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 ilişkili simgelerle 3 hedefin bulunduğu dikey bir gezinme çubuğu. Simgeler, çubuktaki her gezinme düğmesinin amacını görsel olarak gösterir. Her hedefle alakalı bir simge eşleştirilir (ör. "Şarkılar" için bir nota).
Şekil 2. Şarkılar, Albüm ve Oynatma Listesi olmak üzere ilişkili simgelerle 3 hedef içeren bir gezinme çubuğu.

Ek kaynaklar