Sisu

• Mis on navigatsiooniarhitektuuri komponent?
• Navigeerimisredaktori lisamine Android Studio
• Projekti sõltuvused: navigeerimise fragment ja navigeerimisliides
• Hankige oma rakenduse navigeerimise kohta visuaalne ülevaade
• Navigeerimisgraafiku täitmine: sihtkohtade lisamine
• Fragmentide paigutuse värskendamine
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Sihtkohtade ühendamine toimingutega
• Navigeerimisgraafiku majutamine
• Üleminekute käivitamine NavControlleriga
• Täiendava navigeerimise lisamine
• Kohandatud üleminekuanimatsioonide loomine
• Pakkimine üles

2018. aasta I / O-konverentsi ajal kuulutas Google välja uue lähenemisviisi Androidi rakenduste arendamiseks.

Google'i ametlik soovitus on luua üks tegevus, mis on teie rakenduse peamine sisenemispunkt, ja edastada ülejäänud rakenduse sisu fragmentidena.

Ehkki mõte kõigi nende erinevate fragmenditehingute ja olelustsüklite žongleerimisele võib tunduda õudusunenäona, käivitas Google I / O 2018 ka navigatsiooniarhitektuurikomponendi, mille eesmärk on aidata teil sedalaadi üksikute tegevuste struktuuri kasutusele võtta.

Selles artiklis näitame teile, kuidas lisada oma projektile navigeerimise komponent ja kuidas saate selle abil kiiresti ja hõlpsalt luua ühetoimelise, mitme fragmendirakenduse, kasutades Android Studio uue navigeerimisredaktori vähest abi. Kui olete oma killud loonud ja ühendanud, parandame Androidi standardsete fragmentide üleminekuid, kasutades navigeerimise komponenti ja redigeerijat, et luua erinevaid täielikult kohandatavaid üleminekuanimatsioone.

Mis on navigatsiooniarhitektuuri komponent?

Android JetPacki osa, navigatsiooniarhitektuurikomponent aitab teil rakenduse kaudu erinevaid marsruute visualiseerida ja lihtsustab nende marsruutide rakendamist, eriti fragmentide tehingute haldamisel.

Navigeerimise komponendi kasutamiseks peate looma navigeerimisgraafiku, mis on XML-fail, mis kirjeldab, kuidas teie rakenduse tegevused ja killud üksteisega seostuvad.

Navigeerimisgraafik koosneb:

• Sihtkohad: Üksikud ekraanid, kuhu kasutaja saab navigeerida
• Tegevused: Marsruudid, mida kasutaja saab kasutada teie rakenduse sihtkohtade vahel

Oma projekti navigeerimisgraafiku visuaalset esitust saate vaadata Android Studio navigeerimisredaktoris. Altpoolt leiate navigatsioonigraafiku, mis koosneb kolmest sihtkohast ja kolmest toimingust, nagu see kuvatakse navigeerimisredaktoris.

Navigeerimise komponent on loodud selleks, et aidata teil rakendada Google'i uut soovitatud rakenduse ülesehitust, kus üks tegevus "majutab" navigeerimisgraafikut ja kõik teie sihtkohad rakendatakse fragmentidena. Selles artiklis järgime seda soovitatud lähenemisviisi ja loome rakenduse, mis koosneb MainActivity-st ja kolmest fragmendi sihtkohast.

Komponent Navigeerimine pole siiski ainult nende soovitatud ülesehitusega rakenduste jaoks. Projektil võib olla mitu navigeerimisgraafikut ja nendes navigeerimisgraafikutes saate sihtkohtadena kasutada fragmente ja tegevusi. Kui rändate suure, küpse projekti navigeerimise komponenti, on teil lihtsam oma rakenduse navigeerimisvooge rühmadesse jagada, kus iga rühm koosneb põhitegevusest, mõnedest seotud fragmentidest ja oma navigeerimisgraafikust.

Navigeerimisredaktori lisamine Android Studio

Navigeerimise komponendi parimate võimaluste kasutamiseks pakub Android Studio 3.2 Canary ja uuemad versioonid uut navigeerimisredaktorit.

Selle redigeerija lubamiseks:

• Valige Android Studio menüüribalt „Android Studio> Eelistused…“.
• Valige vasakpoolses menüüs „Eksperimentaalne”.
• Kui seda pole veel valitud, märkige ruut „Luba navigeerimisredaktor”.

• Klõpsake „OK“.
• Taaskäivitage Android Studio.

Projekti sõltuvused: navigeerimise fragment ja navigeerimisliides

Looge uus projekt valitud sätetega, seejärel avage selle fail build.gradle ja lisage projekti sõltuvustena navigeerimise fragment ja navigation-ui:

sõltuvused {rakendusfailTree (dir: libs, sisaldab:) juurutamine com.android.support:appcompat-v7:28.0.0 juurutamine com.android.support.constraint: piirangute paigutus: 1.1.3 // Lisage järgmine // teostus "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI annab juurdepääsu mõnele abistaja funktsioonile // rakendamine "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implement 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 }

Hankige oma rakenduse navigeerimise kohta visuaalne ülevaade

Navigeerimisgraafiku loomine:

• Klõpsake juhtnupul oma projekti kataloogil „res” ja valige „Uus> Androidi ressursikataloog”.
• Avage rippmenüü „Ressursi tüüp” ja valige “navigeerimine”.
• Valige „OK“.
• Klõpsake juhtnuppu oma uuel „res / navigeerimise” kataloogis ja valige „Uus> Navigeerimise ressursifail”.
• Avage rippmenüü „Ressursi tüüp” ja valige „Navigeerimine”.

• Andke sellele failinimi; Ma kasutan “nav_graph”.
• Klõpsake „OK“.

Avage fail „res / navigation / nav_graph” ja navigeerimisredaktor käivitub automaatselt. Sarnaselt paigutuse redigeerijaga jaguneb navigeerimisredaktor ka vahekaartideks „Kujundus” ja „Tekst”.

Kui valite vahekaardi „Tekst”, näete järgmist XML-i:

<? xml version = "1.0" encoding = "utf-8"?> // Navigeerimine ”on iga navigeerimisgraafiku juursõlm //

Vahekaardil Kujundus saate oma rakenduse navigeerimist visuaalselt luua ja redigeerida.

Vasakult paremale koosneb navigeerimisredaktor järgmistest osadest:

• Sihtkohtade loend: Selles loetletakse kõik sihtkohad, mis moodustavad selle konkreetse navigatsioonigraafiku, koos tegevusega, kus navigeerimisgraafik hostitakse.
• Graafiredaktor: Graafiredaktor annab visuaalse ülevaate kõigist graafi sihtkohtadest ja neid ühendavatest toimingutest.
• Atribuutide redaktor: Kui valite graafiredaktoris sihtkoha või toimingu, kuvatakse paneelil „Atribuudid” teave praegu valitud üksuse kohta.

Navigeerimisgraafiku täitmine: sihtkohtade lisamine

Meie navigeerimisgraafik on praegu tühi. Lisage mõned sihtkohad.

Saate lisada juba olemasolevaid tegevusi või fragmente, kuid uute fragmentide kiireks ja hõlpsaks loomiseks võite kasutada ka navigeerimisgraafikut:

• Klõpsake nuppu „Uus sihtkoht” ja valige „Loo tühi sihtkoht”.

• Sisestage väljale „Fragmendi nimi” oma fragmendi klassi nimi; Ma kasutan “FirstFragment”.
• Veenduge, et ruut „Loo paigutuse XML” oleks valitud.
• Täitke väli „Fragment Layout Name”; Ma kasutan “fragment_first”.
• Klõpsake nuppu Finish.

Nüüd lisatakse projektile FirstFragment alamklass ja vastav paigutuse ressursifail “fragment_first.xml”. FirstFragment kuvatakse navigatsioonigraafikus ka sihtkohana.

Kui valite navigeerimisredaktoris valiku FirstFragment, kuvatakse paneelil „Atribuudid” selle sihtkoha kohta teave, näiteks klassi nimi ja ID, mida kasutate sellele sihtkohale mujal koodis viitamiseks.

Loputage ja korrake, et projekti lisada SecondFragment ja ThirdFragment.

Lülitage vahekaardile Tekst ja näete, et XML-i on nende muudatuste kajastamiseks värskendatud.

Igal navigeerimisgraafikul on alguspunkt, mis on ekraan, mis kuvatakse siis, kui kasutaja teie rakenduse käivitab. Ülalolevas koodis kasutame rakenduse lähtesihtkohana FirstFragment. Kui lülitate vahekaardile Kujundus, märkate maja ikooni, mis tähistab ka graafiku alguse sihtkohana FirstFragment.

Kui eelistaksite kasutada mõnda muud lähtepunkti, siis valige kõnealune tegevus või fragment ja valige siis atribuutide paneelilt „Set Start Destination”.

Teise võimalusena saate selle muudatuse teha kooditasemel:

Fragmentide paigutuse värskendamine

Nüüd on meil sihtkohad, lisame mõned kasutajaliidese elemendid, nii et oleks alati selge, millist fragmenti me praegu vaatame.

Lisan igale fragmendile järgmise:

• Tekstivaade, mis sisaldab fragmendi pealkirja
• Nupp, mis võimaldab kasutajal navigeerida ühelt fragmendilt teisele

Siin on iga paigutuse ressursifaili kood:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Sihtkohtade ühendamine toimingutega

Järgmine samm on meie sihtkohtade linkimine toimingute kaudu.

Toimingu saate navigeerimisredaktoris luua lihtsa lohistamise abil:

• Veenduge, et redigeerija vahekaart „Kujundus” oleks valitud.
• Hõljutage kursorit sihtkoha paremal küljel, milles soovite navigeerida alates, mis antud juhul on FirstFragment. Ilmuma peaks ring.
• Klõpsake ja lohistage kursorit sihtkohta, kus soovite navigeerida kuni, mis on SecondFragment. Ilmuma peaks sinine joon. Kui SecondFragment on siniseks tõstetud, vabastage kursor, et luua link nende sihtkohtade vahel.

Nüüd peaks olema toimingu nool, mis ühendab FirstFragment'i SecondFragment'iga. Selle noole valimiseks klõpsake nuppu ja atribuutide atribuuti värskendatakse, et kuvada selle toimingu kohta teavet, sealhulgas selle süsteemile määratud ID.

See muutus kajastub ka navigatsioonigraafiku XML-is:

… … …

Loputage ja korrake, et luua toiming, mis seob SecondFragment'i kolmandaFragmentiga, ja toimingu, mis seob kolmandafragmendi FirstFragment'iga.

Navigeerimisgraafiku majutamine

Navigeerimisgraafik pakub teie rakenduse sihtkohtade ja toimingute visuaalset esitust, kuid nende toimingute kutsumiseks on vaja mõnda lisakoodi.

Kui olete navigeerimisgraafiku loonud, peate selle majutama tegevuses, lisades selle tegevuse paigutusfaili NavHostFragment. See NavHostFragment pakub konteinerit, kus navigeerimine võib aset leida, ning vastutab ka fragmentide vahetamise ja sisse-välja vahetamise eest, kui kasutaja teie rakenduses navigeerib.

Avage projekti fail „activity_main.xml” ja lisage NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Looge fragment, mis toimib NavHostFragmentina //

Ülaltoodud koodis võimaldab rakendus: defaultNavHost = ”tõene” navigeerimismasinal pealtkuulamist alati, kui süsteemi nuppu “Tagasi” vajutatakse, seega täidab rakendus alati teie navigeerimisgraafikus kirjeldatud navigeerimist.

Üleminekute käivitamine NavControlleriga

Järgmisena peame rakendama NavControlleri, mis on uus komponent, mis vastutab NavHostFragmentis navigeerimisprotsessi juhtimise eest.

Uuele ekraanile navigeerimiseks peate leidma NavControlleri rakenduse Navigation.findNavController abil, helistama navigeerimise () meetodile ja andma edasi kas teie sihtkoha ID, kuhu navigeerite, või toiming, millele soovite tähelepanu pöörata. Näiteks kutsun üles “action_firstFragment_to_secondFragment”, mis viib kasutaja FirstFragmentist SecondFragment'i:

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

Kasutaja kolib nupule klõpsates uuele ekraanile, seega peame rakendama ka OnClickListeneri.

Pärast nende muudatuste tegemist peaks FirstFragment välja nägema umbes selline:

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; avaliku klassi FirstFragment laiendab fragmendi {public FirstFragment () {} @Orreide public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Anna avaliku vaate onCreateView'l (LayoutInflater inflater, ViewGroup konteiner, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Välistage avaliku tühisuse onViewCreated (@NonNull View vaade, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (uus vaade.OnClickListener () {@Oreride public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.idid) }}); }}

Järgmisena avage oma MainActivity ja lisage järgmine:

• NavigationView.OnNavigationItemSelectedListener: Kuulaja navigatsiooniüksustel toimuvate sündmuste käsitlemiseks
• SecondFragment.OnFragmentInteractionListener: Liides, mis loodi, kui lõite navigeerimisredaktori kaudu SecondFragment

MainActivity peab rakendama ka meetodit onFragmentInteraction (), mis võimaldab sidet fragmendi ja tegevuse vahel.

impordi android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.net.Uri; import android.view.MenuItem; impordi android.support.design.widget.NavigationView; import android.support.annotation.NonNull; Avaliku klassi MainActivity laiendab AppCompatActivity rakendusi NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Operride suojatud tühine onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Abreerige avalik boolean onNavigationItemSelected (üksus @NonNull MenuItem) {return false; } @Kulutage avaliku tühisuse onFragmentInteraction (Uri uri) {}}

Täiendava navigeerimise lisamine

Rakenduse ülejäänud navigeerimise rakendamiseks peame lihtsalt onViewCreated-ploki kopeerima / kleepima ja tegema mõned näpunäited, et viidaksime õigete nupuvidinate ja navigeerimise toimingutele.

Avage oma SecondFragment ja lisage järgmine teave:

@Välistage avaliku void onViewCreated (@NonNull View vaade, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (uus View.OnClickListener () {@Orride public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.Firection; R.id }}); }

Seejärel värskendage ThirdFragment'i onViewCreated-plokki:

@Välistage avaliku tühisuse onViewCreated (@NonNull View vaade, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (uus vaade.OnClickListener () {@Oreride public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.idid) }}); }

Lõpuks ärge unustage lisada oma põhiaktiivsusse ka liidet ThirdFragment.OnFragmentInteractionListener:

Avaliku klassi MainActivity laiendab AppCompatActivity rakendusi NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Käivitage see projekt oma Android-seadmes või Androidi virtuaalseadmes (AVD) ja testige navigeerimist. Kõigi kolme fragmendi vahel peaksite saama navigeerida, klõpsates eri nuppe.

Kohandatud üleminekuanimatsioonide loomine

Sel hetkel saab kasutaja teie rakenduses ringi liikuda, kuid üleminek iga fragmendi vahel on üsna järsk. Selles viimases osas kasutame navigeerimise komponenti, et lisada igale üleminekule erinev animatsioon, nii et need toimuvad sujuvamalt.

Iga animatsioon, mida soovite kasutada, tuleb määratleda selle animatsiooni ressursifailis, res / anim kataloogis. Kui teie projekt ei sisalda juba kataloogi „res / anim”, peate selle looma:

• Klõpsake juhtnupul projekti kaustal „res” ja valige „Uus> Androidi ressursikataloog”.
• Pange sellele kataloogile nimi “anim”.
• Avage rippmenüü „Ressursi tüüp” ja valige „anim”.
• Klõpsake „OK“.

Alustame hämmingu animatsiooni määratlemisega:

• Klõpsake juhtnuppu oma projekti kataloogil res / anim.
• Valige „Uus> Animatsiooni ressursifail”.
• Andke sellele failile nimi “fade_out”.
• Avage oma fail „fade_out“ ja lisage järgmine teave:

Korrake ülaltoodud samme, et luua teine ​​animatsiooniressursi fail nimega „slide_out_left”, seejärel lisage järgmine teave:

Looge kolmas fail nimega „slide_out_right” ja lisage järgmine teave:

Nüüd saate neid animatsioone oma toimingutele navigeerimisredaktori kaudu määrata.Fade-out animatsiooni esitamiseks iga kord, kui kasutaja navigeerib FirstFragmentist SecondFragment'i:

• Avage navigeerimisgraafik ja veenduge, et valitud oleks vahekaart „Kujundus“.
• Klõpsake toimingu valimiseks, mis seob FirstFragment'i SecondFragment'iga.
• Klõpsake paneelil „Atribuudid” jaotise „Üleminekud” laiendamiseks. Vaikimisi peaks selle jaotise iga rippmenüü olema väärtusel Puudub.
• Avage rippmenüü „Enter”, mis juhib animatsiooni, mida mängitakse alati, kui SecondFragment liigub tagumise virna ülaossa. Valige animatsioon „fade_out”.

Kui vahetate vahekaardi „Kujundus”, näete, et see animatsioon on lisatud jaotisesse „action_firstFragment_to_secondFragment”.

Käivitage värskendatud projekt oma Android-seadmes või AVD-s. Nüüd, kui navigeerite FirstFragmentist SecondFragment, peaksite nüüd tekkima hävimisefekt.

Kui vaatate atribuute paneeli veel üks kord, näete, et sisestus pole ainult ülemineku osa, kus saate animatsiooni rakendada. Võite valida ka järgmiste hulgast:

• Välju: Animatsioon, mis esitatakse siis, kui fragment virnast lahkub
• Hüpiknupp: Animatsioon, mis esitatakse siis, kui fragment virnab ülaosas
• Popiväljapääs: Animatsioon, mis esitatakse siis, kui fragment läheb üle virna põhja

Proovige katsetada, rakendades üleminekute eri osadele erinevaid animatsioone. Valmis projekti saate alla laadida ka GitHubist.

Pakkimine üles

Selles artiklis vaatasime, kuidas saate navigeerimisarhitektuuri komponenti kasutada ühetoimelise, mitme fragmendiga rakenduse loomiseks koos kohandatud üleminekuanimatsioonidega. Kas navigeerimise komponent on veennud teid oma projektid üle viima sellisele rakenduse struktuurile? Andke meile allolevates kommentaarides teada!