Android Navigation Component merupakan sebuah arsitektur baru yang di perkenalan pada Google I/O tahun lalu, arsitektur ini membantu kita dalam penerapan Single Activity, bagi teman teman yang belum tahu secara sederhana single activity merupakan sebuah konsep dimana kita hanya membuat satu buah activity di dalam aplikasi kita, kemudian semua tampilan UI akan di letak kan pada fragment fragment.
Pada case sederhana kita berpindah daru satu fragment ke fragment lain menggunakan fragment transaction, namun dalam case yang lebih komplek kita akan kesulitan dalam menghadle backstack dari fragment fragment tersebuh, sehingga di ciptakan lah Navigation Component yang akan memudahkan kita dalam menanganan ini.
Beberapa keuntungan menggunakan Navigation Component :
Untuk info lebih lanjut mengenai navigation component dapat teman teman baca di official android developer Android Navigation Componen.
Hal pertama yang harus dilakukan sebelum menerapkan Navigation componen adalah menambah dependencies berikut ini di dalam gradle kita
implementation 'android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha01'
implementation 'android.arch.navigation:navigation-ui-ktx:1.0.0-alpha01'
Membuat Navigation Graph
Setelah menambahkan dependenci kita harus membuat navigation graph dengan cara klik kanan pada folder res kemudian pilih new -> resource file dan pada resource type pilih navigation
Setelah itu kita buat 2 buah fragment untuk belajar bagaimana navigation component ini bekerja, dalam hal ini kita buat sebuah fragment sederhana yang nantinya akan menjadi splashscreen dan menu utama.
Pada Activity utama kita menset activity tersebut menjadi host yang akan menampung fragment fragment kita,
<?xml version='1.0' encoding='utf-8'?>
<android.support.constraint.ConstraintLayout
xmlns:android='http://schemas.android.com/apk/res/android'
xmlns:tools='http://schemas.android.com/tools'
xmlns:app='http://schemas.android.com/apk/res-auto'
android:layout_width='match_parent'
android:layout_height='match_parent'
tools:context='.view.ui.MainActivity'>
<fragment
android:id='@+id/mainNavigationFragment'
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/navigation' />
</android.support.constraint.ConstraintLayout>
Pada kode diatas ada dua hal yang harus di perhatikan
app:defaultNavHost='true'
Kode di atas digunakan untuk menset activity ini sebagai host yang menampung fragment yang kita buat
app:navGraph='@navigation/navigation'
Kode diatas digunakan untuk mengatur file navigaiton Graph mana yang akan menangani fragment fragment kita.
Jika sudah sekarang kita akan mengatur perpindah dari setiap fragment yang kita buat pada file navigation.
Pertama kita tambahkan destination awal dari navigation klik pada tombol add destination lalu pilih fragmentSplashScreen, kemudian tambahkan lagi fragmentMain, setalah itu kita tinggal menarik garis dari splashscreen menuju mainActivity, cukup mudah bukan.
<?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/navigation'
app:startDestination='@id/splashScreenFragment2'>
<fragment android:id='@+id/splashScreenFragment2'
android:name='id.kampung.pelaporankemiskinan.view.ui.fragment.SplashScreenFragment'
android:label='fragment_splash_screen' tools:layout='@layout/fragment_splash_screen'>
<action android:id='@+id/action_splashScreenFragment2_to_mainFragment2' app:destination='@id/mainFragment2'/>
</fragment>
<fragment android:id='@+id/mainFragment2'
android:name='id.kampung.pelaporankemiskinan.view.ui.fragment.MainFragment' android:label='fragment_main'
tools:layout='@layout/fragment_main'/>
</navigation>
Pada kode xml di atas teman teman dapa mencermati terdapat section action, action yang akan kita panggil nantinya untuk melakukan perpindahan.
Untuk memanggilnya kita menggunakan fungsi
findNavController().navigate('id action yang kita set di navigation)
sehingga pada file SplashScreenFragment.kt kurang lebih menjadi seperti berikut
class SplashScreenFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_splash_screen, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
Handler().postDelayed(
{
context?.let {
findNavController().navigate(R.id.action_splashScreenFragment_to_mainFragment)
}
},2000
)
}
override fun onResume() {
super.onResume()
(activity as AppCompatActivity).supportActionBar!!.hide()
}
override fun onStop() {
super.onStop()
(activity as AppCompatActivity).supportActionBar!!.show()
}
}
Kemudian run projek kita untuk melihat bagaimana navigation component bekerja.
Sekitan untuk tutorial kalian semoga bisa dipahami hehehehe.
Salam Rack Edan Rack Spiro.
0 Komentar