Android Jetpack Navigation Component #1 Fragmentler Arası Geçiş İşlemleri
Navigation, uygulamada ekranlar arasında yapılan geçişler demektir. Biz normalde bu geçiş işlemlerini manuel olarak yapardık. Navigation componenti bu geçişleri daha tutarlı bir şekilde yapmamızı sağlar. Bunun yanında geri butonuna basılması, veri taşıma, animasyon gibi konularda da işimizi kolaylaştırıyor.
Bu yazıda navigation component kurulumunu, ekranlar arası geçiş işlemini ve geçişlere animasyon ekleme işlemlerini anlatmaya çalışacağım. Keyifli okumalar.
Navigation; Navigation Graph, NavHost, NavController olmak üzere 3 temel parçadan oluşur. NavigationGraph ekranlarımızın ve geçişlerimizin içinde olduğu bir xml dosyasıdır. NavHost uygulamadaki ekranlarımızın barındığı ortamdır. SingleActivity-MultiFragment yapısı için Activity olarak düşünebilirsiniz. NavController ise NavigationGraph içerisinde bulunan ekranlar arası geçişleri yapmamızı, yönetmemizi sağlayan yapıdır. Eğer kafanızda biraz soyut kaldıysa merak etmeyin şimdi adım adım yapacağız.
Öncelikle dependecy’leri ekleyelim. Alltaki dependencyleri build.gradle(Module:app) dosyasına ekleyelim.
//NavigationComponent dependencies
def nav_version = "2.3.0"
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"Alttaki dependencyleri ise build.gradle(Project:…) dosyasında dependencies bloğunun içine yazalım.
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.3.0"Daha sonra ekranlarımızı tasarlayalım. (Ekran tasarımını burada yapmayacağım. Ama buraya basarak konu ile ilgili githubdaki projeme ulaşabilirsiniz.)
NAVIGATION GRAPH OLUŞTURMA
Şimdi de ekranlar arasındaki geçişleri belirtmemizi sağlayan Navigation Graph dosyamızı ekleyelim. Bunun için Res → New → Android Resource File tıklayıp kaynak tipi navigation olan navigation_graph adlı bir dosya oluşturalım.
Bu dosyanın design kısmını açalım. Yeni bir ekran eklemek için sol üstteki + butonuna basalım. Burada ekranlarınızı sırasıyla eklemenizi tavsiye ederim. Önce giriş yapma ekranı, sonra kayıt olma ekranı, sonra anasayfanız gibi. Tabiki bu sıralama uygulamanızın yapısına göre değişebilir.
Aşağıdaki gif resminde nasıl ekleyebileceğinizi daha detaylı görebilirsiniz.
Biz ekranlarımızı yukarıdaki şekilde eklerken ide bizim için onun kodlarını navigation_graph dosyasına yazar. İncelemek isterseniz Xml / Code kısmına ekranına geçebilirsiniz.
Şimdi de hangi ekrandan hangi ekrana geçiş yapıldığını belirtelim. Örneğin SplashFragmentimizde kullanıcının giriş yapıp yapmadığını kontrol ediyor olalım. Kullanıcının giriş yapmış olması halinde HomeFragmente aksi takdirde LoginFragmente yönlendirelim. LoginFragmentte de kullanıcı SignUp fragmentine geçebiliyor ve dönebiliyor olsun. Bu işlemi aşağıdaki gifteki gibi yapabiliriz. Başını kaçırırsanız lütfen tekrar başa dönmesini bekleyin.
Yine biz bu işlemleri yaparken ide bizim için bu işlemlerin kodlarını xml tarafına yazıyor. İncelerseniz bu sefer fragment tagleri içerisine action taglerinin geldiğiniz göreceksiniz.
NAVHOST EKLEME
NavigationGraph ile işimiz bittiğine göre artık NavHost’a geçebiliriz. NavHost ekranlarımızı barındıran ortamdır. Bunun için main_activity.xml dosyasına şu kodları yazıyoruz.
Eklediğimiz fragmentin NavHost’a ait fragment olduğunu belirtmek için android:name satırını ekliyoruz. Daha sonra bu fragmentin hangi Navigation Graph dosyasını host edeceğini app:navGraph satırı ile belirtiyoruz. Son olarak bu fragmentin uygulamadaki varsayılan NavHost olduğunu belirtmek için app:defaultNavHost=true kodunu ekliyoruz.
NavHost ile işimiz bitti. Buraya kadar ekranlarımız arasındaki geçişleri ve bu geçişlerin hangi host üzerinden yapılacağını belirttik. Şimdi de bu geçişleri yapma adımına geçelim.
EKRANLAR ARASI GEÇİŞ YAPMA
Geçişleri yapmak için bir tane NavController nesnesine ihtiyacımız var. Bu nesneyi elde ettikten sonra nesnenin navigate fonksiyonunu kullanarak geçişleri yapabiriz. Navigate fonksiyonuna NavigationGraph içerisindeki gerçekleşmesini istediğimiz geçişin (action tagleri) id değerini parametre olarak veririz. Bir Fragment için aşağıdaki kodu inceleyelim.
Öncelikle NavController sınıfından bir nesne referansı üretiyoruz. Daha sonra onViewCreated metodunda bu nesneyi oluşturuyor, initalize ediyoruz. Daha sonra kayıt ol butonuna tıklanıldığında bu nesnenin navigate fonksiyonu yardımıyla ekran geçişini sağlıyoruz. Tıklama olayını yorum satırı haline getirdiğim şekilde de yakalayabiliriz. Bu geçişin yapıldığı navigation_graph kodu ise şöyle
Dikkat edeceğiniz üzere Kotlin tarafında navigate fonksiyonuna xml dosyasındaki action taginin id değerini parametre olarak gönderdik. Bu sayede giriş ekranından kayıt olma ekranına geçmiş olduk.
Kayıt ekranında kullanıcının geri butonuna basması halinde navigation bu olayı yakalayacak ve bir önceki ekrana dönme işlemini kendisi otomatik olarak gerçekleştirecek. Bizim manuel olarak yönetimini yapmaktan kurtaracaktır.
BİR EKRANDAN GERİ DÖNÜLMESİNİ ENGELLEME
Bazen uygulamalarımızda kullanıcıların bazı ekranlardan geri dönmesini istemeyiz. Örneğin giriş yapma ekranından bilgilerini girdikten sonra anasayfaya geçen kullanıcının geri butonuna basması halinde giriş ekranına dönmesini değil de direk uygulamadan çıkmasını isteriz. Bunu navigation component ile yapmak için action taginin içine
app:popUpTo=”@id/loginFragment”
app:popUpToInclusive=”true”
kodlarını eklememiz gerekir.
Bu sayede LoginFragmentten HomeFragmete gidildikten sonra kullanıcının geri basması halinde navigation kullanıcıyı giriş ekranına yönlendirmek yerine direk uygulamadan çıkmasını sağlayacaktır.
EKRANLAR ARASI GEÇİŞE ANİMASYON EKLEME
Öncelikle animasyon klasörümüzü ve animasyon dosyalarımızı oluşturuyoruz. Daha sonra animasyon eklemek istediğimiz geçişin action taginin içine aşağıdaki gibi 4 satır kod ekliyoruz. Sağlıklı bir giriş ve çıkış animasyonu için 4 satırıda eklemenizi tavsiye ederim.
İlgili resourceları burada yazmadım. Onları buraya tıklayarak konu ile ilgili githubdaki projemden alabilirsiniz.
Bu yazımda Navigation Component ile ekranlar arası geçiş yapmayı, gidilen ekrandan geri dönmeyi engellemeyi, geçişlere animasyon eklemeyi anlatmaya çalıştım. Sonraki yazımda Navigation ile ekranlar arası geçişte nasıl veri taşıyabileceğimizi anlatmaya çalışacağım. Yazıyı beğendiyseniz 👏 butonuna basarsanız sevinirim. Daha fazla insanın faydalanması için paylaşmanızı rica ederim. Buna benzer yazıları yazmaya devam etmeyi düşünüyorum. Yazdıklarımdan haberdar olmak için takip edebilirsiniz. Sonraki yazı da görüşmek üzere.
