Gezinme çubuğu

Raylar, büyük ekranlı cihazlarda çalışan uygulamalardaki hedeflere erişim sağlar. Gezinme raylarını şu amaçlarla kullanmalısınız:

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

Bu sayfada, uygulamanızda rayların ilgili ekranlarla ve temel gezinmeyle nasıl gösterileceği gösterilmektedir.

API yüzeyi

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

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

  • selected: Geçerli demiryolu öğesinin görsel olarak vurgulanıp vurgulanmayacağını belirler.
  • onClick(): Kullanıcı demiryolu öğesini tıkladığında gerçekleştirilecek işlemi tanımlayan zorunlu bir lambda işlevi. Genellikle gezinme etkinliklerini burada yönetir, seçili demiryolu öğesi durumunu günceller veya ilgili içeriği yüklersiniz.
  • label: Metni demiryolu öğesinde gösterir. İsteğe bağlıdır.
  • icon: Ray öğ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 gezinebilmesi için bir gezinme çubuğu 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 biri bir Destination'a karşılık gelen dikey bir demiryolu öğesi sütunu 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) }, geçerli olarak seçili reklam sütunu öğesinin durumunu yönetir.
    • startDestination.ordinal, Destination.SONGS enum girişinin sayısal dizinini (konumunu) alır.
  • Bir demiryolu öğesi tıklandığında, ilgili ekrana gitmek için navController.navigate(route = destination.route) çağrılır.
  • NavigationRailItem öğesinin onClick lambdası, tıklanan demiryolu öğesini 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'in sonucu gösterilmektedir:

Şarkılar, Albüm ve Oynatma Listesi'nin ilişkili simgeleriyle birlikte 3 hedefin yer aldığı dikey bir gezinme çubuğu. Simgeler, çubuğundaki her gezinme düğmesinin amacını görsel olarak gösterir. Her hedefin yanında alakalı bir simge bulunur (ör.
Şekil 2. Şarkılar, Albüm ve Oynatma Listesi'nin ilişkili simgeleriyle birlikte 3 hedef içeren bir gezinme çubuğu.

Ek kaynaklar