Gezinme çubuğu

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

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

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

API yüzeyi

Uygulamanızda sütun kullanmak 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: Geçerli ray öğesinin görsel olarak vurgulanıp vurgulanmayacağını belirler.
  • onClick(): Kullanıcı, ray öğesini tıkladığında gerçekleştirilecek işlemi tanımlayan zorunlu bir lambda işlevi. Genellikle gezinme etkinliklerini işlediğiniz, seçili sütun öğesi durumunu güncellediğiniz veya ilgili içeriği yüklediğiniz yer burasıdır.
  • label: Ray öğesindeki metni gösterir. İsteğe bağlı.
  • icon: Ray öğ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 gezinebilmesi için gezinme sütununu 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 bir Destination öğesine karşılık geldiği dikey bir ray öğeleri sütunu gösterir.
  • val navController = rememberNavController(), NavHost içinde gezinmeyi yöneten bir NavHostController örneği oluşturur ve hatırlar.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }, seçilen ray öğesinin durumunu yönetir.
    • startDestination.ordinal, Destination.SONGS enum girişinin sayısal dizinini (konumunu) alır.
  • Bir ray öğesi tıklandığında ilgili ekrana gitmek için navController.navigate(route = destination.route) çağrılır.
  • NavigationRailItem öğesinin onClick lambda'sı, 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 navController ve startDestination değerlerini ileterek AppNavHost composable'ını çağırır.

Sonuç

Aşağıdaki resimde, önceki snippet'in sonucu gösterilmektedir:

Şarkılar, Albüm ve Oynatma Listesi simgelerinin bulunduğu 3 hedefli dikey gezinme çubuğu. Simgeler, raydaki her gezinme düğmesinin amacını görsel olarak gösterir. Her hedefin yanında alakalı bir simge (ör. "Şarkılar" için müzik notası) bulunur.
Şekil 2. Şarkılar, Albüm ve Oynatma Listesi olmak üzere ilgili simgeleriyle birlikte 3 hedef içeren bir gezinme çubuğu.

Ek kaynaklar