Android Jetpack Navigation Kullanımı

Projenin en az backend yazılımının iyi olması kadar kullanıcısını doğru tanıyan, onların istek ve beklentileri öngörerek bunu kullanıcı arayüz ekranlarına doğru ve işlevsel bir tasarım olarak aktarmak da çok önemlidir. Bu yüzden, tasarımda kullanıcı deneyimini arttıran elementler kullanmanın önemi büyüktür.

Bu makalemde, sayfa geçişi olan tasarımların oluşturmasını kolaylaştıran Navigation Editor ile Jetpack Navigation Component kullanımını örnekleyerek anlatacağım.

Jetpack Navigation kütüphanesi, AndroidX yapısını kullanmaktadır. Bu yüzden ilk önce projelerinizi AndroidX yapısına geçişini sağlamalısınız. Bu konuda AndroidX Kütüphanesine Geciş adlı makalemden faydalanabilirsiniz.

jetpack-security

Bu örnek de olduğu gibi Jetpack Navigation Component’i uygulayabilmek için aşağıdaki belirttiğim adımları uygulamalısınız.

1-Gerekli Kütüphanelerin Eklenmesi

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Navigation kütüphanelerini yüklüyoruz.

2-Navigation Graph Oluşturma

Navigation Graph, Navigation mimarisinin ana gövdesidir. Xml kodlamaya sahiptir. Navigation içinde barınan fragment yapısını, kolaylıkla eklenmesini sağlayan visual editor barındırır.

Navigation Graph eklemek ve sayfa geçişleri için arayüz tarafındaki adımları yapmak için aşağıdaki hazırladığım videoyu izleyiniz.

Navigation Graph XML

Video anlatımında, res->navigation dizini içinde oluşturduğum Navigation Graph XML yapısı, geçiş yapılacak fragment sayfalarının tanımlandığı ana gövdedir. Örneğimizde 3 tane sayfa olduğu için nav_graph.xml’de 3 tane fragment tanımladım.

Navigation Editor, Design sekmesinden fragment sayfalarını oluşturduğunuzda, sizin için Android Studio xml ve Java sınıflarını oluşturur. Videoda, Navigation Editor Design sekmesinde  sayfaları birbirine bağlandığı  anda, xml dosyasında action tagleri oluşmaktadır. Bu sayfalar arası geçiş için bir aksiyon tanımlamasıdır.

Xml sayfalarında (video belirttiğim gibi) background renk verme ve button ekleme işlemi ile örnek arayüz kodlarımızı oluşturduk. Oluşturduğum fragment_home. xml, fragment_second.xml ve fragment_third.xml kodlarına, github linkinden ulaşabilirsiniz.

Navigation Graph XML dosyasında, navigation tag’a eklenen, app:startDestination özelliğinde tanımlanan xml dosyası, navigasyonun ilk görünen sayfa olacaktır. startDestination özelliğini kullandığımızdan kaynaklı, Activity sınıfında Navigation yapısını başlatmakla alakalı hiç bir java kodlama yazmamıza gerek kalmamaktadır.:)

nav_graph.xml kodları

Navigation Host Fragment

Kullanılan  layout ile Navigation Graph XML arasında bağlantı kurabilmesi için, layout da fragment tag içine app:navGraph özelliğini ekleyerek, Navigation Graph XML (nav_graph.xml) dosyasını tanımlamanız gerekir. app:defaultNavHost tag  değeri true ise telefonun geri tuşuna bastığınızda, bir önceki fragment sayfasına geçişini sağlar. Son olarak fragment’ın name özeliğine, NavHostFragment ekleyerek Navigation Host Fragment yapısını oluşturduk. Örnek activity_main kodları;

Java ile Sayfa Geçişi Sağlama

Navigation Host Fragment id değerini(activity_main.xml), NavController sınıfının findNavController metodunda kullanmalıyız. NavController sınıfının navigate metodunda yapılacak aksiyon idsi belirtilir. Böylelikle bir fragment sayfasından diğer fragment sayfasına geçişi sağlarız.Daha öncede belirttiğim üzere, bu aksiyonlar Navigation Graph XML (nav_graph.xml) dosyasında oluşturulmalıdır.

HomeFragment java sınıfı

SecondFragment java sınıfı

ThirdFragment java sınıfı

Kodları github linkinden indirebilirsiniz

 

Kategori Genel
Etiketler