Saturs

• Kas ir navigācijas arhitektūras komponents?
• Navigācijas redaktora pievienošana Android Studio
• Projekta atkarības: Navigācijas fragments un Navigācijas lietotāja saskarne
• Saņemiet vizuālu pārskatu par savas lietotnes navigāciju
• Navigācijas diagrammas aizpildīšana: Galamērķu pievienošana
• Notiek fragmentu izkārtojuma atjaunināšana
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Galamērķu savienošana ar darbībām
• Navigācijas grafika mitināšana
• Pāreju aktivizēšana, izmantojot NavController
• Papildinot navigāciju
• Pielāgotu pārejas animāciju izveidošana
• Iesaiņošana

2018. gada I / O konferences laikā Google paziņoja par jaunu pieeju Android lietotņu izstrādei.

Google oficiālais ieteikums ir izveidot vienu darbību, kas kalpo par jūsu lietotnes galveno ieejas punktu, un pēc tam pārējo jūsu lietojumprogrammas saturu piegādāt kā fragmentus.

Kaut arī doma par visu šo dažādo fragmentu darījumu un dzīves ciklu žonglēšanu varētu izklausīties kā murgs, I / O 2018 Google arī uzsāka navigācijas arhitektūras komponentu, kas ir paredzēts, lai palīdzētu jums pieņemt šāda veida atsevišķu darbību struktūru.

Šajā rakstā mēs parādīsim, kā savam projektam pievienot navigācijas komponentu un kā jūs to varat izmantot, lai ar nelielu palīdzību no Android Studio jaunā navigācijas redaktora ātri un ērti izveidotu vienas darbības, vairāku fragmentu lietojumprogrammu. Kad būsit izveidojis un savienojis savus fragmentus, mēs uzlabosim Android standarta fragmentu pārejas, izmantojot navigācijas komponentu un redaktoru, lai izveidotu pilnībā pielāgojamu pārejas animāciju klāstu.

Kas ir navigācijas arhitektūras komponents?

Daļa no Android JetPack, navigācijas arhitektūras komponents palīdz vizualizēt dažādus maršrutus, izmantojot jūsu lietojumprogrammu, un vienkāršo šo maršrutu ieviešanas procesu, jo īpaši, ja tas attiecas uz fragmentu darījumu pārvaldību.

Lai izmantotu navigācijas komponentu, jums būs jāizveido navigācijas diagramma, kas ir XML fails, kas apraksta to, kā jūsu lietotnes darbības un fragmenti ir savstarpēji saistīti.

Navigācijas grafiks sastāv no:

• Galamērķi: Atsevišķie ekrāni, uz kuriem lietotājs var orientēties
• Darbības: Maršruti, kurus lietotājs var izvēlēties starp jūsu lietotnes mērķiem

Android Studio navigācijas redaktorā varat apskatīt sava projekta navigācijas grafika attēlojumu. Zemāk atradīsit navigācijas grafiku, kas sastāv no trim adresātiem un trim darbībām, kā tas ir redzams navigācijas redaktorā.

Navigācijas komponents ir paredzēts, lai palīdzētu ieviest Google jauno ieteikto lietotņu struktūru, kurā viena darbība “mitina” navigācijas grafiku un visi jūsu galamērķi tiek ieviesti kā fragmenti. Šajā rakstā mēs ievērosim šo ieteikto pieeju un izveidosim lietojumprogrammu, kas sastāv no MainActivity un trīs fragmentu adresātiem.

Tomēr navigācijas komponents nav paredzēts tikai tām lietojumprogrammām, kurām ir šī ieteicamā struktūra. Projektam var būt vairāki navigācijas grafiki, un šajos navigācijas grafikos kā mērķus varat izmantot fragmentus un aktivitātes. Ja jūs migrējat lielu, nobriedušu projektu uz navigācijas komponentu, iespējams, jums būs vieglāk sadalīt lietotnes navigācijas plūsmas grupās, kur katra grupa sastāv no “galvenās” aktivitātes, dažiem saistītiem fragmentiem un sava navigācijas grafika.

Navigācijas redaktora pievienošana Android Studio

Lai palīdzētu gūt maksimālu labumu no navigācijas komponenta, Android Studio 3.2 Canary un jaunākās versijās ir jauns navigācijas redaktors.

Lai iespējotu šo redaktoru:

• Android Studio izvēlnes joslā atlasiet “Android Studio> Preferences…”.
• Kreisās puses izvēlnē izvēlieties “Experimental”.
• Ja tas vēl nav atlasīts, atzīmējiet izvēles rūtiņu “Iespējot navigācijas redaktoru”.

• Noklikšķiniet uz “Labi”.
• Restartējiet Android Studio.

Projekta atkarības: Navigācijas fragments un Navigācijas lietotāja saskarne

Izveidojiet jaunu projektu ar izvēlētajiem iestatījumiem, pēc tam atveriet tā failu build.gradle un kā projekta atkarības pievienojiet navigācijas fragmentu un navigācijas ui:

atkarības {ieviešanas failsTrijs (rež. libs, iekļaujiet:) ieviešana com.android.support:appcompat-v7:28.0.0 ieviešana com.android.support.constraint: ierobežojums-izkārtojums: 1.1.3 // Pievienot šādu // ieviešana "android.arch.navigation: navigācijas fragments: 1.0.0-alpha05" // Navigation-UI nodrošina piekļuvi dažām palīgu funkcijām // ieviešana "android.arch.navigation: navigation-ui: 1.0.0-alpha05" ieviešanas 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 }

Saņemiet vizuālu pārskatu par savas lietotnes navigāciju

Lai izveidotu navigācijas grafiku:

• Ar vadības taustiņu noklikšķiniet uz projekta direktorija “res” un atlasiet “Jauns> Android resursu direktorijs”.
• Atveriet nolaižamo izvēlni “Resursa tips” un izvēlieties “navigācija”.
• Atlasiet “Labi”.
• Ar vadības taustiņu noklikšķiniet uz jaunā direktorija “Res / navigācija” un atlasiet “Jauns> Navigācijas resursa fails”.
• Atveriet nolaižamo izvēlni “Resursa tips” un atlasiet “Navigācija”.

• Piešķiriet faila nosaukumu; Es izmantoju “nav_graph”.
• Noklikšķiniet uz “Labi”.

Atveriet failu “res / navigācija / nav_graph”, un automātiski tiks atvērts navigācijas redaktors. Līdzīgi kā izkārtojuma redaktors, arī navigācijas redaktors ir sadalīts cilnēs “Dizains” un “Teksts”.

Ja atlasīsit cilni “Teksts”, tiks parādīts šāds XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigācija ”ir katra navigācijas grafika saknes mezgls //

Cilnē Dizains varat izveidot un rediģēt lietotnes navigāciju.

No kreisās puses uz labo navigācijas redaktoru veido:

• Galamērķu saraksts: Tajā ir uzskaitīti visi galamērķi, kas veido šo konkrēto navigācijas diagrammu, kā arī darbība, kurā tiek mitināts navigācijas grafiks.
• Grafiku redaktors: Diagrammas redaktors sniedz vizuālu pārskatu par visiem diagrammas adresātiem un darbībām, kas tos savieno.
• Atribūtu redaktors: Ja grafika redaktorā izvēlaties mērķi vai darbību, panelī “Atribūti” tiks parādīta informācija par pašlaik atlasīto vienumu.

Navigācijas diagrammas aizpildīšana: Galamērķu pievienošana

Mūsu navigācijas diagramma pašlaik ir tukša. Pievienosim dažus galamērķus.

Varat pievienot aktivitātes vai fragmentus, kas jau pastāv, taču varat arī izmantot navigācijas diagrammu, lai ātri un ērti izveidotu jaunus fragmentus:

• Noklikšķiniet uz pogas “Jauns mērķis” un atlasiet “Izveidot tukšu mērķi”.

• Laukā “Fragment Name” ievadiet sava fragmenta klases nosaukumu; Es izmantoju “FirstFragment”.
• Pārliecinieties, ka ir atzīmēta izvēles rūtiņa “Izveidot XML”.
• Aizpildiet lauku “Fragment Layout Name”; Es izmantoju “fragment_first”.
• Noklikšķiniet uz Pabeigt.

Tagad jūsu projektam tiks pievienota FirstFragment apakšklase un atbilstošais “fragment_first.xml” izkārtojuma resursa fails. FirstFragment arī tiks parādīts kā galamērķis navigācijas grafikā.

Ja navigācijas redaktorā izvēlaties FirstFragment, panelī “Atribūti” tiks parādīta kāda informācija par šo galamērķi, piemēram, tā klases nosaukums un ID, kuru izmantosit, lai norādītu uz šo galamērķi citur kodā.

Noskalojiet un atkārtojiet, lai savam projektam pievienotu SecondFragment un ThirdFragment.

Pārslēdzieties uz cilni Teksts un redzēsit, ka XML ir atjaunināts, lai atspoguļotu šīs izmaiņas.

Katram navigācijas grafikam ir sākuma mērķis, tas ir, ekrāns, kas tiek parādīts, kad lietotājs palaiž jūsu lietotni. Iepriekš minētajā kodā mēs izmantojam FirstFragment kā mūsu lietotnes sākuma galamērķi. Ja pārslēgsities uz cilni “Dizains”, jūs pamanīsit mājas ikonu, kas arī norāda grafiku kā sākuma punktu FirstFragment.

Ja vēlaties izmantot citu sākumpunktu, atlasiet attiecīgo darbību vai fragmentu un panelī “Atribūti” atlasiet “Iestatīt sākuma mērķi”.

Varat arī veikt šīs izmaiņas koda līmenī:

Notiek fragmentu izkārtojuma atjaunināšana

Tagad mums ir savi mērķi, pievienosim dažus lietotāja interfeisa elementus, lai vienmēr būtu skaidrs, kuru fragmentu mēs šobrīd skatāmies.

Es katram fragmentam pievienošu šo:

• TextView, kurā ir fragmenta nosaukums
• Poga, kas lietotājam ļaus pārvietoties no viena fragmenta uz nākamo

Šis ir katra izkārtojuma resursa faila kods:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Galamērķu savienošana ar darbībām

Nākamais solis ir mūsu mērķu sasaiste, izmantojot darbības.

Darbību navigācijas redaktorā var izveidot, izmantojot vienkāršu vilkšanu un nomešanu:

• Pārliecinieties, ka ir atlasīta redaktora cilne “Dizains”.
• Virziet kursoru virs mērķa labās puses, kurā vēlaties pārvietoties no plkst, kas šajā gadījumā ir FirstFragment. Jāparādās lokam.
• Noklikšķiniet un velciet kursoru uz mērķi, kurā vēlaties pārvietoties uz, kas ir SecondFragment. Parādās zila līnija. Kad SecondFragment ir iezīmēts zilā krāsā, atlaidiet kursoru, lai izveidotu saikni starp šiem adresātiem.

Tagad vajadzētu būt darbības bultiņai, kas savieno FirstFragment ar SecondFragment. Noklikšķiniet, lai atlasītu šo bultiņu, un panelis “Atribūts” tiks atjaunināts, lai parādītu informāciju par šo darbību, ieskaitot tās sistēmai piešķirto ID.

Šīs izmaiņas ir atspoguļotas arī navigācijas grafika XML:

… … …

Noskalojiet un atkārtojiet, lai izveidotu darbību, kas saista SecondFragment ar ThirdFragment, un darbību, kas saista ThirdFragment ar FirstFragment.

Navigācijas grafika mitināšana

Navigācijas diagramma nodrošina vizuālu jūsu lietotnes mērķu un darbību attēlojumu, taču, lai izsauktu šīs darbības, ir nepieciešams kāds papildu kods.

Kad esat izveidojis navigācijas diagrammu, jums tas ir jāatrodas aktivitātes iekšienē, šīs aktivitātes izkārtojuma failam pievienojot NavHostFragment. Šis NavHostFragment nodrošina konteineru, kurā var notikt navigācija, un būs atbildīgs arī par fragmentu apmaiņu un pārvietošanos, lietotājam pārvietojoties pa jūsu lietotni.

Atveriet projekta failu “activity_main.xml” un pievienojiet NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Izveidojiet fragmentu, kas darbosies kā NavHostFragment //

Iepriekšminētajā kodā lietotne: defaultNavHost = “true” ļauj navigācijas resursdatoram pārtvert katru reizi, kad tiek nospiesta sistēmas poga “Atpakaļ”, tāpēc lietotne vienmēr ievēro navigāciju, kas aprakstīta jūsu navigācijas diagrammā.

Pāreju aktivizēšana, izmantojot NavController

Tālāk mums jāievieš NavController, kas ir jauns komponents, kurš ir atbildīgs par navigācijas procesa vadību NavHostFragment.

Lai pārietu uz jaunu ekrānu, jums jāielādē NavController, izmantojot Navigation.findNavController, piezvaniet navigate () metodei, pēc tam nododiet vai nu tā mērķa ID, uz kuru dodaties, vai darbību, kuru vēlaties izsaukt. Piemēram, es atsaucos uz “action_firstFragment_to_secondFragment”, kas lietotāju pārvedīs no FirstFragment uz SecondFragment:

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

Lietotājs pārcelsies uz jaunu ekrānu, noklikšķinot uz pogas, tāpēc mums jāievieš arī OnClickListener.

Pēc šo izmaiņu veikšanas FirstFragment vajadzētu izskatīties apmēram šādi:

importa android.os.Bundle; importēt android.support.annotation.NonNull; importēt android.support.annotation.Nullable; importēt android.support.v4.app.Fragment; importa android.view.LayoutInflater; importa android.view.View; importa android.view.ViewGroup; importēt android.widget.Button; importa androidx.navigation.NavController; importa androidx.navigation.Navigācija; publiskās klases FirstFragment paplašina fragmentu {public FirstFragment () {} @Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Orride public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (@NonNull View skats, @Nullable Bundle savedInstanceState) {Pogas poga = (Button) view.findViewById (R.id.button); button.setOnClickListener (jauns View.OnClickListener () {@Orride public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.idid) }}); }}

Pēc tam atveriet MainActivity un pievienojiet šo:

• NavigationView.OnNavigationItemSelectedListener: Klausītājs notikumu apstrādei ar navigācijas elementiem
• SecondFragment.OnFragmentInteractionListener: Saskarne, kas tika izveidota, kad, izmantojot navigācijas redaktoru, izveidojāt SecondFragment

MainActivity arī jāīsteno onFragmentInteraction () metode, kas ļauj sazināties starp fragmentu un darbību.

importēt android.support.v7.app.AppCompatActivity; importa android.os.Bundle; importēt android.net.Uri; importa android.view.MenuItem; importēt android.support.design.widget.NavigationView; importēt android.support.annotation.NonNull; Sabiedriskās klases MainActivity paplašina AppCompatActivity ieviešanu NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Orride aizsargāts void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Orride publiskā Būla onNavigationItemSelected (vienums @NonNull MenuItem) {return false; } @Atvērt publisko anulēšanu vietnēFragmentInteraction (Uri uri) {}}

Papildinot navigāciju

Lai ieviestu pārējo mūsu lietotnes navigāciju, mums vienkārši ir jākopē / jāielīmē onViewCreated bloks un jāveic daži pielāgojumi, lai mēs atsauktos uz pareizajiem pogu logrīkiem un navigācijas darbībām.

Atveriet savu SecondFragment un pievienojiet šo:

@Override public void onViewCreated (@NonNull View skats, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (jauns View.OnClickListener () {@Orride public void onClick (View v) {NavController navController = Navigācija.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.Firection_navigate (R.id. }}); }

Pēc tam atjauniniet trešā fragmenta onViewCreated bloku:

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

Visbeidzot, neaizmirstiet savam MainActivity pievienot interfeisu ThirdFragment.OnFragmentInteractionListener.

Sabiedriskās klases MainActivity paplašina AppCompatActivity ieviešanu NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Palaidiet šo projektu savā Android ierīcē vai Android virtuālajā ierīcē (AVD) un pārbaudiet navigāciju. Jums vajadzētu spēt pārvietoties starp visiem trim fragmentiem, noklikšķinot uz dažādām pogām.

Pielāgotu pārejas animāciju izveidošana

Šajā brīdī lietotājs var pārvietoties pa jūsu lietotni, taču pāreja starp katru fragmentu ir diezgan pēkšņa. Šajā pēdējā sadaļā mēs izmantosim navigācijas komponentu, lai katrai pārejai pievienotu atšķirīgu animāciju, lai tās notiktu vienmērīgāk.

Katra animācija, kuru vēlaties izmantot, jādefinē savā animācijas resursa failā direktorijā “res / anim”. Ja jūsu projektā vēl nav direktorija “res / anim”, jums tas jāizveido:

• Ar vadības taustiņu noklikšķiniet uz projekta mapes “res” un atlasiet “Jauns> Android resursu direktorijs”.
• Piešķiriet šai direktorijai vārdu “anim”.
• Atveriet nolaižamo izvēlni “Resursa tips” un izvēlieties “anim”.
• Noklikšķiniet uz “Labi”.

Sāksim ar izzušanas animācijas noteikšanu:

• Ar vadības taustiņu noklikšķiniet uz projekta direktorija “res / anim”.
• Atlasiet “Jauns> Animācijas resursa fails”.
• Piešķiriet šim failam vārdu “fade_out”.
• Atveriet failu “fade_out” un pievienojiet šo tekstu:

Atkārtojiet iepriekš minētās darbības, lai izveidotu otru animācijas resursa failu ar nosaukumu “slide_out_left”, pēc tam pievienojiet:

Izveidojiet trešo failu ar nosaukumu “slide_out_right” un pievienojiet šo:

Tagad šīs animācijas var piešķirt savām darbībām, izmantojot navigācijas redaktoru.Lai atskaņotu izbalēšanas animāciju, kad lietotājs pāriet no FirstFragment uz SecondFragment:

• Atveriet navigācijas grafiku un pārliecinieties, ka ir atlasīta cilne “Dizains”.
• Noklikšķiniet, lai atlasītu darbību, kas saista FirstFragment ar SecondFragment.
• Panelī “Atribūti” noklikšķiniet, lai izvērstu sadaļu “Pārejas”. Pēc noklusējuma katram šīs sadaļas nolaižamajam iestatījumam jābūt “Nav”.
• Atveriet nolaižamo izvēlni “Enter”, kas kontrolē animāciju, kas tiek atskaņota, kad SecondFragment pāriet uz aizmugurējās kaudzes augšdaļu. Atlasiet animāciju “fade_out”.

Ja pārslēgsities uz cilni “Dizains”, redzēsit, ka šī animācija ir pievienota “action_firstFragment_to_secondFragment”.

Palaidiet atjaunināto projektu savā Android ierīcē vai AVD. Tagad, pārejot no FirstFragment uz SecondFragment, jums vajadzētu saskarties ar izzušanas efektu.

Apskatot paneli “Atribūti” vēlreiz, redzēsit, ka “Enter” nav vienīgā pārejas daļa, kurā varat lietot animāciju. Jūs varat arī izvēlēties no:

• Izeja: Animācija, kas tiek atskaņota, kad fragments atstāj kaudzīti
• Pop Ievadiet: Animācija, kas tiek atskaņota, kad fragments aizvieto kaudzes augšdaļu
• Pop izeja: Animācija, kas tiek atskaņota, kad fragments pāriet uz kaudze apakšā

Mēģiniet eksperimentēt, dažādām pārejām piemērojot dažādas animācijas. Jūs varat arī lejupielādēt pabeigto projektu no GitHub.

Iesaiņošana

Šajā rakstā mēs apskatījām, kā jūs varat izmantot navigācijas arhitektūras komponentu, lai izveidotu vienas darbības, vairāku fragmentu lietojumprogrammu, kas papildināta ar pielāgotajām pārejas animācijām. Vai navigācijas komponents ir pārliecinājis jūs migrēt savus projektus uz šāda veida lietojumprogrammu struktūru? Paziņojiet mums komentāros zemāk!