Dengan Jetpack Compose, Android mengabaikan cara implisit untuk bergerak dengan transaksi fragmen, navigasi, dan maksud untuk aktivitas. Saat ini, aplikasi harus mendeklarasikan semua kemungkinan jalur yang dapat diambil pengguna di awal.

Jetpack compose menyediakan cara asli untuk menjelajahi berbagai komponen Anda. Dengan NavHost dan NavController, Anda dapat mendorong atau memunculkan komposisi sesuai kebutuhan. Jadi mari kita mulai.

Ketergantungan

Pertama, Anda perlu menambahkan dependensi ke proyek Anda. Untuk mendapatkan versi saat ini, buka di sini .

implementation "androidx.navigation:navigation-compose:2.5.3"

Penerapan

Pertama, NavHost dan NavController diperkenalkan ke proyek.

NavHost menghosting deklarasi rute yang dapat diambil pengguna. NavController menyediakan API untuk bergerak di sekitar rute yang dinyatakan. Rute adalah jalur, yang unik untuk setiap layar/composable lainnya yang dapat ditampilkan di aplikasi.

Instansiasi

NavController dibuat instance-nya dengan reminderNavController(), jadi bahkan setelah pembuatan ulang komposisi, NavController tetap sama.

Tujuan awal

NavHost dengan NavController dan tujuan awal dideklarasikan. Tujuan awal adalah nama rute layar pertama kita.

Deklarasi rute

Semua opsi dideklarasikan di mana pengguna dapat bergerak. Kedua layar perlu mendeklarasikan rute. Nama rute unik karena NavController akan menggunakannya untuk mengidentifikasi komposisi berikutnya yang akan ditampilkan.

Semua komposisi dapat ditampilkan melalui navcontroller.navigate(“rute to composable”).

Untuk meniru tombol kembali pengguna, navcontroller.popBackStack() dapat digunakan. Ini akan mengeluarkan komposisi saat ini dari tumpukan semua komposisi.

S tack dapat dilihat sebagai histori composable/layar, jadi layar pertama adalah root dan composable lainnya diletakkan di atasnya. Jadi dengan menavigasi ke layar kedua, layar kedua ditambahkan di atas tumpukan. Dengan mengeluarkan tumpukan, komposisi teratas dihapus.

Membersihkan

Agar lebih rawan kesalahan di masa mendatang, [aths harus dideklarasikan dengan lebih rapi. Jadi hindari menambahkan string di mana-mana dan buat file mandiri tempat Anda meletakkan semua rute untuk aplikasi Anda. Setelah itu, konstanta yang dideklarasikan harus digunakan. Kesalahan ketik yang memalukan akan dihindari di masa mendatang. Selain itu, ini memberikan pandangan yang lebih deskriptif tentang bagaimana aplikasi disusun.

Melewati banyak layar dan kembali ke root

Mulai sekarang menambahkan layar berikutnya ke navigasi kita menjadi mudah. NavHost perlu diperluas dengan satu komposisi lagi, dan layar perlu menggunakan lebih banyak tombol untuk bergerak.

Layar ketiga berisi tombol, yang mengembalikan pengguna ke layar pertama dan membersihkan semua komponen yang ditumpuk.

Untuk memunculkan beberapa komposisi dalam tumpukan, navController.popBackStack(“Layar tempat Anda ingin menghentikan popping”, inclusive: false) dapat digunakan.

Parameter inklusif memberi tahu kita apakah composable yang ditargetkan juga harus dihapus. Menghapus layar pertama akan menghasilkan layar kosong, sehingga nilai false diteruskan.

Meneruskan nilai ke layar

Sebagian besar aplikasi ingin menampilkan informasi atau data yang bergantung pada pilihan pengguna sebelumnya. Layar lain perlu mengetahui apa yang harus ditampilkan, jadi nilai harus diteruskan.

Ini dilakukan dengan meletakkan nilai di dalam rute, sehingga nilainya dikodekan sebagai string dan kemudian diuraikan di layar lain.

Pernyataan

Pertama, rute perlu mendeklarasikan keberadaan nilai, yang dilakukan seperti ini:

const val SECOND_SCREEN = "SecondScreen/{customValue}"
// where the {customValue} is placeholder for the passed value

composable(
    Routes.SECOND_SCREEN,
    arguments = listOf(navArgument("customValue") {
        type = NavType.StringType
    })
) { backStackEntry ->
    ThirdScreen(
        navigation = navController,
        // callback to add new composable to backstack 
        // it contains the arguments field with our value
        textToShow = backStackEntry.arguments?.getString(
            "customValue", // key for our value
            "Default value" // default value
        )
    )
}

val valueToPass = "Information for next screen"
val routeToScreenWithValue = "SecondScreen/$valueToPass"
navigation.navigate(routeToScreenWithValue)

Layar pertama sekarang berisi satu bidang teks, yang isinya diteruskan ke layar kedua.

Jangan meneruskan data kompleks ke tampilan di navigasi

Hanya satu nilai yang harus diteruskan ke tampilan. Data lain harus diperoleh dengan bantuan ViewModel atau unit logika lainnya. Ini akan membuat kode Anda jauh lebih bersih dan lebih dapat diuji.

Misalnya, jika Anda ingin menampilkan detail tentang produk atau pengguna, ID harus diteruskan ke tampilan saja. Unit logika memperoleh ID dan menggali informasi lebih detail dari internet atau database. Data tersebut kemudian diteruskan ke tampilan secara langsung tanpa bantuan komponen navigasi.

Sumber daya:

Lebih banyak dari pengembangan Android: