Navigation Component Kullanımı

Navigation Component Nedir ve Nasıl Kullanılır?

Merhaba! Ben Kotlin ile Android Programlama Akademisi katılımcılarından Adile Güngör. Kotlin ile Android Programlama Akademisi, “Afetten Etkilenen Yazılımcı Gençlerin Güçlenmesi ve İstihdama Erişimi Projesi”, Sivil Toplum için Destek Vakfı ve Turkey Mozaik Foundation iş birliği ile hayata geçirilen Yerel Güçlenmeye Destek Fonu kapsamında sağlanan hibe desteğiyle gerçekleştirilmektedir.

Photo by Mitchel Willem Jacob Anneveldt on Unsplash

İngilizce versiyon için tıkla:

Navigation Component Usage

Bugün Navigation Component kullanımından bahsedeceğiz. Navigation Component ile ilişkili terimleri sayfa sonundan inceleyin lütfen. Dipnotlarıma da göz atın lütfen! Başlayalım😊. Navigation Component, Android uygulamalarında kullanılan bir araçtır, uygulamanın farklı “ekranlar” veya “sayfalar” arasında gezinmesini kolaylaştırır. Örnek verelim👇:

👀Farzedin ki bir araba uygulaması geliştiriyorsunuz. Uygulama, kullanıcının araba galerisini görüntülemesi, araba detaylarını incelemesi ve bir araba satın alması modüllerini içeriyor. Ana Sayfa, uygulamanın giriş noktasıdır ve kullanıcıyı karşılar. Buradan farklı bölgelere yönlendirebilirsiniz. Galeri, kullanıcının farklı araba modellerini görebileceği bir yerdir. Kullanıcı burada bir araba seçebilir ve Navigation Component ile seçilen arabanın detaylarına geçebilir. Detay, bir araba seçildiğinde, bu sayfada arabanın özelliklerini, resimlerini ve diğer detaylarını gösterir. Satın Al, eğer bir kullanıcı bir araba satın almak istiyorsa, bu sayfaya yönlendirilir. Navigation Component ile kullanıcıya gerekli bilgileri girmesi için bir alan sağlanır. Geri Dön: Kullanıcı bir sayfada gezinirken geri tuşuna bastığında, Navigation Component bu geçişi takip eder ve kullanıcıyı önceki sayfaya geri götürür.

Navigation GIF By NEEEU Spaces GmbH

Navigation Component, bu sayfalar arasındaki geçişleri sağlar. Böylece uygulama daha net ve anlaşılır bir hale gelir.

Aynı zamanda, sayfalar arasında geçiş yaparken animasyonları da kullanmanız mümkün. Örneğin, bir sayfadan diğerine geçerken kaydırma, solma, büyüme gibi animasyonlar eklemek mümkün.

Şimdi ilk adımımızdan başlayarak öğrenelim!

1. Bağımlılığı Ekleme: Projenizde Navigation Component’ı kullanmak için Gradle dosyanızda gerekli bağımlılıkları eklemelisiniz👇.

⚠️Dipnot: Bir bağımlılık, bir yazılım parçasının diğer bir yazılım parçasına olan ihtiyacıdır. Android projelerinde, bağımlılıklar harici kütüphaneler veya modüller şeklinde gelebilir. Bağımlılıklar, projenizin özelliklerini genişletmek, ek işlevselliği eklemek veya belirli sorunları çözmek için kullanılır. Örneğin, Navigation Component’ı kullanmak için gerekli olan kütüphaneler bağımlılıklardır. Bu kütüphaneler, projenize ek fonksiyonlar ve yetenekler getirir.

Bu bağımlılıklar, Navigation Component’ı kullanmanız için gerekli olan kütüphanelerdir.

2.Navigasyon Dosyasını Oluşturun

res klasörüne gelin, sağ tıklayın ve new kısmından Android Resource Directory seçeneğini seçin. Sonra value seçeneklerinden navigation’ı seçerek navigation adında bir klasör oluşturun👇. (Android Studio’da bahsettiğim bu klasörlerin ne işe yaradığını görmek için “Android Stüdyo’nun Temelleri” yazımı okuyun lütfen.)

⚠️Dipnot: Bir navigasyon dosyası (navigation graph), uygulamanızdaki farklı ekranların (fragmentlar) ve bu ekranlar arasındaki geçişlerin tanımlandığı bir XML dosyasıdır. Navigasyon dosyası, kullanıcıların hangi ekranlara gidebileceğini, geçişlerin nasıl olacağını ve bu geçişler sırasında taşınacak verileri belirler. Bu dosya sayesinde uygulamanın navigasyonunu merkezi bir yerden yönetirsiniz.

Bu proje için, LinearLayout, RelativeLayout, ConstraintLayout gibi farklı layout türleri kullanarak UI bileşenlerini düzenleyebilirsiniz.

⚠️Dipnot: Bu kısımda da layoutlar hakkında küçük bir dipnot düşebiliriz. Layout, kullanıcı arayüzünün nasıl görüneceğini ve düzenleneceğini belirleyen XML dosyasıdır. Layout dosyaları, UI bileşenlerini içerir ve bu bileşenlerin nasıl yerleştirileceği, boyutlandırılacağı ve biçimlendirileceği gibi bilgileri içerir.

res klasörün altında main_activity_nav.xml adında bir XML dosyası oluşturun:

3. Fragments ve Layouts Oluşturun

Projenizdeki her bir ekranı temsil eden fragmentlar oluşturun. Şu şekilde app>src>main>java>com>example buradan Fragment’i seçip Blank Fragment’i seçiniz 👇:(Örneğin AnaSayfaFragment, DetayFragment, ve CiktiFragment gibi.)

Bu fragmentlar için ilgili layout dosyalarıda oluşacaktır.

⚠️Dipnot:Bu noktada fragmentin ne olduğu konusunu konuşabiliriz. Bir fragment, bir kullanıcı arayüzünün bir parçasını temsil eden ve kendi yaşam döngüsüne sahip bir Android bileşenidir. Fragmentlar, aktiviteler içinde kullanılarak daha büyük ve esnek kullanıcı arayüzleri oluşturmamızı sağlar. Örneğin, bir sayfanın içeriği veya bir iletişim kutusunun içeriği bir fragment içerisinde yer alabilir. Bir fragment, UI bileşenlerini içerebilir ve kendi davranışlarını yönetebilir.

4. Navigasyon Grafiğini Tanımlayın

main_activity_nav.xml dosyasını açın ve oluşturduğunuz fragmentları burada tanımlayın. Bu kısımda ekle(+) butonuna tıklayarak rahatça ekleme yapmanız mümkün.

Fragmentleri ekliyoruz. Belirtilen şekildeki gibi oklarla(aksiyon) bağlantıları sağlıyoruz:

giphy by freecodecamp

Tabiki bitmedi. Kodumuza nasıl çalışacağını anlatalım. Bunun için aşağıdaki eklentiyi eklemeliyiz. (Safe Args, detaylar sayfa sonunda)

Build gradle app kısmına ise aşağıdaki uzantıyı da eklememiz gerekecek. (Build.gradle dosyası, Android projesinin yapılandırma ve bağımlılıklarını yönetmek için kullanılan önemli bir dosyadır.)

⚠️not:build.gradle dosyasının app modülü içinde yer alan bölümü, uygulama modülünün derleme ve çalışma zamanı davranışlarını belirlemek için kullanılır.

Bu arada kodunuzda gradle.properties dosyasındaki android.nonTransitiveRClass=true kısmının true olduğundan emin olun.

Gerekli fragmentlerde, örneğin detay sayfasında, kullanıcıdan verileri çekmek için argümanları eklemeniz gereklidir👇:

argüman ekleme

⚠️Dipnot: Argüman, bir işlevin veya bileşenin çalışması için gerekli olan veri veya değerdir. Android’de argümanlar, genellikle fragmentlar veya aktiviteler arasında veri taşıma amacıyla kullanılır. Örneğin, bir fragmenttan diğerine geçerken bir dize veya bir nesne göndermek istediğinizde, bu veriyi argüman olarak taşıyabilirsiniz.

Navigation Component kullanırken, argümanlar fragmentlar arasında veri iletmek veya geçişler sırasında parametreleri taşımak için kullanılır. Örneğin, bir kullanıcının adı, yaş gibi verileri bir fragmenttan diğerine taşımak için argümanlar kullanılabilir. Bu veriler hedef fragmentta alınarak kullanılabilir.

Argümanlar, genellikle navigasyon grafiğinde fragmenta geçiş yaparken belirtilir. Örneğin, bir geçişin aksiyonunda tanımlanabilir ve bu aksiyon sırasında argümanlar iletilir. Daha sonra hedef fragment, bu argümanları alarak uygun şekilde davranabilir.

Navigation Component, argümanları almak ve kullanmak için özel argüman sınıfları sağlar. Bu sınıflar, argümanları tür güvenli bir şekilde almanıza ve kullanmanıza yardımcı olur. Örneğin, DetayFragmentArgs sınıfı projenizde tanımlandı ve bu sınıf sayesinde DetayFragment'a geçiş sırasında taşınan argümanları alabilirsiniz.

argüman ekleme

Aynı zamanda ekran geçişlerini ve taşınacak argümanları da burada belirtiyoruz. Örneğin👇:

5. Fragmentlar Arası Geçişleri Ayarlayalım:

Fragmentlar arasındaki geçişleri gerçekleştirmek için fragment sınıflarınızda Navigation Component’ın sağladığı yönlendirmeleri kullanın. Örneğin, bir butona tıklarken bir başka fragmenta geçiş👇:

6. Argümanları Alın ve Kullanın:

Geçiş sırasında taşıdığınız argümanları hedef fragment içerisinde alabilir ve kullanabilirsiniz. Örneğin DetayFragment👇:

⚠️Dipnot: Bu noktada bundle da ne dediğinizi duyar gibiyim.🤔 Bundle, Android platformunda verilerin taşınması ve saklanması için kullanılan bir veri yapısıdır. Özellikle farklı bileşenler (aktiviteler, fragmentlar) arasında veri iletmek veya geçici olarak veri saklamak için kullanılır. Bundle, anahtar-değer çiftleri şeklinde çalışır ve birçok veri türünü destekler.

Android’de, aktiviteler veya fragmentlar gibi bileşenler arasında veri taşımak genellikle Intent’ler veya Fragment Argümanları gibi mekanizmalarla yapılır. Bundle ise bu mekanizmalarda kullanılan anahtar-değer çiftlerini tutan veri yapısını ifade eder.

Örneğin, bir aktiviteden diğerine bir metin dizesi taşımak istediğinizi düşünün. Bu durumda bir Bundle oluşturarak bu veriyi anahtar-değer şeklinde taşıyabilirsiniz:

Peki bu kod☝️ ne iş yapıyor?

Bu kodla, Android Jetpack Navigation Component ile gelen argümanları işliyoruz

val bundle: DetayFragmentArgs by navArgs(): Bu satır, fragmenta gelen argümanları almak için bundle adlı bir özelliği tanımlar. DetayFragmentArgs, argümanların taşınmasını ve işlenmesini kolaylaştıran bir yardımcı sınıftır. Bu kullanım, argümanların fragmenta nasıl geçirildiğini ve nasıl alındığını otomatik olarak yönetir.

val gelenAd = bundle.ad: Bu satır, bundle içerisindeki ad adlı argümanı gelenAd adlı bir değişkene atar. Bu şekilde fragmenta taşınan ad verisini kullanabilirsiniz. Bu açıklama, yaş, soyad ve nesne argümanları için de geçerlidir. Yani bu kod, fragment içerisinde gelen argümanları kullanmanızı sağlar. Genellikle bir fragmenta diğer bir fragment veya aktiviteden veri taşıma amacıyla kullanılırlar.

Navigation Component, NavigationView, AppBarConfiguration gibi bileşenlerle entegre çalışabilir. Bu sayede ekran geçişlerini ve ActionBar’ı yönetebilirsiniz. Bahsettiğim her bir konu ayrı bir yazının konusu olabilir bence. Bu konuda size sürprizler yapmam mümkün😉!

Bu adımları takip ederek, Navigation Component’ı projenizde kullanmaya başlayabilirsiniz. Bu, uygulamanızın ekran geçişlerini daha organize ve yönetilebilir hale getirecek, ayrıca fragmentlar arası veri taşıma işlemlerini kolaylaştıracaktır. Anlatmış olduğum kodların olduğu projemin GitHub linki burada👆!

Severek takip ettiğim, akademi sayesinde tanışıp şu anda mentörlük aldığım Hadi Tok hocamız, bizler için çok güzel bir seri hazırlamış. Son serisini buraya bırakıyorum. Navigation component kullanmamızı o da tavsiye ediyor😊. Umarım bu yazı sizin de kafanızdaki soru işaretlerini giderecektir. Okuyun lütfen:

Junior’muşum gibi açıkla III- Android Architecture Components

Navigation Component Hakkında Bazı Terimler ve Anlamları:

Her terimin üzerine resim ekledim. Çünkü terimler ve resimler arasında ilişki kurmanızı istedim. Ben kurdum:) Keyifli benzetmeler!

Photo by Jackie Park on Unsplash

• NavHostFragment ve NavHostActivity: Navigasyon işlemlerini yönlendirmek ve hangi alanın navigasyonun gerçekleştiği alan olduğunu belirlemek için NavHostFragment veya NavHostActivity kullanılır.

Photo by Rob Laughter on Unsplash

• Geçiş Animasyonları: Navigation Component, ekran geçişlerini yönetirken geçiş animasyonları eklemeyi de kolaylaştırır. Geçişler sırasında ekranların nasıl görüneceğini ve kaydırılacağını belirlemek için geçiş animasyonlarını kullanabilirsiniz .

Photo by Anastasia Zhenina on Unsplash

• Back Stack ve Geri Tuşu Davranışı: Navigation Component, back stack yönetimini otomatik olarak yapar. Ancak, bazen fragmentları geri tuşu veya programatik olarak geri almanız gerekebilir. Bu davranışı anlamak, navigasyonunuzu daha iyi kontrol etmenizi sağlar.

Photo by Andrew Dunstan on Unsplash

• Safe Args Kullanımı: Navigation Component, argümanları tür güvenli bir şekilde taşımanızı sağlayan Safe Args mekanizmasını sunar. Bu mekanizma, verilerin güvenli ve tutarlı bir şekilde geçişini sağlar.

Photo by Aleksandr Popov on Unsplash

• Fragment Yaşam Döngüsü ve Veri Kaybı: Fragment yaşam döngüsünü anlamak, fragmentların yeniden oluşturulması durumunda veri kaybını önlemek için önemlidir. Argümanların ve verilerin nasıl korunacağını anlamak gereklidir.

Photo by Alex Haney on Unsplash

• NavigationUI ve ActionBar: NavigationUI, ActionBar’ı fragment geçişleriyle senkronize etmenize olanak tanır. Bu, kullanıcı arayüzünün daha tutarlı ve kullanıcı dostu olmasını sağlar.

Photo by Mark König on Unsplash

• Deep Linking: Navigation Component ile derin bağlantı (deep linking) oluşturabilirsiniz. Bu sayede dış kaynaklardan (örneğin web URL’leri) gelen isteklere cevap verebilir ve belirli ekranlara doğrudan erişim sağlayabilirsiniz.

Photo by Phil on Unsplash

• Bottom Navigation veya Drawer Menü Entegrasyonu: Farklı gezinme yapılarını (örneğin alt gezinme çubuğu veya kaydırılabilir menü) Navigation Component ile entegre edebilirsiniz. Bu, kullanıcı deneyimini geliştirmeye yardımcı olabilir.

Photo by Krzysztof Kowalik on Unsplash

• Veri Taşıma Yöntemleri: Argümanlar dışında, ViewModel kullanarak da veri taşıma yöntemlerini kullanabilirsiniz. ViewModel, fragmentlar arasında verilerin güvenli ve tutarlı bir şekilde paylaşılmasına yardımcı olur.

Okuduğunuz için teşekkür ederim. İyi haftalar diliyorum. Projemden ekran görüntülerini de sizlerle paylaşıyor olacağım takipte kalın lütfen😉!

Dilerseniz GitHub ve Linkedin profilime göz atabilirsiniz. Ve sorularınızı iletebilirsiniz. Sevgiler.

Dur! Kotlin için youTube video önerisi arıyorsan KEKOD tam sana göre👇!