Android Jetpack Navigation Component #1 Fragmentler Arası Geçiş İşlemleri
Tags: kotlin, jetpack, androidappdevelopment, fragments
Published: 2022-06-17 07:06:17

---
title: Android Jetpack Navigation Component #1 Fragmentler Arası Geçiş İşlemleri
published: true
date: 2022-17-06 22:49:03 UTC
tags: kotlin,jetpack,androidappdevelopment,fragments
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*u_EjKe1NGd7acnTO74lk7w.png)

**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**](https://github.com/cengiztoru/Sample-Navigation-Component-Example)basarak konu ile ilgili [**githubdaki projeme**](https://github.com/cengiztoru/Sample-Navigation-Component-Example) 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.

![](https://cdn-images-1.medium.com/max/1024/1*4ooUotYvTZdPTiXwY5HeMw.png)

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.

![](https://cdn-images-1.medium.com/max/284/1*EmQzBiEeyPMCP8_gjpL0uQ.png)

Aşağıdaki gif resminde nasıl ekleyebileceğinizi daha detaylı görebilirsiniz.

![](https://cdn-images-1.medium.com/max/600/1*mv4UUP6R7Vpw6Z-BbHujlQ.gif)

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.

![](https://cdn-images-1.medium.com/max/600/1*h417ujS2Ov2_uGQFh6Ii_g.gif)

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.

{% gist https://gist.github.com/cengiztoru/03e37fff47c2647f6aeb3c3bced965b2 %}

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.

{% gist https://gist.github.com/cengiztoru/42bf3dac93e8a778e4f3dcc82b3ab245 %}

Ö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

{% gist https://gist.github.com/cengiztoru/edd902d8e8afec86da7b5887754aaa43 %}

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.

![](https://cdn-images-1.medium.com/max/476/1*H4-oG1Y_JZZg4Vi97AduvA.gif)
_Ekran geçiş örneği_

Kayıt ekranında kullanıcının **geri butonuna basma** sı 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.

{% gist https://gist.github.com/cengiztoru/1f4fc5df3393872570ae51cc6f8bc27c %}

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.

![](https://cdn-images-1.medium.com/max/472/1*b7UCtjSaZTmLsAzv_0z2sg.gif)

### 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.

{% gist https://gist.github.com/cengiztoru/e5af871c97476b86d1e07e4f69591b4c %}

İlgili resourceları burada yazmadım. Onları [b **uraya**](https://github.com/cengiztoru/Sample-Navigation-Component-Example)tıklayarak konu ile ilgili [**githubdaki projemde**](https://github.com/cengiztoru/Sample-Navigation-Component-Example) **n** alabilirsiniz.

![](https://cdn-images-1.medium.com/max/476/1*9ywctgpsCjw9bmvsNSxlRQ.gif)

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.

[Navigation Architecture Component #2 Veri Taşıma İşlemleri](https://medium.com/@cengiz.toru/navigation-architecture-component-2-veri-ta%C5%9F%C4%B1ma-i%CC%87%C5%9Flemleri-269775be977)

#### **LİNKLER**

[cengiztoru/Simple-Navigation-Component-Example](https://github.com/cengiztoru/Simple-Navigation-Component-Example)

[Navigation Component Google Guide](https://developer.android.com/guide/navigatio)