Serpihan bebas masalah: Menggunakan Komponen Senibina Navigasi Android

Kandungan

Apakah komponen Arkitek Navigasi?
Menambah Editor Navigasi ke Android Studio
Kapasiti projek: Navigasi Fragment dan UI Navigasi
Dapatkan gambaran visual mengenai navigasi aplikasi anda
Mengepung Grafik Navigasi: Menambah destinasi
Mengemas kini susun atur serpihan anda
Fragment_first.xml
Fragment_second.xml
Fragment_third.xml
Menyambungkan destinasi anda dengan tindakan
Mengadakan Grafik Navigasi
Mencetuskan peralihan dengan NavController
Menambah lebih banyak navigasi
Mewujudkan animasi peralihan tersuai
Mengakhiri

Semasa persidangan I / O 2018, Google mengumumkan pendekatan baru untuk membangunkan aplikasi Android.

Cadangan rasmi Google adalah untuk membuat satu Aktiviti tunggal yang berfungsi sebagai titik masuk utama aplikasi anda, kemudian menyampaikan kandungan kandungan anda yang lain sebagai serpihan.

Walaupun pemikiran menyulap semua urus niaga pecahan yang berbeza dan kitaran hayat mungkin terdengar seperti mimpi buruk, di I / O 2018 Google juga melancarkan Komponen Arsitektur Navigasi yang direka untuk membantu anda mengguna pakai struktur Aktiviti tunggal seperti ini.

Dalam artikel ini, kami akan menunjukkan kepada anda bagaimana untuk menambah komponen Navigasi pada projek anda dan bagaimana anda boleh menggunakannya dengan cepat dan mudah membuat aplikasi Single-Activity, berbilang serpihan, dengan sedikit bantuan daripada Editor Navigasi Android Studio baru. Sebaik sahaja anda mencipta dan menyambung serpihan anda, kami akan meningkatkan peralihan serpihan standard Android dengan menggunakan komponen Navigasi dan Editor untuk membuat pelbagai animasi peralihan yang disesuaikan sepenuhnya.

Apakah komponen Arkitek Navigasi?

Sebahagian daripada Android JetPack, Komponen Senibina Navigasi membantu anda memvisualisasikan laluan yang berbeza menerusi aplikasi anda dan memudahkan proses melaksanakan laluan ini, terutamanya apabila mengurus urus niaga serpihan.

Untuk menggunakan komponen Navigasi, anda perlu membuat Grafik Navigasi, yang merupakan fail XML yang menerangkan bagaimana Aktiviti dan serpihan aplikasi anda berkaitan dengan satu sama lain.

Grafik Navigation terdiri daripada:

Destinasi: Skrin individu pengguna boleh menavigasi
Tindakan: Laluan pengguna boleh dibawa antara destinasi aplikasi anda

Anda boleh melihat perwakilan visual Grafik Navigasi projek anda dalam Editor Navigasi Android Studio. Di bawah, anda akan menemui Grafik Navigation yang terdiri daripada tiga destinasi dan tiga tindakan seperti yang dipaparkan dalam Editor Navigasi.

Komponen Navigasi direka untuk membantu anda melaksanakan struktur aplikasinya yang disyorkan baru Google, di mana satu aktiviti "tuan rumah" Grafik Navigation, dan semua tujuan anda dilaksanakan sebagai serpihan. Dalam artikel ini, kami akan mengikuti pendekatan yang disyorkan ini dan mewujudkan aplikasi yang terdiri daripada MainActivity dan tiga destinasi serpihan.

Bagaimanapun, komponen Navigasi bukan hanya untuk aplikasi yang mempunyai struktur yang disyorkan ini. Projek boleh mempunyai Grafik Navigasi berganda, dan anda boleh menggunakan serpihan dan Aktiviti sebagai destinasi dalam Grafik Navigasi tersebut. Jika anda memindahkan projek yang besar dan matang kepada komponen Navigasi, anda mungkin lebih mudah untuk memisahkan aliran navigasi aplikasi anda ke dalam kumpulan, di mana setiap kumpulan terdiri daripada Aktiviti "utama", beberapa serpihan yang berkaitan, dan Grafik Navigasi sendiri.

Menambah Editor Navigasi ke Android Studio

Untuk membantu anda memanfaatkan komponen Navigasi, Android Studio 3.2 Canary dan ciri-ciri yang lebih tinggi Editor Navigasi baru.

Untuk mendayakan editor ini:

Pilih "Android Studio> Keutamaan ..." dari bar menu Android Studio.
Di menu sebelah kiri, pilih "Eksperimen."
Jika ia belum dipilih, pilih kotak pilihan "Dayakan Editor Navigasi".

Klik "OK."
Restart Android Studio.

Kapasiti projek: Navigasi Fragment dan UI Navigasi

Buat projek baru dengan tetapan pilihan anda, kemudian buka fail build.gradle dan tambahkan fragmen navigasi dan navigasi sebagai dependensi projek:

dependencies {implementation fileTree (dir: libs, include:) implementation com.android.support:appcompat-v7:28.0.0 implementation com.android.support.constraint: layout-constraint: 1.1.3 // Add // implementation implementation "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI menyediakan akses kepada beberapa fungsi pembantu // pelaksanaan "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementation 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 gambaran visual mengenai navigasi aplikasi anda

Untuk membuat Graf Navigasi:

Kawalan-klik direktori "res" projek anda dan pilih "New> Direktori Sumber Android."
Buka dropdown "Jenis Sumber" dan pilih "navigasi."
Pilih "OK."
Kawalan-klik direktori baru "res / navigasi" dan pilih "Fail sumber> Navigasi baru."
Buka dropdown "Jenis Sumber" dan pilih "Navigasi."

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

Buka fail "res / navigasi / nav_graph" anda, dan Editor Navigasi akan dilancarkan secara automatik. Sama dengan editor susun atur, Editor Navigasi terbahagi kepada tab "Reka Bentuk" dan "Teks".

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

<? xml version = "1.0" encoding = "utf-8"?> // Navigation 'adalah nod akar setiap grafik navigasi //

Tab "Reka Bentuk" ialah tempat anda boleh membina dan mengedit navigasi aplikasi anda secara visual.

Dari kiri ke kanan, Editor Navigasi terdiri daripada:

Senarai Destinasi: Ini menyenaraikan semua destinasi yang membentuk Graf Navigasi ini, ditambah dengan Aktiviti di mana Grafik Navigation dihoskan.
Editor Grafik: Editor Grafik menyediakan gambaran keseluruhan mengenai semua destinasi grafik dan tindakan yang menyambungkannya.
Editor Sifat: Jika anda memilih destinasi atau tindakan dalam Editor Grafik, panel "Atribut" akan memaparkan maklumat mengenai item yang sedang dipilih.

Mengepung Grafik Navigasi: Menambah destinasi

Graf Navigasi kami saat ini kosong. Mari tambahkan beberapa destinasi.

Anda boleh menambah Aktiviti atau serpihan yang sudah ada, tetapi anda juga boleh menggunakan Grafik Navigasi untuk membuat dan membuat serpihan baru dengan cepat dan mudah:

Beri butang "Destinasi Baru" satu klik, dan pilih "Buat destinasi kosong."

Dalam medan "Nama Fragmen", masukkan nama kelas serpihan anda; Saya menggunakan "FirstFragment."
Pastikan kotak semak "Buat susunatur XML" dipilih.
Lengkapkan medan "Nama Tata Fragment"; Saya menggunakan "fragment_first."
Klik "Selesai."

Subclass FirstFragment dan file sumber susun atur "fragment_first.xml" yang berkaitan akan kini ditambah kepada projek anda. FirstFragment juga akan muncul sebagai destinasi dalam Grafik Navigasi.

Jika anda memilih FirstFragment dalam Editor Navigasi, panel "Atribut" akan memaparkan beberapa maklumat mengenai destinasi ini, seperti nama kelasnya dan ID yang anda akan gunakan untuk merujuk destinasi ini di tempat lain dalam kod anda.

Bilas dan ulangi untuk menambah SecondFragment dan ThirdFragment ke projek anda.

Beralih ke tab "Teks" dan anda akan melihat bahawa XML telah dikemas kini untuk mencerminkan perubahan ini.

Setiap Grafik Navigation mempunyai destinasi permulaan, iaitu skrin yang dipaparkan apabila pengguna melancarkan aplikasi anda. Dalam kod di atas, kami menggunakan FirstFragment sebagai destinasi permulaan aplikasi kami. Jika anda bertukar ke tab "Reka Bentuk", maka anda akan melihat ikon rumah, yang juga menandakan FirstFragment sebagai destinasi permulaan graf.

Jika anda lebih suka menggunakan titik permulaan yang berbeza, kemudian pilih Aktiviti atau serpihan yang dipersoalkan, dan kemudian pilih "Memulakan Destinasi" dari panel "Sifat".

Sebagai alternatif, anda boleh membuat perubahan ini di peringkat kod:

Mengemas kini susun atur serpihan anda

Sekarang kita mempunyai destinasi kita, mari tambahkan beberapa elemen antara muka pengguna supaya sentiasa jelas fragmen yang sedang kita lihat sekarang.

Saya akan menambah yang berikut untuk setiap serpihan:

TextView yang mengandungi tajuk fragmen
Butang yang akan membolehkan pengguna menavigasi dari satu serpihan ke seterusnya

Berikut adalah kod untuk setiap fail sumber susun atur:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Menyambungkan destinasi anda dengan tindakan

Langkah seterusnya ialah menghubungkan destinasi kami melalui tindakan.

Anda boleh membuat tindakan di Editor Navigasi menggunakan seret dan lepas mudah:

Pastikan tab "Reka Bentuk" Editor dipilih.
Tuding di sebelah kanan destinasi yang anda ingin arahkan dari, yang dalam contoh ini adalah FirstFragment. Lingkaran sepatutnya muncul.
Klik dan seret kursor anda ke destinasi yang anda mahu navigasi kepada, iaitu SecondFragment. Baris biru sepatutnya muncul. Apabila SecondFragment ditonjolkan biru, lepaskan kursor untuk mewujudkan hubungan antara destinasi tersebut.

Sekarang mesti ada arrow tindakan yang menghubungkan FirstFragment ke SecondFragment. Klik untuk memilih anak panah ini, dan panel "Atribut" akan dikemas kini untuk memaparkan beberapa maklumat mengenai tindakan ini, termasuk ID yang diberikan sistemnya.

Perubahan ini juga ditunjukkan dalam XML Grafik Navigation:

… … …

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

Mengadakan Grafik Navigasi

Graf Navigasi menyediakan gambaran visual mengenai tujuan dan tindakan apl anda, tetapi penggunaan tindakan ini memerlukan beberapa kod tambahan.

Sebaik sahaja anda telah membuat Grafik Navigasi, anda perlu menganjurkannya dalam Aktiviti dengan menambah NavHostFragment ke fail susunatur Aktiviti itu. NavHostFragment ini menyediakan sebuah bekas di mana navigasi boleh berlaku dan juga akan bertanggungjawab untuk menukar fragmen masuk dan keluar apabila pengguna menavigasi sekitar aplikasi anda.

Buka fail "activity_main.xml" projek anda dan tambahkan NavHostFragment.

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

Dalam kod di atas, aplikasi: defaultNavHost = "true" membolehkan Hos Navigasi untuk memintas apabila butang "Kembali" sistem ditekan, jadi aplikasi sentiasa menghormati navigasi yang diterangkan dalam Grafik Navigasi anda.

Mencetuskan peralihan dengan NavController

Seterusnya, kita perlu melaksanakan NavController, yang merupakan komponen baru yang bertanggungjawab untuk menguruskan proses navigasi dalam NavHostFragment.

Untuk menavigasi ke skrin baru, anda perlu mengambil NavController menggunakan Navigasi.findNavController, panggil kaedah navigasi (), kemudian lulus sama ada ID destinasi yang anda sedang menavigasi atau tindakan yang ingin anda panggil. Sebagai contoh, saya menggunakan "action_firstFragment_to_secondFragment," yang akan mengalihkan 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 berpindah ke skrin baru dengan mengklik butang, jadi kami juga perlu melaksanakan OnClickListener.

Selepas membuat perubahan ini, FirstFragment seharusnya kelihatan seperti ini:

import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import androidx.navigation.NavController; import androidx.navigation.Navigation; FirstFragment kelas awam memanjangkan Fragment {Public FirstFragment () {} @Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); jika (getArguments ()! = null) {}} @Override public View onCreateView (inflator LayoutInflater, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (baru View.OnClickListener () {@Override public void onClick (Lihat v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment); }}); }}

Seterusnya, buka MainActivity anda dan tambahkan yang berikut:

NavigationView.OnNavigationItemSelectedListener: Seorang pendengar untuk mengendalikan peristiwa pada item navigasi
SecondFragment.OnFragmentInteractionListener: Antara muka yang dihasilkan semasa anda mencipta SecondFragment melalui Editor Navigasi

MainActivity juga perlu melaksanakan kaedah onFragmentInteraction (), yang membolehkan komunikasi antara fragmen dan Aktiviti.

import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.net.Uri; import android.view.MenuItem; import android.support.design.widget.NavigationView; import android.support.annotation.NonNull; MainActivity kelas awam meluaskan AppCompatActivity melaksanakan NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Orrride public boolean onNavigationItemSelected (@NonNull Menu Item item) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Menambah lebih banyak navigasi

Untuk melaksanakan pelayaran aplikasi kami yang lain, kami hanya perlu menyalin / paste blok onViewCreated dan membuat beberapa tweak supaya kami merujuk widget dan tindakan navigasi yang betul.

Buka SecondFragment anda dan tambah yang berikut:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Button Button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (baru View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_secondFragment_to_thirdFragment); }}); }

Kemudian, kemas kini blok OnViewCreated di ThirdFragment:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Button Button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (baru View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_thirdFragment_to_firstFragment); }}); }

Akhir sekali, jangan lupa untuk menambah antara muka ThirdFragment.OnFragmentInteractionListener ke MainActivity anda:

MainActivity kelas awam meluaskan AppCompatActivity melaksanakan NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Jalankan projek ini pada peranti Android anda atau Peranti Maya Android (AVD) dan uji navigasi. Anda sepatutnya dapat menavigasi antara tiga serpihan dengan mengklik butang yang berbeza.

Mewujudkan animasi peralihan tersuai

Pada ketika ini, pengguna boleh bergerak di sekitar aplikasi anda, tetapi peralihan antara setiap serpihan cukup mendadak. Dalam bahagian akhir ini, kami akan menggunakan komponen Navigasi untuk menambah animasi yang berbeza untuk setiap peralihan, supaya ia berlaku lebih lancar.

Setiap animasi yang anda mahu gunakan mesti ditakrifkan dalam fail sumber animasi sendiri, di dalam direktori "res / anim". Jika projek anda tidak mengandungi direktori "res / enam", anda perlu membuat satu:

Control-click folder "res" projek anda dan pilih "New> Direktori Sumber Android."
Beri Direktori ini nama "enam."
Buka dropdown "Jenis Sumber" dan pilih "anim."
Klik "OK."

Mari kita mulakan dengan menentukan animasi pudar:

Kawalan-klik pada direktori "res / enam" projek anda.
Pilih "Sumber> Animasi sumber fail."
Beri file ini nama "fade_out."
Buka fail "fade_out" anda, dan tambah yang berikut:

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

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

Anda kini boleh menetapkan animasi ini ke tindakan anda melalui Editor Navigasi.Untuk memainkan animasi pudar apabila pengguna melayari FirstFragment ke SecondFragment:

Buka Graf Navigasi anda dan pastikan tab "Reka Bentuk" dipilih.
Klik untuk memilih tindakan yang menghubungkan FirstFragment ke SecondFragment.
Dalam panel "Sifat", klik untuk mengembangkan bahagian "Peralihan". Secara lalai, setiap dropdown dalam seksyen ini perlu ditetapkan kepada "Tiada."
Buka lajur "Enter", yang mengawal animasi yang dimainkan setiap kali peralihan SecondFragment ke bahagian atas timbunan belakang. Pilih animasi "fade_out".

Jika anda bertukar ke tab "Reka Bentuk", maka anda akan melihat bahawa animasi ini telah ditambahkan pada "action_firstFragment_to_secondFragment."

Jalankan projek yang dikemas kini pada peranti Android atau AVD anda. Anda kini harus menghadapi kesan pudar apabila anda menavigasi dari FirstFragment to SecondFragment.

Jika anda melihat lagi panel "Sifat", anda akan melihat bahawa "Enter" bukanlah satu-satunya bahagian peralihan di mana anda boleh menggunakan animasi. Anda juga boleh memilih dari:

Keluar: Animasi yang memainkan apabila serpihan meninggalkan timbunan
Pop Masukkan: Animasi yang memainkan apabila serpihan menumpuk bahagian atas timbunan
Keluar Pop: Animasi yang memainkan apabila serpihan beralih ke bahagian bawah timbunan

Cuba bereksperimen dengan menggunakan animasi yang berbeza ke bahagian yang berbeza dari peralihan anda. Anda juga boleh memuat turun projek yang telah siap dari GitHub.

Mengakhiri

Dalam artikel ini, kami melihat bagaimana anda boleh menggunakan komponen Arkitek Navigasi untuk membuat aplikasi Single-Activity, berbilang serpihan, lengkap dengan animasi peralihan tersuai. Adakah komponen Navigasi meyakinkan anda untuk memindahkan projek anda ke struktur permohonan jenis ini? Beritahu kami dalam komen di bawah!