Nilalaman

• Ano ang Component ng Navigation Architecture?
• Pagdaragdag ng Navigation Editor sa Android Studio
• Mga dependency sa proyekto: Pag-navigate sa Pag-navigate at UI Navigation
• Kumuha ng isang visual na pangkalahatang-ideya ng pag-navigate ng iyong app
• Pag-pop ng Navigation Graph: Pagdaragdag ng mga patutunguhan
• Ina-update ang iyong mga layout ng fragment
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Pagkonekta sa iyong mga patutunguhan sa mga aksyon
• Pagho-host ng Navigation Graph
• Pag-aalis ng mga transisyon kasama ang NavController
• Pagdaragdag ng higit pang pag-navigate
• Lumilikha ng mga pasadyang animation ng paglipat
• Pagputol

Sa pagpupulong ng I / O ng 2018, inihayag ng Google ang isang bagong diskarte para sa pagbuo ng mga Android app.

Ang opisyal na rekomendasyon ng Google ay upang lumikha ng isang solong Aktibidad na nagsisilbing pangunahing punto ng pagpasok ng iyong app, pagkatapos ay ihatid ang natitirang nilalaman ng iyong aplikasyon bilang mga fragment.

Habang ang pag-iisip ng pag-juggling sa lahat ng iba't ibang mga transaksyon sa fragment at cycle ng buhay ay maaaring tunog tulad ng isang bangungot, sa I / O 2018 na inilunsad din ng Google ang Navigation Architecture Component na idinisenyo upang matulungan kang magpatibay ng ganitong uri ng solong istraktura ng Aktibidad.

Sa artikulong ito, ipapakita namin sa iyo kung paano idagdag ang bahagi ng Navigation sa iyong proyekto at kung paano mo magagamit ito upang mabilis at madaling lumikha ng isang solong Aktibidad, maramihang pag-fragment ng application, na may kaunting tulong mula sa bagong Navigation Editor ng Android Studio. Kapag nilikha mo at ikinonekta ang iyong mga fragment, mapapabuti namin sa karaniwang mga fragment transitions ng Android sa pamamagitan ng paggamit ng Navigation sangkap at Editor upang lumikha ng isang hanay ng mga ganap na napapasadyang mga animation ng paglipat.

Ano ang Component ng Navigation Architecture?

Bahagi ng Android JetPack, ang Navigation Architektura Component ay tumutulong sa iyo na mailarawan ang iba't ibang mga ruta sa pamamagitan ng iyong aplikasyon at pinadali ang proseso ng pagpapatupad ng mga ruta na ito, lalo na pagdating sa pamamahala ng mga transaksyon sa fragment.

Upang magamit ang bahagi ng Navigation, kakailanganin mong lumikha ng isang Navigation Graph, na isang XML file na naglalarawan kung paano nauugnay sa bawat isa ang Mga Aktibidad at fragment ng iyong app.

Ang isang Navigation Graph ay binubuo ng:

• Mga patutunguhan: Ang mga indibidwal na mga screen na maaaring mag-navigate sa gumagamit
• Mga Pagkilos: Ang mga ruta na maaaring makuha ng gumagamit sa pagitan ng mga patutunguhan ng iyong app

Maaari kang makakita ng isang visual na representasyon ng Navigation Graph ng iyong proyekto sa Navigation Editor ng Android Studio. Sa ibaba, makakahanap ka ng isang Navigation Graph na binubuo ng tatlong patutunguhan at tatlong mga aksyon tulad ng lilitaw sa Navigation Editor.

Ang bahagi ng Navigation ay idinisenyo upang matulungan kang ipatupad ang bagong inirekumendang istraktura ng Google, kung saan ang isang solong Aktibidad na "nagho-host" sa Navigation Graph, at lahat ng iyong mga patutunguhan ay ipinatupad bilang mga fragment. Sa artikulong ito, susundin namin ang inirekumendang diskarte na ito at lumikha ng isang application na binubuo ng isang MainActivity at tatlong mga patutunguhan ng fragment.

Gayunpaman, ang bahagi ng Navigation ay hindi lamang para sa mga aplikasyon na mayroong inirerekumendang istraktura na ito. Ang isang proyekto ay maaaring magkaroon ng maramihang Mga Navigation Graphs, at maaari mong gamitin ang mga fragment at Aktibidad bilang mga patutunguhan sa loob ng mga Navigation Graph. Kung lumilipat ka ng isang malaking, mature na proyekto sa bahagi ng Navigation, maaari mong mas madaling paghiwalayin ang mga pag-navigate ng iyong app sa mga grupo, kung saan ang bawat pangkat ay binubuo ng isang "pangunahing" Aktibidad, ilang mga kaugnay na mga fragment, at sarili nitong Navigation Graph.

Pagdaragdag ng Navigation Editor sa Android Studio

Upang matulungan kang masulit sa bahagi ng Navigation, ang Android Studio 3.2 Canary at mas mataas na tampok ng isang bagong Navigation Editor.

Upang paganahin ang editor na ito:

• Piliin ang "Android Studio> Mga Kagustuhan ..." mula sa bar sa menu ng Android Studio.
• Sa kaliwang menu, piliin ang "Eksperimental."
• Kung hindi pa napili, piliin ang checkbox na "Paganahin ang Navigation Editor".

• I-click ang "OK."
• I-restart ang Android Studio.

Mga dependency sa proyekto: Pag-navigate sa Pag-navigate at UI Navigation

Lumikha ng isang bagong proyekto kasama ang mga setting ng iyong pinili, pagkatapos buksan ang file ng build.gradle nito at idagdag ang nabuong fragment at nabigasyon-ui bilang mga dependency ng proyekto:

dependencies {implement fileTree (dir: libs, kasama ang:) pagpapatupad com.android.support:appcompat-v7:28.0.0 pagpapatupad com.android.support.constraint: pagpilit-layout: 1.1.3 // Idagdag ang sumusunod na // pagpapatupad "android.arch.navigation: nabigasyon-fragment: 1.0.0-alpha05" // Ang Navigation-UI ay nagbibigay ng pag-access sa ilang mga function ng helper // implementasyon "android.arch.navigation: nabigasyon-ui: 1.0.0-alpha05" pagpapatupad com .android.support: suporta-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 }

Kumuha ng isang visual na pangkalahatang-ideya ng pag-navigate ng iyong app

Upang lumikha ng isang Navigation Graph:

• I-control-click ang direktoryo ng "res" ng iyong proyekto at piliin ang "Bago> Direktor ng Android mapagkukunan."
• Buksan ang "Uri ng mapagkukunan" na pagbagsak at piliin ang "nabigasyon."
• Piliin ang "OK."
• I-click ang control-click ang iyong bagong "res / nabigasyon" na direktoryo at piliin ang "Bago> file na mapagkukunan ng Navigation."
• Buksan ang "Uri ng mapagkukunan" na pagbagsak at piliin ang "Pag-navigate."

• Bigyan ang pangalan ng file na ito; Gumagamit ako ng "nav_graph."
• I-click ang "OK."

Buksan ang iyong "res / nabigasyon / nav_graph" file, at awtomatikong ilulunsad ang Navigation Editor. Katulad sa layout ng layout, ang Navigation Editor ay nahahati sa mga tab na "Disenyo" at "Text".

Kung pinili mo ang tab na "Teksto", makikita mo ang sumusunod na XML:

<? xml version = "1.0" encoding = "utf-8"?> // Nabigasyon 'ang ugat ng node ng bawat graph ng pag-navigate //

Ang tab na "Disenyo" ay kung saan maaari kang magtayo at mai-edit nang biswal ang nabigasyon ng iyong app.

Mula sa kaliwa-kanan-kanan, ang Navigation Editor ay binubuo ng:

• Isang listahan ng Mga patutunguhan: Inililista nito ang lahat ng mga patutunguhan na bumubuo sa partikular na Navigation Graph, kasama ang Gawain kung saan naka-host ang Navigation Graph.
• Ang Graph Editor: Ang Graph Editor ay nagbibigay ng isang visual na pangkalahatang-ideya ng lahat ng mga patutunguhan ng graph at ang mga pagkilos na kumokonekta sa kanila.
• Ang Editor ng Mga Katangian: Kung pumili ka ng isang patutunguhan o isang aksyon sa Graph Editor, ang panel na "Mga Katangian" ay magpapakita ng impormasyon tungkol sa item na kasalukuyang napili.

Pag-pop ng Navigation Graph: Pagdaragdag ng mga patutunguhan

Ang aming Navigation Graph ay kasalukuyang walang laman. Magdagdag ng ilang mga patutunguhan.

Maaari kang magdagdag ng Mga Aktibidad o mga fragment na mayroon na, ngunit maaari mo ring gamitin ang Navigation Graph upang mabilis at madaling lumikha ng mga bagong fragment:

• Bigyan ang isang pindutan ng "Bagong patutunguhan", at piliin ang "Lumikha ng blangkong patutunguhan."

• Sa patlang na "Pangalan ng Fragment", ipasok ang pangalan ng klase ng iyong fragment; Gumagamit ako ng "FirstFragment."
• Tiyaking napili ang kahon ng "Lumikha ng layout XML".
• Kumpletuhin ang patlang na "Pangalan ng Layout ng Fragment"; Gumagamit ako ng "fragment_first."
• I-click ang "Tapos na."

Ang isang firstFragment subclass at kaukulang "fragment_first.xml" file na mapagkukunan ng layout ay idagdag ngayon sa iyong proyekto. Ang FirstFragment ay lilitaw din bilang isang patutunguhan sa Navigation Graph.

Kung pipiliin mo ang FirstFragment sa Navigation Editor, ang panel na "Mga Katangian" ay magpapakita ng ilang impormasyon tungkol sa patutunguhang ito, tulad ng pangalan ng klase at ID na gagamitin mo upang tukuyin ang patutunguhang ito sa ibang lugar sa iyong code.

Banlawan at ulitin upang magdagdag ng isang SecondFragment at ThirdFragment sa iyong proyekto.

Lumipat sa tab na "Teksto" at makikita mo na na-update ang XML upang ipakita ang mga pagbabagong ito.

Ang bawat Navigation Graph ay may panimulang patutunguhan, na kung saan ang screen na ipinapakita kapag inilulunsad ng gumagamit ang iyong app. Sa code sa itaas, gumagamit kami ng FirstFragment bilang panimulang destinasyon ng aming app. Kung lumipat ka sa tab na "Disenyo", mapapansin mo ang isang icon ng bahay, na minarkahan din ang FirstFragment bilang panimulang destinasyon ng graph.

Kung mas gugustuhin mong gumamit ng ibang panimulang punto, pagkatapos ay piliin ang Aktibidad o fragment na pinag-uusapan, at pagkatapos ay piliin ang "Itakda ang Pagsisimula ng Takda" mula sa panel na "Mga Katangian".

Bilang kahalili, maaari mong gawin ang pagbabagong ito sa antas ng code:

Ina-update ang iyong mga layout ng fragment

Ngayon ay mayroon kaming mga patutunguhan, magdagdag ng ilang mga elemento ng interface ng gumagamit upang laging malinaw kung aling fragment ang tinitingnan namin ngayon.

Idadagdag ko ang sumusunod sa bawat fragment:

• Isang TextView na naglalaman ng pamagat ng fragment
• Isang pindutan na magpapahintulot sa gumagamit na mag-navigate mula sa isang fragment hanggang sa susunod

Narito ang code para sa bawat file na mapagkukunan ng layout:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Pagkonekta sa iyong mga patutunguhan sa mga aksyon

Ang susunod na hakbang ay nag-uugnay sa aming mga patutunguhan sa pamamagitan ng mga aksyon.

Maaari kang lumikha ng isang pagkilos sa Navigation Editor gamit ang simpleng pag-drag at pag-drop:

• Tiyaking napili ang tab na "Disenyo" ng Editor.
• Mag-hover sa kanang bahagi ng patutunguhan na nais mong mag-navigate mula sa, na sa pagkakataong ito ay FirstFragment. Ang isang bilog ay dapat lumitaw.
• Mag-click at i-drag ang iyong cursor sa patutunguhan na nais mong mag-navigate sa, na kung saan ay SecondFragment. Ang isang asul na linya ay dapat lumitaw. Kapag ang SecondFragment ay naka-highlight na asul, pakawalan ang cursor upang lumikha ng isang link sa pagitan ng mga patutunguhan na ito.

Dapat ngayon ay isang aksyon arrow na nag-uugnay sa FirstFragment sa SecondFragment. Mag-click upang piliin ang arrow na ito, at ang panel na "Attribute" ay mag-update upang ipakita ang ilang impormasyon tungkol sa pagkilos na ito, kasama ang ID na itinalaga ng system.

Ang pagbabagong ito ay makikita rin sa XML ng Navigation Graph:

… … …

Banlawan at ulitin upang lumikha ng isang aksyon na nag-uugnay sa SecondFragment sa ThirdFragment at isang aksyon na nag-uugnay sa ThirdFragment sa FirstFragment.

Pagho-host ng Navigation Graph

Nagbibigay ang Navigation Graph ng isang visual na representasyon ng mga patutunguhan at aksyon ng iyong app, ngunit ang pagtawag sa mga pagkilos na ito ay nangangailangan ng karagdagang karagdagang code.

Kapag nakagawa ka ng Navigation Graph, kailangan mong i-host ito sa loob ng isang Aktibidad sa pamamagitan ng pagdaragdag ng NavHostFragment sa layout ng layout ng Aktibidad. Ang NavHostFragment na ito ay nagbibigay ng isang lalagyan kung saan maaaring maganap ang nabigasyon at magiging responsable din sa pagpapalit ng mga fragment papasok at labas habang ang gumagamit ay nag-navigate sa paligid ng iyong app.

Buksan ang file na "activity_main.xml" ng iyong proyekto at magdagdag ng isang NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Lumikha ng isang fragment na gaganap bilang NavHostFragment //

Sa code sa itaas, ang app: defaultNavHost = "totoo" ay pinapayagan ang Navigation Host na makagambala tuwing pinindot ang pindutan ng "Bumalik" ng system, kaya palaging pinaparangalan ng app ang nabigasyon na inilarawan sa iyong Navigation Graph.

Pag-aalis ng mga transisyon kasama ang NavController

Susunod, kailangan nating ipatupad ang isang NavController, na isang bagong sangkap na responsable sa pamamahala ng proseso ng pag-navigate sa loob ng isang NavHostFragment.

Upang mag-navigate sa isang bagong screen, kailangan mong kunin ang isang NavController gamit ang Navigation.findNavController, tawagan ang paraan ng pag-navigate (), pagkatapos ay ipasa ang alinman sa ID ng patutunguhan na iyong nai-navigate o ang pagkilos na nais mong mahikayat. Halimbawa, inaanyayahan ko ang "action_firstFragment_to_secondFragment," na magdadala ng gumagamit mula sa FirstFragment, hanggang SecondFragment:

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

Lilipat ang gumagamit sa isang bagong screen sa pamamagitan ng pag-click sa isang pindutan, kaya kailangan din nating ipatupad ang isang OnClickListener.

Matapos gawin ang mga pagbabagong ito, ang hitsura ng FirstFragment:

i-import ang android.os.Bundle; i-import ang android.support.annotation.NonNull; i-import ang android.support.annotation.Nullable; mag-import ng android.support.v4.app.Fragment; i-import ang android.view.LayoutInflater; i-import ang android.view.View; i-import ang android.view.ViewGroup; mag-import ng android.widget.Button; mag-import ng androidx.navigation.NavController; i-import ang androidx.navigation.Navigation; pampublikong klase ang FirstFragment ay nagpapalawak ng Fragment {pampublikong FirstFragment () {} @Override pampublikong walang bisa saCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState); kung (getArguments ()! = null) {}} @Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle saveInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override pampublikong walang bisa saViewCreated (@NonNull Tingnan ang view, @Nullable Bundle saveInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (bagong View.OnClickListener () {@Override pampublikong walang bisa saClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (FFT) }}); }}

Susunod, buksan ang iyong MainActivity at idagdag ang sumusunod:

• NavigationView.OnNavigationItemSelectedListener: Isang tagapakinig para sa paghawak ng mga kaganapan sa mga item sa nabigasyon
• SecondFragment.OnFragmentInteractionListener: Isang interface na nalikha nang lumikha ka ng SecondFragment sa pamamagitan ng Navigation Editor

Kailangan din ng MainActivity na ipatupad ang onFragmentInteraction () na pamamaraan, na nagpapahintulot sa komunikasyon sa pagitan ng fragment at sa Aktibidad.

i-import ang android.support.v7.app.AppCompatActivity; i-import ang android.os.Bundle; i-import ang android.net.Uri; i-import ang android.view.MenuItem; pag-import ng android.support.design.widget.NavigationView; i-import ang android.support.annotation.NonNull; pampublikong klase na MainActivity ay nagpapalawak ng AppCompatActivity ay nagpapatupad ng NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protektado ng walang bisa saCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (@NonNull MenuItem item) {bumalik false; } @Override pampublikong walang bisa saFragmentInteraction (Uri ng Uri) {}}

Pagdaragdag ng higit pang pag-navigate

Upang maipatupad ang natitirang nabigasyon ng aming app, kailangan lang nating kopyahin / i-paste ang onViewCreated block at gumawa ng ilang mga pag-aayos upang tinukoy namin ang tamang mga widget button at mga aksyon sa pag-navigate.

Buksan ang iyong SecondFragment at idagdag ang sumusunod:

@Override pampublikong walang bisa saViewCreated (@NonNull Tingnan ang view, @Nullable Bundle saveInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (bagong View.OnClickListener () {@Override pampublikong walang bisa saClick (Tingnan v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (; }}); }

Pagkatapos, i-update ang block ng ThreeFragment's onViewCreated block:

@Override pampublikong walang bisa saViewCreated (@NonNull View view, @Nullable Bundle saveInstanceState) {Button button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (bagong View.OnClickListener () {@Override pampublikong walang bisa saClick (Tingnan v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (FF) }}); }

Sa wakas, huwag kalimutang idagdag ang ThirdFragment.OnFragmentInteractionListener interface sa iyong MainActivity:

pampublikong klase na MainActivity ay nagpapalawak ng AppCompatActivity ay nagpapatupad ng NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Patakbuhin ang proyektong ito sa iyong Android device o Android Virtual Device (AVD) at subukan ang pag-navigate. Dapat mong mag-navigate sa pagitan ng lahat ng tatlong mga fragment sa pamamagitan ng pag-click sa iba't ibang mga pindutan.

Lumilikha ng mga pasadyang animation ng paglipat

Sa puntong ito, ang gumagamit ay maaaring lumipat sa paligid ng iyong app, ngunit ang paglipat sa pagitan ng bawat fragment ay medyo bigla. Sa pangwakas na seksyon na ito, gagamitin namin ang bahagi ng Navigation upang magdagdag ng ibang animation sa bawat paglipat, kaya mas maayos itong nangyari.

Ang bawat animation na nais mong gamitin ay dapat na tinukoy sa sarili nitong file na mapagkukunan ng animation, sa loob ng isang direktoryo na "res / anim". Kung ang iyong proyekto ay hindi na naglalaman ng isang direktoryo ng "res / anim", kakailanganin mong lumikha ng isa:

• I-control-click ang folder ng "res" ng iyong proyekto at piliin ang "Bago> Direktor ng Android mapagkukunan."
• Bigyan ang Directory na ito ng pangalang "anim."
• Buksan ang "uri ng mapagkukunan" na pagbagsak, at piliin ang "anim."
• I-click ang "OK."

Magsimula tayo sa pamamagitan ng pagtukoy ng isang fade-out na animation:

• Kontrol-click ang direktoryo ng "res / anim" na direktoryo ng iyong proyekto.
• Piliin ang "Bago> file na mapagkukunan ng Animation."
• Bigyan ang file na ito ng pangalang "fade_out."
• Buksan ang iyong "fade_out" file, at idagdag ang sumusunod:

Ulitin ang mga hakbang sa itaas upang lumikha ng isang pangalawang file na mapagkukunan ng animation, na pinangalanang "slide_out_left," pagkatapos ay idagdag ang sumusunod:

Lumikha ng isang pangatlong file, na pinangalanang "slide_out_right" at idagdag ang sumusunod:

Maaari mo na ngayong italaga ang mga animation na ito sa iyong mga aksyon sa pamamagitan ng Navigation Editor.Upang i-play ang fade-out na animation tuwing gumagamit ang nag-navigate mula sa FirstFragment hanggang SecondFragment:

• Buksan ang iyong Navigation Graph at tiyaking napili ang tab na "Disenyo".
• I-click upang piliin ang pagkilos na nag-uugnay sa FirstFragment sa SecondFragment.
• Sa panel na "Mga Katangian", i-click upang mapalawak ang seksyong "Mga Paglilipat". Bilang default, ang bawat pagbagsak sa seksyong ito ay dapat itakda sa "Wala."
• Buksan ang "Enter" na pagbagsak, na kinokontrol ang animation na gumaganap tuwing ang mga paglilipat ng SecondFragment sa tuktok ng back stack. Piliin ang "fade_out" na animation.

Kung lumipat ka sa tab na "Disenyo", makikita mo na ang animasyong ito ay naidagdag sa "action_firstFragment_to_secondFragment."

Patakbuhin ang na-update na proyekto sa iyong Android device o AVD. Dapat mo na ngayong makatagpo ng isang fade-out na epekto tuwing mag-navigate ka mula sa FirstFragment hanggang SecondFragment.

Kung titingnan mo ang isa pang panel ng "Mga Katangian", makikita mo na ang "Enter" ay hindi lamang ang bahagi ng paglipat kung saan maaari kang mag-apply ng isang animation. Maaari ka ring pumili mula sa:

• Paglabas: Ang animation na gumaganap kapag ang isang fragment ay umaalis sa salansan
• Pop Enter: Ang animation na gumaganap kapag ang isang fragment ay populasyon sa tuktok ng salansan
• Paglabas ng Pop: Ang animation na gumaganap kapag ang isang fragment ay lumilipat sa ilalim ng salansan

Subukang mag-eksperimento sa pamamagitan ng paglalapat ng iba't ibang mga animation sa iba't ibang bahagi ng iyong mga paglilipat. Maaari mo ring i-download ang nakumpletong proyekto mula sa GitHub.

Pagputol

Sa artikulong ito, tiningnan namin kung paano mo magagamit ang bahagi ng Navigation Architecture upang lumikha ng isang solong-Aktibidad, application na maramihang-fragment, kumpleto sa mga pasadyang mga animation ng paglipat. Nakumbinsi ba ang bahagi ng Navigation na ilipat ang iyong mga proyekto sa ganitong uri ng istraktura ng aplikasyon? Ipaalam sa amin sa mga komento sa ibaba!