Fragmen bebas gangguan: Menggunakan Komponen Arsitektur Navigasi Android

Video: Jetpack Compose migration code-along

Isi

Apa itu Komponen Arsitektur Navigasi?
Menambahkan Editor Navigasi ke Android Studio
Ketergantungan proyek: Fragmen Navigasi dan Navigasi UI
Dapatkan ikhtisar visual dari navigasi aplikasi Anda
Populating the Navigation Graph: Menambahkan tujuan
Memperbarui tata letak fragmen Anda
Fragment_first.xml
Fragment_second.xml
Fragment_third.xml
Menghubungkan tujuan Anda dengan tindakan
Hosting Grafik Navigasi
Memicu transisi dengan NavController
Menambahkan lebih banyak navigasi
Membuat animasi transisi khusus
Membungkus

Selama konferensi I / O 2018, Google mengumumkan pendekatan baru untuk mengembangkan aplikasi Android.

Rekomendasi resmi Google adalah untuk membuat Kegiatan tunggal yang berfungsi sebagai titik masuk utama aplikasi Anda, kemudian mengirimkan sisa konten aplikasi Anda sebagai fragmen.

Sementara pemikiran menyulap semua transaksi fragmen yang berbeda dan siklus hidup mungkin terdengar seperti mimpi buruk, di I / O 2018 Google juga meluncurkan Komponen Arsitektur Navigasi yang dirancang untuk membantu Anda mengadopsi struktur aktivitas tunggal semacam ini.

Dalam artikel ini, kami akan menunjukkan kepada Anda bagaimana cara menambahkan komponen Navigasi ke proyek Anda dan bagaimana Anda dapat menggunakannya untuk dengan cepat dan mudah membuat satu-Kegiatan, aplikasi multi-fragmen, dengan sedikit bantuan dari Editor Navigasi baru Android Studio. Setelah Anda membuat dan menghubungkan fragmen Anda, kami akan meningkatkan transisi fragmen standar Android dengan menggunakan komponen Navigasi dan Editor untuk membuat serangkaian animasi transisi yang sepenuhnya dapat disesuaikan.

Apa itu Komponen Arsitektur Navigasi?

Bagian dari Android JetPack, Komponen Arsitektur Navigasi membantu Anda memvisualisasikan rute yang berbeda melalui aplikasi Anda dan menyederhanakan proses penerapan rute ini, terutama ketika menyangkut pengelolaan transaksi fragmen.

Untuk menggunakan komponen Navigasi, Anda harus membuat Grafik Navigasi, yang merupakan file XML yang menggambarkan hubungan antara Aktivitas dan fragmen aplikasi Anda.

Grafik Navigasi terdiri dari:

Tujuan: Layar individual yang dapat ditavigasi oleh pengguna
Tindakan: Rute yang dapat diambil pengguna di antara tujuan aplikasi Anda

Anda dapat melihat representasi visual dari Grafik Navigasi proyek Anda di Editor Navigasi Android Studio. Di bawah, Anda akan menemukan Grafik Navigasi yang terdiri dari tiga tujuan dan tiga tindakan seperti yang muncul di Editor Navigasi.

Komponen Navigasi dirancang untuk membantu Anda menerapkan struktur aplikasi baru yang direkomendasikan Google, di mana satu Kegiatan "host" Grafik Navigasi, dan semua tujuan Anda diimplementasikan sebagai fragmen. Dalam artikel ini, kami akan mengikuti pendekatan yang direkomendasikan ini dan membuat aplikasi yang terdiri dari MainActivity dan tiga tujuan fragmen.

Namun, komponen Navigasi bukan hanya untuk aplikasi yang memiliki struktur yang direkomendasikan ini. Sebuah proyek dapat memiliki beberapa Grafik Navigasi, dan Anda dapat menggunakan fragmen dan Kegiatan sebagai tujuan dalam Grafik Navigasi tersebut. Jika Anda memigrasi proyek besar dan matang ke komponen Navigasi, Anda mungkin lebih mudah memisahkan aliran navigasi aplikasi Anda menjadi grup, di mana setiap grup terdiri dari Aktivitas "utama", beberapa fragmen terkait, dan Grafik Navigasinya sendiri.

Menambahkan Editor Navigasi ke Android Studio

Untuk membantu Anda memaksimalkan komponen Navigasi, Android Studio 3.2 Canary dan fitur yang lebih tinggi Editor Navigasi baru.

Untuk mengaktifkan editor ini:

Pilih "Android Studio> Preferences ..." dari bilah menu Android Studio.
Di menu sebelah kiri, pilih "Eksperimental."
Jika belum dipilih, pilih kotak centang "Aktifkan Editor Navigasi".

Klik "OK."
Mulai ulang Android Studio.

Ketergantungan proyek: Fragmen Navigasi dan Navigasi UI

Buat proyek baru dengan pengaturan pilihan Anda, lalu buka file build.gradle dan tambahkan navigasi-fragmen dan navigasi-ui sebagai dependensi proyek:

dependencies {implementasi fileTree (dir: libs, termasuk:) implementasi com.android.support:appcompat-v7:28.0.0 implementasi com.android.support.constraint: layout kendala: 1.1.3 // Tambahkan implementasi // berikut: // "android.arch.navigation: navigasi-fragmen: 1.0.0-alpha05" // Navigasi-UI menyediakan akses ke beberapa fungsi pembantu // implementasi "android.arch.navigation: navigasi-ui: 1.0.0-alpha05" implementasi com .android.support: support-v4: 28.0.0 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

Dapatkan ikhtisar visual dari navigasi aplikasi Anda

Untuk membuat Grafik Navigasi:

Kontrol-klik direktori "res" proyek Anda dan pilih "Baru> Direktori Sumber Daya Android."
Buka dropdown "Jenis sumber daya" dan pilih "navigasi."
Pilih "OK."
Kontrol-klik direktori "res / navigasi" baru Anda dan pilih "Baru> File sumber daya navigasi."
Buka dropdown "Jenis sumber daya" dan pilih "Navigasi."

Beri nama file ini; Saya menggunakan "nav_graph."
Klik "OK."

Buka file "res / navigation / nav_graph" Anda, dan Editor Navigasi akan diluncurkan secara otomatis. Mirip dengan editor tata letak, Navigasi Editor dibagi menjadi tab "Desain" dan "Teks".

Jika Anda memilih tab "Teks", Anda akan melihat XML berikut:

<? xml version = "1.0" encoding = "utf-8"?> // Navigasi ’adalah simpul akar dari setiap grafik navigasi //

Tab "Desain" adalah tempat Anda dapat membuat dan mengedit navigasi aplikasi secara visual.

Dari kiri ke kanan, Editor Navigasi terdiri dari:

Daftar Tujuan: Ini mencantumkan semua tujuan yang menyusun Grafik Navigasi khusus ini, ditambah Kegiatan di mana Grafik Navigasi dihosting.
Editor Grafik: Editor Grafik menyediakan tinjauan visual dari semua tujuan grafik dan tindakan yang menghubungkannya.
Editor Atribut: Jika Anda memilih tujuan atau tindakan di Editor Grafik, panel "Atribut" akan menampilkan informasi tentang item yang saat ini dipilih.

Populating the Navigation Graph: Menambahkan tujuan

Grafik Navigasi kami saat ini kosong. Mari kita tambahkan beberapa tujuan.

Anda dapat menambahkan Aktivitas atau fragmen yang sudah ada, tetapi Anda juga dapat menggunakan Grafik Navigasi untuk membuat fragmen baru dengan cepat dan mudah:

Berikan tombol "Tujuan Baru" klik, dan pilih "Buat tujuan kosong."

Di bidang "Nama Fragmen", masukkan nama kelas fragmen Anda; Saya menggunakan "FirstFragment."
Pastikan kotak centang "Buat tata letak XML" dipilih.
Isi bidang “Nama Tata Letak Fragmen”; Saya menggunakan "fragment_first."
Klik "Selesai."

Subclass FirstFragment dan file sumber daya tata letak “fragment_first.xml” yang sesuai sekarang akan ditambahkan ke proyek Anda. FirstFragment juga akan muncul sebagai tujuan di Grafik Navigasi.

Jika Anda memilih FirstFragment di Editor Navigasi, maka panel "Atribut" akan menampilkan beberapa informasi tentang tujuan ini, seperti nama kelasnya dan ID yang akan Anda gunakan untuk merujuk tujuan ini di tempat lain dalam kode Anda.

Bilas dan ulangi untuk menambahkan SecondFragment dan ThirdFragment ke proyek Anda.

Beralih ke tab "Teks" dan Anda akan melihat bahwa XML telah diperbarui untuk mencerminkan perubahan ini.

Setiap Grafik Navigasi memiliki tujuan awal, yaitu layar yang ditampilkan ketika pengguna meluncurkan aplikasi Anda. Dalam kode di atas, kami menggunakan FirstFragment sebagai tujuan awal aplikasi kami. Jika Anda beralih ke tab "Desain", maka Anda akan melihat ikon rumah, yang juga menandai FirstFragment sebagai tujuan awal grafik.

Jika Anda lebih suka menggunakan titik awal yang berbeda, maka pilih Aktivitas atau fragmen yang dimaksud, lalu pilih "Tetapkan Tujuan Mulai" dari panel "Atribut".

Atau, Anda dapat melakukan perubahan ini di level kode:

Memperbarui tata letak fragmen Anda

Sekarang kami memiliki tujuan kami, mari tambahkan beberapa elemen antarmuka pengguna sehingga selalu jelas bagian mana yang sedang kami lihat.

Saya akan menambahkan yang berikut ke setiap fragmen:

TextView yang berisi judul fragmen
Tombol yang memungkinkan pengguna untuk bernavigasi dari satu fragmen ke fragmen berikutnya

Berikut kode untuk setiap file sumber daya tata letak:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Menghubungkan tujuan Anda dengan tindakan

Langkah selanjutnya adalah menautkan tujuan kami melalui tindakan.

Anda dapat membuat tindakan di Editor Navigasi menggunakan drag and drop sederhana:

Pastikan tab "Desain" Editor dipilih.
Arahkan kursor ke sisi kanan tujuan yang ingin Anda navigasi dari, yang dalam hal ini adalah FirstFragment. Sebuah lingkaran akan muncul.
Klik dan seret kursor Anda ke tujuan yang ingin Anda navigasikan untuk, yang merupakan SecondFragment. Garis biru akan muncul. Ketika SecondFragment disorot biru, lepaskan kursor untuk membuat tautan antara tujuan-tujuan ini.

Seharusnya sekarang ada panah tindakan yang menghubungkan FirstFragment ke SecondFragment. Klik untuk memilih panah ini, dan panel "Atribut" akan memperbarui untuk menampilkan beberapa informasi tentang tindakan ini, termasuk ID yang ditetapkan sistemnya.

Perubahan ini juga tercermin dalam XML Grafik Navigasi:

… … …

Bilas dan ulangi untuk membuat tindakan yang menghubungkan SecondFragment ke ThirdFragment dan tindakan yang menghubungkan ThirdFragment ke FirstFragment.

Hosting Grafik Navigasi

Grafik Navigasi memberikan representasi visual dari tujuan dan tindakan aplikasi Anda, tetapi menjalankan tindakan ini memerlukan beberapa kode tambahan.

Setelah Anda membuat Grafik Navigasi, Anda perlu menghostingnya di dalam Aktivitas dengan menambahkan NavHostFragment ke file tata letak Aktivitas itu. NavHostFragment ini menyediakan wadah tempat navigasi dapat terjadi dan juga akan bertanggung jawab untuk menukar fragmen masuk dan keluar saat pengguna menavigasi di sekitar aplikasi Anda.

Buka file “activity_main.xml” proyek Anda dan tambahkan NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Buat fragmen yang akan bertindak sebagai NavHostFragment //

Dalam kode di atas, aplikasi: defaultNavHost = "true" memungkinkan Host Navigasi untuk mencegat setiap kali tombol "Kembali" sistem ditekan, sehingga aplikasi selalu menghormati navigasi yang dijelaskan dalam Grafik Navigasi Anda.

Memicu transisi dengan NavController

Selanjutnya, kita perlu mengimplementasikan NavController, yang merupakan komponen baru yang bertanggung jawab untuk mengelola proses navigasi dalam NavHostFragment.

Untuk menavigasi ke layar baru, Anda perlu mengambil NavController menggunakan Navigation.findNavController, panggil metode navigasikan (), lalu berikan ID tujuan yang Anda navigasikan atau tindakan yang ingin Anda lakukan. Misalnya, saya memanggil "action_firstFragment_to_secondFragment," yang akan memindahkan pengguna dari FirstFragment ke SecondFragment:

NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment);

Pengguna akan pindah ke layar baru dengan mengklik tombol, jadi kita juga perlu menerapkan OnClickListener.

Setelah melakukan perubahan ini, FirstFragment akan terlihat seperti ini:

impor android.os.Bundle; impor android.support.annotation.NonNull; impor android.support.annotation.Nullable; impor android.support.v4.app.Fragment; impor android.view.LayoutInflater; impor android.view.View; impor android.view.ViewGroup; impor android.widget.Button; impor androidx.navigation.NavController; impor androidx.navigation.Navigation; kelas publik FirstFragment memperluas Fragment {public FirstFragment () {} @Override public void onCreate (Bundle SavedInstanceState) {super.onCreate (saveInstanceState); if (getArguments ()! = null) {}} @Override public view onCreateView (LayoutInflater inflater, wadah ViewGroup, Bundel SavedInstanceState) {return inflater.inflate (R.layout.fragment_first, wadah, false); } @Override public void onViewCreated (@NonNull View view, @Nullable Bundle SavedInstanceState) {Tombol tombol = (Tombol) view.findViewById (R.id.button); button.setOnClickListener (View baru.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigasi.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate_RegmentFragment) }}); }}

Selanjutnya, buka MainActivity Anda dan tambahkan yang berikut:

NavigationView.OnNavigationItemSelectedListener: Seorang pendengar untuk menangani acara di item navigasi
SecondFragment.OnFragmentInteractionListener: Antarmuka yang dihasilkan saat Anda membuat SecondFragment melalui Navigasi Editor

MainActivity juga perlu mengimplementasikan metode onFragmentInteraction (), yang memungkinkan komunikasi antara fragmen dan Activity.

impor android.support.v7.app.AppCompatActivity; impor android.os.Bundle; impor android.net.Uri; impor android.view.MenuItem; impor android.support.design.widget.NavigationView; impor android.support.annotation.NonNull; MainActivity kelas publik memperluas AppCompatActivity mengimplementasikan NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protected void onCreate (Bundle saverstandstateState) {super.onCreate (disimpanInstanceState); setContentView (R.layout.activity_main); } @Override boolean publik onNavigationItemSelected (@NonNull itemItem item) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Menambahkan lebih banyak navigasi

Untuk menerapkan sisa navigasi aplikasi kami, kami hanya perlu menyalin / menempelkan blok onViewCreated dan membuat beberapa penyesuaian sehingga kami mereferensikan widget tombol dan tindakan navigasi yang benar.

Buka SecondFragment Anda dan tambahkan yang berikut:

@Override public void onViewCreated (@NonNull View view, @Nullable BundleelamatkanInstanceState) {Tombol tombol = (Tombol) view.findViewById (R.id.button2); button.setOnClickListener (View baru.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigasi.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate_dragmentFragment_pengiriman_terusan_kunci_kunci_kunci_kunci_kunci_kunci_kunci_kartu }}); }

Kemudian, perbarui blok onViewCreated ThirdFragment:

@Override public void onViewCreated (@NonNull View view, @Nullable BundleelamatkanInstanceState) {Tombol tombol = (Tombol) view.findViewById (R.id.button3); button.setOnClickListener (View baru.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigasi.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate_Fragment_Fragment_Fragment }}); }

Terakhir, jangan lupa menambahkan antarmuka ThirdFragment.OnFragmentInteractionListener ke MainActivity Anda:

MainActivity kelas publik memperluas AppCompatActivity mengimplementasikan NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Jalankan proyek ini di perangkat Android Anda atau Perangkat Virtual Android (AVD) dan uji navigasi. Anda harus dapat menavigasi di antara ketiga fragmen dengan mengklik tombol yang berbeda.

Membuat animasi transisi khusus

Pada titik ini, pengguna dapat bergerak di sekitar aplikasi Anda, tetapi transisi antara masing-masing fragmen cukup tiba-tiba. Di bagian akhir ini, kami akan menggunakan komponen Navigasi untuk menambahkan animasi yang berbeda untuk setiap transisi, sehingga terjadi lebih lancar.

Setiap animasi yang ingin Anda gunakan harus ditentukan dalam file sumber animasinya sendiri, di dalam direktori "res / anim". Jika proyek Anda belum mengandung direktori "res / anim", Anda harus membuatnya:

Kontrol-klik folder "res" proyek Anda dan pilih "Baru> Direktori Sumber Daya Android."
Beri Direktori ini nama "anim."
Buka dropdown "Jenis sumber daya", dan pilih "anim."
Klik "OK."

Mari kita mulai dengan mendefinisikan animasi fade-out:

Kontrol-klik direktori "res / anim" proyek Anda.
Pilih "Baru> File sumber daya animasi."
Beri nama file ini "fade_out."
Buka file "fade_out" Anda, dan tambahkan yang berikut:

Ulangi langkah-langkah di atas untuk membuat file sumber daya animasi kedua, bernama "slide_out_left," kemudian tambahkan yang berikut:

Buat file ketiga, bernama "slide_out_right" dan tambahkan yang berikut:

Anda sekarang dapat menetapkan animasi ini untuk tindakan Anda melalui Editor Navigasi.Untuk memutar animasi fade-out setiap kali pengguna menavigasi dari FirstFragment ke SecondFragment:

Buka Grafik Navigasi Anda dan pastikan tab "Desain" dipilih.
Klik untuk memilih tindakan yang menautkan FirstFragment ke SecondFragment.
Di panel "Atribut", klik untuk memperluas bagian "Transisi". Secara default, setiap dropdown di bagian ini harus ditetapkan ke "Tidak Ada."
Buka dropdown “Enter”, yang mengontrol animasi yang diputar setiap kali transisi SecondFragment ke atas tumpukan belakang. Pilih animasi "fade_out".

Jika Anda beralih ke tab "Desain", maka Anda akan melihat bahwa animasi ini telah ditambahkan ke "action_firstFragment_to_secondFragment."

Jalankan proyek yang diperbarui di perangkat Android Anda atau AVD. Anda sekarang harus menghadapi efek fade-out setiap kali Anda menavigasi dari FirstFragment ke SecondFragment.

Jika Anda melihat lagi pada panel "Atribut", Anda akan melihat bahwa "Enter" bukan satu-satunya bagian dari transisi tempat Anda dapat menerapkan animasi. Anda juga dapat memilih dari:

Keluar: Animasi yang diputar ketika sebuah fragmen meninggalkan tumpukan
Masukkan Pop: Animasi yang diputar ketika sebuah fragmen mengisi bagian atas tumpukan
Pop Keluar: Animasi yang diputar ketika sebuah fragmen sedang bertransisi ke bagian bawah tumpukan

Cobalah bereksperimen dengan menerapkan berbagai animasi ke berbagai bagian transisi Anda. Anda juga dapat mengunduh proyek yang sudah selesai dari GitHub.

Membungkus

Pada artikel ini, kami melihat bagaimana Anda dapat menggunakan komponen Arsitektur Navigasi untuk membuat aplikasi Aktivitas tunggal, beberapa fragmen, lengkap dengan animasi transisi kustom. Sudahkah komponen Navigasi meyakinkan Anda untuk melakukan migrasi proyek ke struktur aplikasi semacam ini? Beri tahu kami di komentar di bawah!

Isi