Kotlin ile Navigation Kullanımı
Merhabalar, bu yazımda Navigation bileşeninin nasıl kullanıldığından bahsedeceğim. Basit bir örnek üzerinden anlatmaya çalışacağım keyifli okumalar.
Navigation Nedir?
Navigation, Android programlamada ekranlar arasında geçiş yapmamızı kolaylaştıran bir Jetpack öğesidir.
Grafikte görüldüğü üzere hangi ekrandan hangi ekrana geçeceğimizi belirleyip programlamayı oldukça kolaylaştırıyor.
Mesela bir BottomAppBar kullanıyorsanız, menüdeki item’ların id’sini fragment’ların id’si ile aynı yaparsanız bu geçişleri sizin için otomatik yapıyor.
Navigation Kullanımı
Navigation Bileşenini Projeye Ekleme
İlk olarak bir proje oluşturalım ve Navigation bileşenini projemize dahil edelim.
Navigation’ı dahil etmek için bu sayfaya bakabilirsiniz.
Modül düzeyinde build.gradle dosyasına dependencies kısmına aşağıdaki kodları ekliyoruz.
implementation("androidx.navigation:navigation-fragment-ktx:2.4.1")
implementation("androidx.navigation:navigation-ui-ktx:2.4.1")
Navigation SafeArgs’ı kullanabilmek için ise proje düzeyinde build.gradle dosyasında plugins kısmına şu kod satırını ekliyoruz.
id 'androidx.navigation.safeargs.kotlin' version '2.4.1' apply false
Bu Android Studio Bumblebee sürümü için geçerli önceki sürümlerde şu şekilde ekleniyor.
Yine proje düzeyinde build.gradle dosyasında dependencies bölümüne ekliyoruz.
classpath("androidx.navigation:navigation-safe-args-gradle-plugin:2.4.1")
SafeArgs için son olarak modül düzeyinde build.gradle dosyasında plugins kısmına şunu ekliyoruz.
id 'androidx.navigation.safeargs.kotlin'
Örnek uygulamamızda iki adet ekran olacak ve ilk ekranda kullanıcıdan aldığımız veriyi ikinci ekranda göstereceğiz. Her şey hazır olduğuna göre başlayabiliriz.
Fragment’ları Ekleyelim
Paket ismine sağ tık -> New -> Fragment -> Fragment(Blank) seçiyoruz.
İsmini HomeFragment yapıp devam edelim.
HomeFragment.kt dosyasını açalım ve onCreateView fonksiyonu hariç diğer her şeyi uçurabiliriz.
Dosyanın son hali şöyle:
package com.alisayar.navigationkullanimi
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class HomeFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_home, container, false)
}
}
Aynı şekilde DetailFragment isminde bir fragment daha ekleyelim.
Navigation Grafiği Oluşturma
Ekranlar arası geçişi yönetebilmek için bir Navigation grafiğine ihtiyacımız var. Hemen oluşturalım.
res klasörüne sağ tık -> New -> Android Resource File
Resource type’ını Navigation seçtiğinizden emin olun, ismini istediğiniz şekilde koyabilirsiniz.
Grafiği Düzenleme
nav_graph.xml dosyasını açalım ve sol üstteki “+” simgesinden sırasıyla fragment_home ve fragment_detail fragment’larını ekleyelim. İlk eklediğimiz fragment ana fragment oluyor bu yüzden ilk home_fragment’ı ekledik. Sonradan yukarıdaki ev simgesine tıklayıp değiştirilebiliyor tabii ki.
Mouse imlecini homeFragment üzerine getirdiğiniz zaman sağ tarafında bir nokta belirir. Bu noktaya basılı tutup detailFragmente sürüklüyoruz ve bırakıyoruz.
Böylece id’si “action_homeFragment_to_detailFragment” olan homeFragment‘tan detailFragment‘a bir “action” oluşturduk. Bu action’ı kullanarak ekran geçişi sağlayacağız.
NavHostFragment
Uygulama çalıştırıldığında her zaman bir “activity” ile başlar. Bu fragment’ları activity üzerinde gösteririz.
res -> layout altındaki activity_main.xml dosyasını açalım.
Bir adet TextView var. Bunu kaldıralım ve NavHostFragment’ı ekleyelim.
Açılan pencereden Navigation grafiğimizi seçiyoruz.
Genişliğini ve yüksekliğini “match_parent” yapabilirsiniz. Constraint’lerini eklemeyi unutmayın.
activity_main.xml dosyası şu şekilde:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
Uygulamayı çalıştırdığınızda HomeFragment’ı görmeniz gerekiyor.
Eğer bir hata yoksa devam edebiliriz. Araya şu anda dinlediğim şarkıyı sıkıştırayım. 🙂
HomeFragment’ta bir adet EditText ve bir adet buton var. Butona basınca DetailFragment’a geçeceğiz ve EditText’ten aldığımız veriyi göstereceğiz.
DetailFragment’ta ise bir adet TextView var.
fragment_home.xml dosyası:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeFragment">
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/name_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="İsminiz"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toTopOf="@+id/enter_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="@+id/enter_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kaydet"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/name_et" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_detail.xml dosyası:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DetailFragment">
<TextView
android:id="@+id/name_tv"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
DetailFragment’a Geçiş
HomeFragment.kt dosyasını açalım.
Bu örnekte ViewBinding kullanıyorum. ViewBinding’in nasıl kullanıldığını bilmiyorsanız buradan bakabilirsiniz.
İlk olarak onViewCreated fonksiyonunu override edelim. Görünümle ilgili işlemleri bu fonksiyonda, yani görünümler oluşturulduktan sonra yapmakta fayda var.
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
}
onViewCreated içinde butonumuza bir clickListener ekleyelim.
binding.enterBtn.setOnClickListener { view ->
}
Yukarıda action oluşturduğumuz zaman bizim için HomeFragmentDirections isminde bir sınıf oluşturuldu.
Bu sınıfı kullanarak DetailFragment’a navigate işlemi yapacağız. Bu navigate işlemlerini NavController yönetir ve her NavHost’un bir NavController’ı vardır. NavController’ı aşağıdaki yöntemlerle kullanabilirsiniz.
- Fragment.findNavController()
- View.findNavController()
- Activity.findNavController()
val action = HomeFragmentDirections.actionHomeFragmentToDetailFragment() view.findNavController().navigate(action)
Uygulamayı çalıştıralım ve butona basalım. DetailFragment’a gittik ama bir şey görünmüyor. Çünkü gösterecek herhangi bir verimiz yok. SafeArgs kullanarak veriyi gönderelim.
SafeArgs Kullanımı
Veriyi geçirmek istediğimiz fragment’a bir argüman ekleyeceğiz.
nav_graph.xml dosyasını açalım, detailFragment’a tıklayalım. Sağ tarafta Attributes sekmesinde Arguments kısmını bulalım ve artıya tıklayalım.
İsmini “name”, tipini ise String yapalım. Çünkü string bir veri geçiriyoruz.
Bir veri gelmezse diye varsayılan bir değer yazabilirsiniz.
EditText’ten null değer gelmeyeceği için Nullable yapmaya gerek yok.
HomeFragment.kt dosyasında bir hata görünüyor.
DetailFragment’a eklediğimiz argümanı burada vermemiz gerekiyor.
EditText’ten aldığımız veriyi buraya verelim.
val name = binding.nameEt.text.toString() val action = HomeFragmentDirections.actionHomeFragmentToDetailFragment(name)
HomeFragment.kt dosyasının son hali:
package com.alisayar.navigationkullanimi
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.EditText
import androidx.navigation.findNavController
import androidx.navigation.fragment.findNavController
import com.alisayar.navigationkullanimi.databinding.FragmentHomeBinding
class HomeFragment : Fragment() {
private lateinit var binding: FragmentHomeBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
binding = FragmentHomeBinding.inflate(inflater)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.enterBtn.setOnClickListener { view ->
val name = binding.nameEt.text.toString()
val action = HomeFragmentDirections.actionHomeFragmentToDetailFragment(name)
view.findNavController().navigate(action)
}
}
}
Artık verimiz DetailFragment’a geçiyor. Hadi şimdi onu alıp TextView’a yazdıralım.
DetailFragment.kt dosyasını açalım.
Yine işlemleri onViewCreated içinde yapmakta fayda var.
Argüman oluşturulduğu zaman DetailFragmentArgs diye bir sınıf oluşturuldu. Bunu kullanacağız.
val nameArg = DetailFragmentArgs.fromBundle(requireArguments()).name
Şimdi bu veriyi TextView’da gösterelim.
Yine onViewCreated içinde:
binding.nameTv.text = nameArg
Uygulamayı çalıştırıp bir yazı yazın ve butona basın. DetailFragment’ta ismi görüyorsanız tamamdır. 🙂
DetailFragment.kt dosyasının son hali:
package com.alisayar.navigationkullanimi
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.alisayar.navigationkullanimi.databinding.FragmentDetailBinding
class DetailFragment : Fragment() {
private lateinit var binding: FragmentDetailBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
binding = FragmentDetailBinding.inflate(inflater)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val nameArg = DetailFragmentArgs.fromBundle(requireArguments()).name
binding.nameTv.text = nameArg
}
}
Burada yazının sonuna gelmiş bulunmaktayız. Navigation bileşenini basitçe ve dilim döndüğünce anlatmaya çalıştım. Okuduğunuz için teşekkürler yorum bırakmayı unutmayın. 🙂
Sonraki yazılarda görüşmek üzere.
Ağzınıza sağlık, güzel bir anlatım olmuş ☺️