Android Studio’da Navigation Component Kullanımı

Ben Kotlin ile Android Programlama Akademisi katılımcılarından Ecem Sude Ozan. 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ğiyle hayata geçirilen Yerel Güçlenmeye Destek Fonu kapsamında sağlanan hibe desteğiyle gerçekleştirilmektedir.

Herkese merhaba 👋🏻

Bu makalemde sizlere Navigation Component nedir, Android Studio’da Navigation Component nasıl kullanılır bunlardan bahsedeceğim. İyi okumalar ✨

Makaleye başlarken, günümüz modern Android uygulamalarının temel gerekliliklerinden biri olan gezinme işlemlerinin giderek artan karmaşıklığına odaklanıyorum. Kullanıcıların farklı ekranlar arasında sorunsuz ve mantıklı bir şekilde geçiş yapabilmesi, uygulama tasarımının merkezinde yer alıyor. Bu noktada devreye giren Navigation Component, geliştiricilere bu gezinme süreçlerini daha etkili ve düzenli bir şekilde ele alma imkanı sunuyor. Bu makalede, Navigation Component’in ne olduğunu anlamak ve nasıl kullanılacağını öğrenmek için sizlere bildiklerimi aktaracağım.

➥ Navigation Component Nedir?

Navigation Component ile oluşturulmuş arayüz örneği

Navigation Component, adından da anlaşılacağı gibi, uygulamanızın gezinme (navigation) mantığını merkezi bir yapıda yönetmenize yardımcı olur. Farklı fragment’lar, activity’ler veya hedef ekranlar arasındaki geçişleri yönetmek ve tasarlamak için kullanılan bir kütüphanedir. Bu sayede kullanıcıların uygulama içinde rahatça hareket etmeleri sağlanırken, geliştiriciler de daha düzenli, modüler ve bakımı kolay bir kod tabanı oluşturabilirler.

✦ Kullanıcı Deneyiminin Önemi

Kullanıcı deneyimi, bir uygulamanın başarısını belirleyen en önemli faktörlerden biridir. Kullanıcıların uygulama içindeki gezinme süreçleri, ilk izlenimlerini oluşturur ve eğer bu süreç karmaşık, anlaşılmaz veya yavaşsa, kullanıcıların uygulamayı terk etmesine neden olabilir. Bu nedenle, uygulama içi gezinmeyi basit, akıcı ve sezgisel hale getirmek, kullanıcıların uygulamanızı daha sık kullanmalarını sağlayabilir.

✦ Navigation Component’in Rolü

Navigation Component, tüm bu gereksinimleri ele almak için tasarlanmıştır. Uygulama içi gezinmeyi yönetmek için birçok farklı bileşeni (fragment’lar, activity’ler, geçişler, parametreler vb.) merkezi bir yapıda bir araya getirir. Bu sayede geliştiriciler, her bir geçişi ayrı ayrı kodlamak veya yönetmek zorunda kalmadan, gezinme mantığını daha düzenli bir şekilde oluşturabilirler. Aynı zamanda, görsel bir arayüz sayesinde bu gezinme mantığını tasarlamak daha kolay hale gelir.

➥ Navigation Component’in Avantajları

Navigation Component, modern Android uygulama geliştirmesinde pek çok avantaj sunar. Bu avantajlar, hem geliştiricilerin işini kolaylaştırırken hem de kullanıcıların daha iyi bir deneyim yaşamasını sağlar.

✦ 1. Modülerlik ve Bakım Kolaylığı:

Navigation Component, tüm gezinme mantığını merkezi bir yerde yönetmenizi sağlar. Bu, farklı geçişleri ayrı ayrı kodlamak yerine, tek bir yerden yönetebileceğiniz anlamına gelir. Yeni bir ekran eklemek veya mevcut bir geçişi güncellemek istediğinizde, bu değişiklikleri Navigation Graph içinde yapabilirsiniz. Bu durum, kodun daha modüler ve bakımı daha kolay hale gelmesini sağlar.

✦ 2. Görsel Tasarım:

Navigation Component, görsel bir arayüz üzerinde gezinme mantığını tasarlama yeteneği sunar. Bu, geliştiricilerin farklı ekranların ilişkilerini daha iyi anlamalarını ve tasarlamalarını sağlar. Görsel bir arayüz sayesinde, uygulamanın gezinme mantığını daha iyi görselleştirirken, her bir geçişin ne şekilde çalıştığını daha iyi anlayabilirsiniz. Bu da uygulamanın anlaşılmasını ve geliştirilmesini kolaylaştırır.

✦ 3. Derin Bağlantı Desteği:

Navigation Component, derin bağlantıları desteklemek için güçlü bir yapı sunar. Derin bağlantılar, kullanıcıların belirli bir ekrana derin bağlantılarla direkt olarak erişebilmesini sağlar. Örneğin, belirli bir içerik parçasını paylaştığınızda veya bir derin bağlantıya tıkladığınızda, uygulamanız belirli bir ekranı açarak kullanıcıyı doğrudan ilgili içeriğe yönlendirebilir.4. Kod Tekrarını Azaltma Navigation Component’in en büyük avantajlarından biri, kod tekrarını azaltmasıdır. Her bir geçişi ayrı ayrı yönetmek yerine, Navigation Graph içindeki hedefleri ve geçişleri tanımlayarak kod tekrarını minimize edebilirsiniz. Bu, geliştirme sürecini hızlandırırken, gelecekteki değişikliklere daha hızlı ve esnek bir şekilde adapte olmanızı sağlar.

➥ Navigation Component Kullanımı

Navigation Component’i kullanarak uygulama içi gezinmeyi oluşturmak oldukça basit ve düzenli bir şekilde gerçekleşir.

✦ Adım 1: Projenizde Navigation Component Ayarları

Navigation Component’i kullanmaya başlamadan önce, projenize bu kütüphaneyi eklemelisiniz. Eklemediğiniz takdirde aşağıdaki uyarı penceresini alacaksınız. Bu uyarıya ok derseniz kütüphane otomatik olarak build.gradle sayfasına eklenecektir.

Kütüphaneyi elinizle girmek isterseniz;

res klasörüne sağ tık yaptıktan sonraki adımlar

açılan penceredeki düzenlemeler

nav_graph dosyası oluşturma adımları

oluşturulan yeni kaynak dosyasının ayarları

Bu pencerede OK butonuna bastıktan sonra karşınıza aşağıdaki hata gelecek:

Bu hataya OK dediğiniz düzelir.

⚝ Gradle Dosyalarını Güncelleme:

Kodlar otomatik olarak ekleniyor.

//kodu kopyalamak isterseniz:

dependencies {
     implementation 'androidx.core:core-ktx:1.8.0'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.5.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
}

✦ Adım 2: Hedef Ekranları (Destinations) Tanımlama

Uygulamanızdaki farklı ekranları hedefler (destinations) olarak tanımlamak için aşağıdaki adımları izleyebilirsiniz.

✦ Adım 3: Geçişlerin Tanımlanması (Actions)

Farklı ekranlar arasındaki geçişleri tanımlamak için aşağıdaki adımları izleyebilirsiniz.

⚝ 1. Actions Oluşturma:

Navigation Graph içinde iki farklı hedef arasında geçiş yapmak için Action ekleyin. Bu, kullanıcıların bir ekranı diğerine nasıl geçeceğini belirler.

⚝ 2. Geçiş Parametreleri:

Eğer geçişler sırasında parametreler geçirmeniz gerekiyorsa, bu parametreleri tanımlayın. Safe Args ile güvenli bir şekilde parametreleri aktarabilirsiniz.

✦ Adım 4: Gezinme İşlemlerini Yönetme

Navigation Component’i kullanarak gezinme işlemlerini yönetmek için aşağıdaki adımları izleyebilirsiniz.

⚝ 1. NavHostFragment Oluşturma:

Uygulamanızın ana aktivitesinin içine bir NavHostFragment ekleyin. Bu, fragment’lerin yerleştirileceği bir "container" görevi görür.

⚝ 2. NavController Kullanma:

NavHostFragment’in içindeki NavController’ı alarak, gezinme işlemlerini yönetebilirsiniz. Kullanıcı etkileşimlerine göre bu NavController’ı kullanarak ekranlar arasında geçiş yapabilirsiniz.

✦ Adım 5: Güvenli Argümanlar (Safe Args) Kullanımı

Eğer ekranlar arasında güvenli bir şekilde argüman geçişi yapmanız gerekiyorsa, Safe Args kullanabilirsiniz.

⚝ 1. Argümanları Tanımlama:

Navigation Graph içinde argümanları tanımlayın. Bu argümanlar, farklı ekranlar arasında güvenli bir şekilde veri iletebilmenizi sağlar.

⚝ 2. Argümanları Kullanma:

NavController üzerinden ilgili ekranlara argümanları ekleyerek veya alarak güvenli bir şekilde veri geçişi yapabilirsiniz.

➥ Örnek Senaryo Üzerinden Kullanım

Navigation Component’i daha iyi anlamak ve uygulama içi gezinmeyi gerçek dünya senaryosunda nasıl uygulayacağınızı görmek adına basit bir çoklu ekranlı hesap makinesi uygulamasını ele alalım.

⊱ Senaryo ⊰

Ana Ekran: Uygulama başladığında kullanıcının karşısına çıkan ana ekran. Temel bir görünümde hesaplama işlemlerine başlamayı sağlar.

Hesapla Ekranı: Kullanıcının matematiksel işlemler yapabileceği bir ekran. İşlemi tamamladıktan sonra sonucu gösterir.

Sonuç Ekranı: Hesaplama sonuçlarının görüntülendiği ekran. Kullanıcılar burada önceki hesaplamalarını görebilirler.

⚝ 1: Projenize Navigation Component Eklemek

Projeyi oluşturduktan sonra, Navigation Component için bir kaynak oluşturun. (res > sağ tık > new > Android Resource Directory | açılan pencerede isim verin (ör: navigation))

⚝ 2: Hedef Ekranları Tanımlamak

layout içinde ana ekranı, hesapla ekranını ve sonuç ekranını hedefler olarak tanımlayın.

⚝ 3: Geçişleri Tanımlamak

Navigation Graph içinde AnaFragment’tan HesaplaFragment’a ve HesaplaFragment’tan SonucFragment’a geçişleri tanımlayın.

İçerisine yazılacak olan kodları kendi senaryonuza göre yazabilirsiniz.

➥ Sık Karşılaşılan Sorunlar ve Çözümleri

𖥸 1. Fragment’lar Arasında Veri Geçişi Sorunları

Sorun: Farklı fragment’lar arasında veri geçişi sırasında yaşanan hatalar.

Çözüm: Safe Args kullanarak güvenli bir şekilde argümanları geçişi sağlayabilirsiniz. Veri türü uyumsuzluklarına dikkat ederek ve gerekirse tip dönüşümleri yaparak bu sorunu çözebilirsiniz.

𖥸 2. Geri Tuşu Sorunları

Sorun: Kullanıcı geri tuşuna bastığında beklenmeyen ekranlara dönüşler yaşanabilir.

Çözüm: NavController’ı kullanarak geri tuşu davranışını yönetebilirsiniz. onBackPressed() metodunu kullanarak, hangi ekranlarda geri tuşunun nasıl çalışacağını belirleyebilirsiniz.

𖥸 3. Animasyon ve Geçiş Sorunları

Sorun: Geçişler sırasında beklenmeyen animasyon veya görsel sorunlar yaşanabilir.

Çözüm: Navigation Component, geçişlerin animasyonlarını ve görünümünü kontrol etme yeteneği sunar. Geçişlerin nasıl çalıştığını ve hangi animasyonların kullanıldığını dikkatlice kontrol ederek bu sorunu çözebilirsiniz.

𖥸 4. Derin Bağlantı Sorunları

Sorun: Derin bağlantılar kullanıldığında, belirli bir ekranın hedeflenmesinde sorunlar yaşanabilir.

Çözüm: Derin bağlantılarda URI’ların doğru bir şekilde tanımlandığından emin olun. URI’lara parametrelerin ve hedeflerin doğru bir şekilde eklendiğinden emin olun.

𖥸 5. Çoklu Modül Sorunları

Sorun: Çoklu modüller kullanıldığında, Navigation Component’ın farklı modüller arasında nasıl çalışacağına dair sorunlar yaşanabilir.

Çözüm: Modüller arası geçişleri yönetirken, NavHostFragment’leri doğru bir şekilde oluşturduğunuzdan emin olun. Her modülde Navigation Component ayarlarını doğru bir şekilde yapılandırdığınızdan emin olun.

BOTTOM COMPONENT

➥ Bottom Navigation Component Nedir?

Navigation Component gibi bir de Bottom Component var.

Bottom Component, genellikle uygulamanın alt kısmında yer alan bir çubuktur. Her sekmeye tıklanabilir simgeler ve metin etiketleri atanabilir. Farklı sayfalara veya bölümlere geçişi temsil eden sekmelerdir. Kullanıcılar sekmelere tıkladıklarında ilgili sayfa açılır. Kullanıcılar için gezinmeyi kolaylaştırır, çünkü ana sekmelere hızlı erişim sağlar. Genellikle 3 ila 5 arasında sekme kullanılır. Fazla sekmeler kullanıcıyı kararsızlığa düşürebilir.

Bottom Navigation componenti sık kullanılan ve uygulama arayüzünde hem estetik bir görüntü hem de kullanım kolaylığı sunar.

Bu makalde, Navigation Component’in modern Android uygulama geliştirme süreçlerindeki rolünü anlatmaya çalıştım. Gelişmiş gezinme mantığını yönetme ihtiyacını ele alarak, Navigation Component’in nasıl kullanıldığını ve Bottom Navigation Component’in ne olduğunu anlattım.

Unutulmaması gereken bir nokta da, Navigation Component’i anlamak ve kullanmak biraz öğrenme gerektirebilir. Ancak bu öğrenme süreci, projenizin gelecekteki bakımını kolaylaştırmak ve daha iyi bir kullanıcı deneyimi sunmak adına kesinlikle değerlidir.

Sonuç olarak, Navigation Component, modern Android uygulama geliştirme süreçlerini büyük ölçüde iyileştiren, gezinme süreçlerini basit ve etkili bir şekilde yönetmeyi sağlayan güçlü bir araçtır. Bu aracı kullanarak uygulamanızı daha iyi bir kullanıcı deneyimi sunacak şekilde tasarlamak ve yönetmek için ilk adımı atmış olacaksınız. Umarım makalem işinize yaramıştır.💐