Navigasi adalah interaksi yang memungkinkan pengguna melakukan navigasi di, ke dalam, dan ke luar dari berbagai bagian konten dalam aplikasi Anda.
Komponen Navigation Android Jetpack mencakup library Navigation, plugin Safe Args Gradle, dan alat untuk membantu Anda menerapkan navigasi aplikasi. Komponen Navigation menangani beragam kasus penggunaan navigasi, dari klik tombol yang sederhana hingga pola yang lebih kompleks, seperti panel aplikasi dan panel navigasi.
Konsep utama
Tabel berikut memberikan ringkasan tentang konsep utama dalam navigasi dan jenis utama yang Anda gunakan untuk menerapkannya.
Konsep |
Tujuan |
Jenis |
---|---|---|
Host |
Elemen UI yang berisi tujuan navigasi saat ini. Artinya, saat pengguna menavigasi aplikasi, aplikasi pada dasarnya menukar tujuan masuk dan keluar dari host navigasi. |
|
Grafik |
Struktur data yang mendefinisikan semua tujuan navigasi dalam aplikasi dan cara tujuan tersebut terhubung. |
|
Pengontrol |
Koordinator pusat untuk mengelola navigasi antar-tujuan. Pengontrol memberikan metode untuk bernavigasi antar-tujuan, menangani deep link, mengelola data sebelumnya, dan banyak lagi. |
|
Halaman tujuan |
Node dalam grafik navigasi. Saat pengguna membuka node ini, host akan menampilkan kontennya. |
Biasanya dibuat saat membuat grafik navigasi. |
Rute |
Mengidentifikasi tujuan dan data apa pun yang diperlukan secara unik. Anda dapat menavigasi menggunakan rute. Rute akan membawa Anda ke tujuan. |
Jenis data apa pun yang dapat diserialisasi. |
Manfaat dan fitur
Komponen Navigation memberikan sejumlah manfaat dan fitur lainnya, termasuk yang berikut:
- Animasi dan transisi: Menyediakan resource standar untuk animasi dan transisi.
- Deep linking: Menerapkan dan menangani deep link yang mengarahkan pengguna langsung ke tujuan.
- Pola UI: Mendukung pola seperti panel navigasi dan navigasi bawah dengan tugas tambahan minimal.
- Keamanan jenis: Mencakup dukungan untuk meneruskan data antar-tujuan dengan keamanan jenis.
- Dukungan ViewModel: Memungkinkan pencakupan
ViewModel
ke grafik navigasi untuk membagikan data terkait UI antar-tujuan grafik. - Transaksi fragmen: Mendukung dan menangani transaksi fragmen sepenuhnya.
- Kembali dan ke atas: Menangani tindakan kembali dan ke atas dengan benar secara default.
Menyiapkan lingkungan
Untuk menyertakan dukungan navigasi dalam project Anda, tambahkan dependensi berikut ke
file build.gradle
aplikasi Anda:
plugins { // Kotlin serialization plugin for type safe routes and navigation arguments id 'org.jetbrains.kotlin.plugin.serialization' version '2.0.21' } dependencies { def nav_version = "2.8.8" // Jetpack Compose Integration implementation "androidx.navigation:navigation-compose:$nav_version" // Views/Fragments Integration implementation "androidx.navigation:navigation-fragment:$nav_version" implementation "androidx.navigation:navigation-ui:$nav_version" // Feature module support for Fragments implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version" // Testing Navigation androidTestImplementation "androidx.navigation:navigation-testing:$nav_version" // JSON serialization library, works with the Kotlin serialization plugin. implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3" }
plugins { // Kotlin serialization plugin for type safe routes and navigation arguments kotlin("plugin.serialization") version "2.0.21" } dependencies { val nav_version = "2.8.8" // Jetpack Compose integration implementation("androidx.navigation:navigation-compose:$nav_version") // Views/Fragments integration implementation("androidx.navigation:navigation-fragment:$nav_version") implementation("androidx.navigation:navigation-ui:$nav_version") // Feature module support for Fragments implementation("androidx.navigation:navigation-dynamic-features-fragment:$nav_version") // Testing Navigation androidTestImplementation("androidx.navigation:navigation-testing:$nav_version") // JSON serialization library, works with the Kotlin serialization plugin implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3") }
Untuk informasi tentang menambahkan komponen arsitektur lainnya ke project Anda, lihat Menambahkan komponen ke project Anda.
Langkah berikutnya
Untuk dokumentasi dan referensi lain terkait dengan komponen Navigation, lihat referensi berikut ini.
Panduan mendetail
Untuk informasi selengkapnya tentang cara menerapkan host navigasi dan NavController
,
serta detail cara berinteraksi dengan Compose dan framework UI lainnya, lihat
panduan berikut:
- Membuat pengontrol navigasi: Menguraikan cara membuat
NavController
. - Membuat grafik navigasi: Memerinci cara membuat host navigasi dan grafik navigasi.
- Menavigasi ke tujuan: Menunjukkan cara menggunakan
NavController
untuk berpindah antar-tujuan dalam grafik Anda.
Codelab
- Mempelajari Navigasi Jetpack
- Fragmen dan Komponen Navigasi
- Membangun aplikasi adaptif dengan navigasi dinamis
Video
- Menavigasi navigasi
- 10 praktik terbaik untuk berpindah ke aktivitas tunggal
- Aktivitas tunggal: Mengapa, kapan, dan bagaimana (Android Dev Summit '18)
- Android Jetpack: Mengelola navigasi UI dengan pengontrol navigasi (Google I/O '18)
Contoh
Microsoft memberdayakan orang dan organisasi untuk bekerja, mempelajari, mengatur, terhubung, dan berkreasi melalui aplikasi Microsoft 365 terkemuka mereka. Untuk mencapainya, mereka memahami pentingnya memberikan pengalaman produktivitas yang optimal bagi pelanggan, di semua perangkat yang mereka gunakan. Cuvva membuat asuransi jauh lebih baik
dengan memberi Anda cara yang benar-benar fleksibel untuk mengelola perlindungan, semuanya dari ponsel Anda.
Engineer Android di Cuvva menghabiskan waktu untuk merancang ulang aplikasi mereka
dan memutuskan Square membantu jutaan penjual menjalankan
bisnis mereka – mulai dari pemrosesan kartu kredit yang aman hingga solusi tempat penjualan (POS) hingga
menyiapkan toko online gratis. Square telah beralih ke UI deklaratif selama
beberapa waktu, tetapi Twitter adalah salah satu platform media sosial yang paling banyak digunakan, tempat pengguna dapat melihat apa yang terjadi di dunia pada waktu tertentu. Tim engineer mulai menggunakan Jetpack Compose untuk memodernisasi
sistem desain mereka. Karena Monzo adalah bank dan aplikasi yang menawarkan
layanan keuangan digital. Misi mereka adalah menghasilkan uang
bagi semua orang. Sistem desain Monzo mulai menyimpang dari Desain Material sehingga
mereka menginginkan cara mudah untuk menulis dan ShareChat is a leading social media platform in India that allows users to share their opinions, document their lives, and make new friends in their native language. The standard Red Up Green Down color scheme that many wealth management app users take for granted can be very problematic for colorblind users and those with color vision deficiency.The Futubull team is embracing users’ needs by making concrete improvements so that everyone can grasp the key to wealth. TikTok, the world’s community-driven entertainment destination, brings over 1 billion people together from around the world to discover, create and share content they love. OkCredit is a credit account management app for millions of shop owners and their customers in India. With 140M transactions month over month, and 50M+ downloads, last year alone saw OkCredit recording $50 billion worth of transactions on the app. Operating at such a huge scale scale, OkCredit created a smooth and seamless experience for all their users by focusing on reducing ANRs and improving the app startup time. Lyft is committed to app excellence. They have to be. For a rideshare app — providing a vital, time-sensitive service to millions of drivers and riders every day — a slow or unresponsive app adds unacceptable friction. Josh is a short-video app from India, launched in 2020. One of the fastest growing short-video apps with over 124 million MAUs, optimizing it across a range of devices (high, mid, low end) and maintaining a standard experience across all of them is critical for their success. Improving app startups time and making the app responsive helped them achieve success. Microsoft Lens increases developer productivity using CameraX Zomato is an Indian multinational restaurant aggregator and food delivery company serving customers across 500 cities in India alone. In order to launch new features on their Android app, Headspace spent 8 months refactoring their architecture and rewriting in Kotlin. Learn how this reboot helped their business grow. Google Photos is the home for your memories, and their development team believes people should be able to enjoy those memories across all devices. Learn how Duolingo made the business decision to focus on Android performance and how they improved developer productivity and scaled their business. Mercari allows millions of people to shop and sell almost anything. The company was founded in 2013 in Japan, and it now is the largest smartphone-focused C2C marketplace in Japan. Google Duo is a simple, high quality video calling app for everyone. With the increase of people being at home during the Covid-19 pandemic, the Duo team saw a significant increase in people using the app to stay connected with friends & family, school and work. Headspace drive business growth by investing in Android app quality. SmartNews helps millions of people discover their world everyday by sharing timely news from a diverse set of news sources. Twitter is one of the most widely used social media platforms where users can see what’s happening in the world at any given moment. Delight Room Alarmy is an alarm app that can be turned off only when the pre-selected activities, such as taking a photo, solving a math problem, shaking phone, etc., are performed by the user. The Google Home app helps set up, manage, and control your Google Home, Google Nest, and Chromecast devices—plus thousands of connected home products like lights, cameras, thermostats, and more. Truecaller is an app that offers caller identification, call blocking, chat messaging and organized inbox. The app has a basic offering and a premium version which is ad-free and has a variety of unlocked features like advanced spam blocking and call recording.Microsoft Outlook, Teams, dan Office meningkatkan retensi dan pengguna aktif dengan perangkat layar besar
Cuvva mem-build lebih cepat dan berkualitas lebih tinggi dengan Compose
Square melihat peningkatan produktivitas dengan Compose
Twitter melihat peningkatan efisiensi dan kecepatan developer dengan Compose
Monzo mem-build aplikasi yang lebih andal dan berkualitas lebih tinggi dengan Compose
ShareChat addresses Jank issues to increase feed scrolling by 60%
The Key to Wealth for Everyone
TikTok Optimizes User Experience with Android Tools
OkCredit’s average merchant transaction goes up by 30% after reducing ANR
Lyft improves Android app startup time for drivers by 21%
Josh sees increased customer retention by improving app startup time by 30%
Microsoft Lens increases developer productivity using CameraX
Increasing app speed by 30%: a key ingredient in Zomato’s growth recipe
Headspace's Android reboot increases monthly active users by 15%
Google Photos increased daily active users by building for large screens
Duolingo refactors on Android with MVVM and Jetpack libraries
Mercari improves UI development productivity by 56% with Jetpack Compose
Google Duo sees increased engagement and improved ratings by optimizing for larger screens
Headspace drive business growth by investing in Android app quality
SmartNews reduces lines of code by 20% and improves team morale with Kotlin
Twitter increases developer productivity and code reliability with Kotlin
Delight Room increased 90% of its organic US users with Play Console
Google Home reduces #1 cause of crashes by 33%
Truecaller brings ~40% subscribers back with real time developer notifications