Android Navigation Component Kullanımı
Merhaba arkadaşlar bu yazımda sizlere Android jetpack kütüphanelerinden navigation component kullanımını anlatmaya çalışacağım. Şimdiden iyi okumalar 😊
Navigation Component Nedir?
Navigation component bir android jetpack kütüphanesidir. Navigation component, kullanıcıların uygulamamızdaki farklı içerik parçaları(fragment) arasında gezinmesine, bu içeriklere girmesine ve bu içeriklerden geri dönmesine olanak tanıyan etkileşimleri ifade eder. Navigation component fragmentlar ile kullanılır.
Fragment, Activity üzerine yapıştırılan parçalar olarak düşünebiliriz. Bir activity de birden fazla fragment bulunabilir. Fragment’lar yaşamlarını sürdürebilmek için activity’lere ihtiyaç duyarlar.
Navigation Component kullanmak için gerekli implementation’ları yapmamız gereklidir.
build.gradle(app)
dependencies{
//navigation component
implementation("androidx.navigation:navigation-fragment-ktx:2.7.0")
implementation("androidx.navigation:navigation-ui-ktx:2.7.0")
}Not: navigation component sürümü 2.7.0 veya üstü ise compileSdk 34 olmalıdır.
Navigation component kullanarak fragment’lar arası geçiş, geçiş yaparken animasyon ve geçiş yaparken veri aktarımı yapabiliriz. Veri aktarımı yapmak içinde implementation yapmamız gereklidir.
build.gradle(app)
plugins{
id 'androidx.navigation.safeargs.kotlin'
}
build.gradle(project)
buildscript {
dependencies {
classpath("androidx.navigation:navigation-safe-args-gradle-plugin:2.7.0")
}
}Gerekli implementation’ları yaptıktan sonra res klasörü içine Android resource directory oluşturmalıyız. Daha sonra bu android resource directory içine bir tane Navigation resource file eklemeliyiz.
Bu oluşturduğumuz navigation resource file içinde uygulama ilk çalıştığında hangi ekran görünecek, fragment’lar arası sayfa geçişlerini, animasyon ekleme, veri aktarımı için argüman ekleme gibi işlemleri bu dosya içinde yapacağız.
Tüm bu işlemleri yaptıktan sonra 2 tane fragment oluşturalım. İlk fragment’a 2 tane EditText ve 1 tane buton ekleyelim. Butona tıklanınca İkinci fragment’a geçiş yapsın ve geçiş yaparken EditText içine girilen kullanıcı verisini ikinci fragmant’ta gösterelim. İkinci fragment tasarım kısmında bir tane TextView oluşturalım.
- Birinci Fragment tasarım kodları
<?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=".soru1.LoginFragment">
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/userNameEt"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="120dp"
android:layout_marginEnd="32dp"
android:hint="@string/user_name"
android:padding="8dp"
android:textColor="@color/black"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/passwordEt"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:hint="@string/password"
android:inputType="textPassword"
android:padding="8dp"
android:textColor="@color/black"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/userNameEt" />
<Button
android:id="@+id/loginButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="48dp"
android:padding="8dp"
android:text="@string/login"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/passwordEt" />
</androidx.constraintlayout.widget.ConstraintLayout>- İkinci Fragment tasarım kodları
<?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=".soru1.HomeFragment">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/homeTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/welcome"
android:textColor="@color/black"
android:textSize="32sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>- Navigation Resource File açalım ve oradaki işlemleri yapalım. Kod kısmı bu şekilde olacak. Bu kod kısmında action, argümant ve animasyon ekledik
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/question_one_nav_graph"
//proje çalıştıpında ilk açılacak ekran belirlendi
app:startDestination="@id/loginFragment">
<fragment
android:id="@+id/loginFragment"
android:name="com.example.sisterslabakademiuygulamadersi3.soru1.LoginFragment"
android:label="fragment_login"
tools:layout="@layout/fragment_login" >
<action
// girş butonuna tıklanınca gidilecek fragment ayarlandı
android:id="@+id/navigateToHomeScreen"
app:destination="@id/homeFragment"
// animasyon
app:enterAnim="@android:anim/slide_in_left"
app:exitAnim="@android:anim/slide_out_right" />
</fragment>
<fragment
android:id="@+id/homeFragment"
android:name="com.example.sisterslabakademiuygulamadersi3.soru1.HomeFragment"
android:label="fragment_home"
tools:layout="@layout/fragment_home" >
// veri aktarımı için değiken oluşturduk değişken adı,
// türü ve default değer ataması yaptık
<argument
android:name="userName"
app:argType="string"
android:defaultValue="yusuf" />
</fragment>
</navigation>Not: Argümanı eklerken hangi ekrana veri gönderecek isek o ekrana argüman ekleriz. Örneğin biz bu örneğimizde Login fragment’ından home fragment’ına veri göndereceğiz bundan dolayı argümanı home fragment’ına ekliyoruz.
Bu işlemleri yaptıktan sonra actvitiy.main.xml kısmında NavHostFragment eklememiz gerekir. Çünkü fragment’lar activity’ler olmadan yaşamlarını sürdüremezler.
- activity.main.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=".soru1.MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment_one"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
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/question_one_nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>Şimdi gelelim kodlama kısmına.
- LoginFragment içine yazılacak kodlar
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.View
import androidx.navigation.fragment.findNavController
import com.example.sisterslabakademiuygulamadersi3.R
import com.example.sisterslabakademiuygulamadersi3.databinding.FragmentLoginBinding
import com.google.android.material.snackbar.Snackbar
class LoginFragment : Fragment(R.layout.fragment_login) {
private lateinit var binding: FragmentLoginBinding
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding = FragmentLoginBinding.bind(view)
binding.loginButton.setOnClickListener {
//editText içine girilen değerler değişkenlere atandı
val userName = binding.userNameEt.text.toString()
val password = binding.passwordEt.text.toString()
//değişkenler dolu mu boş mu kontrolü yapıldı
if (userName.isEmpty() || password.isEmpty()) {
// değişknlerin her hangi biri boş ise snackbar ile mesaj gösterildi
Snackbar.make(it, "Boş alanları doldurunuz!", Snackbar.LENGTH_SHORT).show()
} else {
/*sayfa geçişi kodları yazıldı.
sayfa geçişi yaparken navigation resource file da eklediğimiz
argüman ile userName değişkenini home fragment'ına gönderme
işlemi yapıldı.*/
val action = LoginFragmentDirections.navigateToHomeScreen(userName)
findNavController().navigate(action)
}
}
}
}Bu projemizde xml dosyasında yaptığımız tasarımlara erişmek için viewBinding kullandık. ViewBinding kullanmak için build gradle app kısmına ekleme yapmamız gereklidir.
build.gradle(app)
viewBinding{
enabled true
}Login fragment kısmında sayfa geçişini ve sayfa geçişi yaparken veri aktarma kodlarını yazdık. Şimdi Home fragment kısmında gelen veriyi TextView içinde gösterelim.
- HomeFragment içine yazılacak kodlar
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.View
import androidx.navigation.fragment.navArgs
import com.example.sisterslabakademiuygulamadersi3.R
import com.example.sisterslabakademiuygulamadersi3.databinding.FragmentHomeBinding
class HomeFragment : Fragment(R.layout.fragment_home) {
private lateinit var binding : FragmentHomeBinding
// HomeFragmentArgs türünde bir değişken oluşturduk
private val args : HomeFragmentArgs by navArgs()
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding = FragmentHomeBinding.bind(view)
// gelen veriyi textView içinde gösterme işlemini yaptık
binding.homeTv.text = "Hoş geldin ${args.userName}"
}
}- Projeyi çalıştıralım ve çıktıyı görelim.
Android jetpack kütüphanesi olan Navigation Component konusunu anlatmaya çalıştığım yazımın sonuna geldik. Yazımı okuduğunuz için teşekkürler😊 Bir sonraki yazımda görüşmek üzere👋 İyi çalışmalar.
