Problemfri fragment: Använda Android: s navigationsarkitekturkomponent

Innehåll

Vad är navigationsarkitekturkomponenten?
Lägga till navigationsredigeraren i Android Studio
Projektberoende: Navigation Fragment and Navigation UI
Få en visuell översikt över din apps navigering
Fylla på navigationsgrafen: Lägga till destinationer
Uppdatera dina fragmentlayouter
Fragment_first.xml
Fragment_second.xml
Fragment_third.xml
Ansluta dina destinationer med handlingar
Värd för navigationsgrafen
Aktivera övergångar med NavController
Lägger till mer navigering
Skapa anpassade övergångsanimationer
Avslutar

Under 2018 I / O-konferens tillkännagav Google ett nytt tillvägagångssätt för att utveckla Android-appar.

Googles officiella rekommendation är att skapa en enda aktivitet som fungerar som din apps huvudinmatningsplats och sedan leverera resten av applikationens innehåll som fragment.

Medan tanken på att jonglera med alla dessa olika fragmenttransaktioner och livscykler kan låta som en mardröm, lanserade Google också på I / O 2018 Navigation Architecture Component som är utformad för att hjälpa dig att anta den här typen av enskild aktivitetsstruktur.

I den här artikeln kommer vi att visa dig hur du lägger till navigeringskomponenten till ditt projekt och hur du kan använda den för att snabbt och enkelt skapa en enda-aktivitet, flera fragment, med lite hjälp från Android Studios nya Navigationsredigerare. När du har skapat och anslutit dina fragment förbättrar vi Android: s standardfragment med standardfragment genom att använda Navigeringskomponenten och Editor för att skapa en rad helt anpassningsbara övergångsanimationer.

Vad är navigationsarkitekturkomponenten?

En del av Android JetPack, Navigation Architecture Component hjälper dig att visualisera de olika rutten genom din applikation och förenklar processen för att implementera dessa rutter, särskilt när det gäller att hantera fragmenttransaktioner.

För att använda navigeringskomponenten måste du skapa en navigationsgraf, som är en XML-fil som beskriver hur din apps aktiviteter och fragment relaterar till varandra.

En navigationsgraf består av:

destinationer: De individuella skärmarna som användaren kan navigera till
Insatser: De rutter som användaren kan ta mellan din apps destinationer

Du kan se en visuell representation av ditt projekt Navigationsgraf i Android Studios navigationsredigerare. Nedan hittar du en navigationsgraf som består av tre destinationer och tre åtgärder som den visas i navigationsredigeraren.

Navigeringskomponenten är utformad för att hjälpa dig implementera Googles nya rekommenderade appstruktur, där en enda aktivitet "värdar" navigationsgrafen och alla dina destinationer implementeras som fragment. I den här artikeln kommer vi att följa den rekommenderade strategin och skapa en applikation som består av en MainActivity och tre fragmentmål.

Navigeringskomponenten är dock inte bara för applikationer som har den rekommenderade strukturen. Ett projekt kan ha flera navigeringsgrafer och du kan använda fragment och aktiviteter som destinationer inom dessa navigationsgrafer. Om du migrerar ett stort, moget projekt till navigeringskomponenten, kan det vara lättare att separera appens navigationsflöden i grupper, där varje grupp består av en "huvud" -aktivitet, några relaterade fragment och en egen navigationsgraf.

Lägga till navigationsredigeraren i Android Studio

För att hjälpa dig få ut mesta möjliga av navigeringskomponenten har Android Studio 3.2 Canary och högre en ny navigationsredigerare.

För att aktivera den här redigeraren:

Välj "Android Studio> Inställningar ..." i menyraden för Android Studio.
I menyn till vänster väljer du "Experimental".
Om den inte redan är markerad markerar du kryssrutan "Aktivera navigationsredigerare".

Klicka på "OK."
Starta om Android Studio.

Projektberoende: Navigation Fragment and Navigation UI

Skapa ett nytt projekt med inställningarna du väljer, öppna sedan build.gradle-filen och lägg till navigationsfragment och navigations-ui som projektberoende:

beroenden {implementeringsfilTree (dir: libs, inkludera:) implementering com.android.support:appcompat-v7:28.0.0 implementering com.android.support.constraint: constraint-layout: 1.1.3 // Lägg till följande // implementering "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI ger åtkomst till vissa hjälpfunktioner // implementering "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementering 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 }

Få en visuell översikt över din apps navigering

Så här skapar du en navigationsgraf:

Kontrollera-klicka på projektets "res" -katalog och välj "New> Android Resource Directory."
Öppna rullgardinsmenyn "Resurstyp" och välj "navigering."
Välj "OK."
Kontrollklicka på din nya "res / navigation" -katalog och välj "New> Navigation resource file."
Öppna rullgardinsmenyn "Resurstyp" och välj "Navigering."

Ge detta filnamn; Jag använder "nav_graph."
Klicka på "OK."

Öppna din "res / navigation / nav_graph" -fil så kommer Navigationsredigeraren att starta automatiskt. I likhet med layoutredigeraren delas Navigationsredigeraren upp i flikarna "Design" och "Text".

Om du väljer fliken "Text" ser du följande XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation 'är rotnoden för varje navigationsgraf //

Fliken "Design" är där du kan bygga och redigera din apps navigering visuellt.

Från vänster till höger består Navigationsredigeraren av:

En destinationslista: Här listas alla destinationer som utgör denna navigationsgraf, plus aktiviteten där navigeringsgrafen är värd.
Grafredigeraren: Grafredigeraren ger en visuell översikt över alla grafens destinationer och de åtgärder som ansluter dem.
Attribut Editor: Om du väljer en destination eller en åtgärd i Graph Editor, kommer "Attribut" -panelen att visa information om det för närvarande valda objektet.

Fylla på navigationsgrafen: Lägga till destinationer

Vår navigationsgraf är för närvarande tom. Låt oss lägga till några destinationer.

Du kan lägga till aktiviteter eller fragment som redan finns, men du kan också använda navigationsgrafen för att snabbt och enkelt skapa nya fragment:

Ge knappen "Ny destination" ett klick och välj "Skapa tom destination."

I fältet "Fragmentnamn" anger du ditt fragments klassnamn; Jag använder "FirstFragment."
Se till att kryssrutan "Skapa layout XML" är markerad.
Fyll i fältet "Fragment Layout Name"; Jag använder "fragment_first."
Klicka på "Slutför."

En FirstFragment-underklass och motsvarande "fragment_first.xml" layoutresursfil kommer nu att läggas till ditt projekt. FirstFragment visas också som en destination i navigationsgrafen.

Om du väljer FirstFragment i Navigationsredigeraren, kommer "Attribut" -panelen att visa viss information om den här destinationen, t.ex. dess klassnamn och ID som du använder för att referera till denna destination någon annanstans i din kod.

Skölj och upprepa för att lägga till ett SecondFragment och ThirdFragment till ditt projekt.

Byt till fliken "Text" så ser du att XML har uppdaterats för att återspegla dessa förändringar.

Varje navigationsgraf har en startdestination, som är den skärm som visas när användaren startar din app. I koden ovan använder vi FirstFragment som vår apps startdestination. Om du byter till fliken "Design" kommer du att märka en husikon, som också markerar FirstFragment som grafens startdestination.

Om du föredrar att använda en annan utgångspunkt väljer du aktiviteten eller fragmentet i fråga och väljer sedan "Ställ in startdestination" på panelen "Attribut".

Alternativt kan du göra denna ändring på kodnivå:

Uppdatera dina fragmentlayouter

Nu har vi våra destinationer, låt oss lägga till några användargränssnittselement så att det alltid är klart vilket fragment vi för närvarande tittar på.

Jag kommer att lägga till följande till varje fragment:

En TextView som innehåller fragmentets titel
En knapp som låter användaren navigera från ett fragment till det nästa

Här är koden för varje layoutresursfil:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Ansluta dina destinationer med handlingar

Nästa steg är att länka våra destinationer via åtgärder.

Du kan skapa en åtgärd i Navigationsredigeraren med enkel dra och släpp:

Se till att redigerarens flik "Design" är vald.
Håll muspekaren över höger sida av destinationen som du vill navigera från, som i detta fall är FirstFragment. En cirkel bör visas.
Klicka och dra markören till den destination du vill navigera till, vilket är SecondFragment. En blå linje bör visas. När SecondFragment markeras blått släpper du markören för att skapa en länk mellan dessa destinationer.

Det bör nu finnas en åtgärdspil som länkar FirstFragment till SecondFragment. Klicka för att välja denna pil, och "Attribut" -panelen kommer att uppdateras för att visa lite information om denna åtgärd, inklusive dess systemtilldelade ID.

Denna förändring återspeglas också i navigationsgrafns XML:

… … …

Skölj och upprepa för att skapa en åtgärd som länkar SecondFragment till ThirdFragment och en åtgärd som länkar ThirdFragment till FirstFragment.

Värd för navigationsgrafen

Navigationsgrafen ger en visuell representation av din apps destinationer och åtgärder, men för att åberopa dessa åtgärder krävs någon ytterligare kod.

När du har skapat en navigationsgraf måste du lägga in den i en aktivitet genom att lägga till ett NavHostFragment i den aktivitets layoutfil. Detta NavHostFragment tillhandahåller en behållare där navigeringen kan ske och kommer också att vara ansvarig för att byta fragment in och ut när användaren navigerar runt i din app.

Öppna projektets "Activity_main.xml" -fil och lägg till ett NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Skapa ett fragment som fungerar som NavHostFragment //

I ovanstående kod tillåter app: defaultNavHost = "true" Navigationsvärd att fånga upp när systemets "Tillbaka" -knapp trycks ned, så appen håller alltid den navigering som beskrivs i din navigationsgraf.

Aktivera övergångar med NavController

Därefter måste vi implementera en NavController, som är en ny komponent som ansvarar för att hantera navigeringsprocessen i ett NavHostFragment.

För att navigera till en ny skärm måste du hämta en NavController med Navigation.findNavController, ringa metoden Navigera () och sedan skicka antingen ID för destinationen du navigerar till eller den åtgärd du vill åberopa. Till exempel vädjar jag till "action_firstFragment_to_secondFragment", som kommer att transportera användaren från FirstFragment, till SecondFragment:

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

Användaren flyttar till en ny skärm genom att klicka på en knapp, så vi måste också implementera en OnClickListener.

Efter att ha gjort dessa ändringar bör FirstFragment se ut så här:

import android.os.Bundle; importera 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; public class FirstFragment utökar Fragment {public FirstFragment () {} @Override public void onCreate (Bundle SavedInstanceState) {super.onCreate (SavedInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (LayoutInflater-uppblåsare, ViewGroup-behållare, 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 (ny View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.naragmentFrament) }}); }}

Öppna sedan din MainActivity och lägg till följande:

NavigationView.OnNavigationItemSelectedListener: En lyssnare för att hantera händelser på navigationsartiklar
SecondFragment.OnFragmentInteractionListener: Ett gränssnitt som genererades när du skapade SecondFragment via Navigationsredigeraren

MainActivity måste också implementera metoden onFragmentInteraction () som möjliggör kommunikation mellan fragmentet och aktiviteten.

importera android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.net.Uri; import android.view.MenuItem; import android.support.design.widget.NavigationView; importera android.support.annotation.NonNull; public class MainActivity utökar AppCompatActivity implementerar NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protection void onCreate (Bundle SavedInstanceState) {super.onCreate (SavedInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (@NonNull MenuItem-artikel) {returnera falsk; } @Override public void onFragmentInteraction (Uri uri) {}}

Lägger till mer navigering

För att implementera resten av vår apps navigering behöver vi bara kopiera / klistra in onViewCreated-blocket och göra några tweaks så att vi hänvisar till korrekta knappwidgets och navigationsåtgärder.

Öppna ditt SecondFragment och lägg till följande:

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

Uppdatera sedan ThirdFragments onViewCreated-block:

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

Slutligen, glöm inte att lägga till ThirdFragment.OnFragmentInteractionListener-gränssnittet till din MainActivity:

public class MainActivity utökar AppCompatActivity implementerar NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Kör det här projektet på din Android-enhet eller Android Virtual Device (AVD) och testa navigeringen. Du bör kunna navigera mellan alla tre fragmenten genom att klicka på de olika knapparna.

Skapa anpassade övergångsanimationer

Just nu kan användaren flytta runt i appen, men övergången mellan varje fragment är ganska plötslig. I det här sista avsnittet använder vi navigeringskomponenten för att lägga till en annan animation till varje övergång, så de händer mer smidigt.

Varje animering som du vill använda måste definieras i sin egen animationsresursfil i en "res / anim" -katalog. Om ditt projekt inte redan innehåller en "res / anim" -katalog måste du skapa en:

Kontrollera-klicka på projektets "res" -mapp och välj "New> Android Resource Directory."
Ge den här katalogen namnet "anim."
Öppna rullgardinsmenyn "Resurstyp" och välj "animering."
Klicka på "OK."

Låt oss börja med att definiera en fade-out animation:

Kontrollklicka på projektets "res / anim" -katalog.
Välj "Ny> Animeringsresursfil."
Ge den här filen namnet "fade_out."
Öppna din "fade_out" -fil och lägg till följande:

Upprepa stegen ovan för att skapa en andra animationsresursfil, med namnet “slide_out_left,” och lägg sedan till följande:

Skapa en tredje fil med namnet “slide_out_right” och lägg till följande:

Du kan nu tilldela dessa animationer till dina handlingar via Navigationsredigeraren.För att spela fade-out-animationen när användaren navigerar från FirstFragment till SecondFragment:

Öppna din navigationsgraf och se till att fliken "Design" är vald.
Klicka för att välja åtgärden som länkar FirstFragment till SecondFragment.
Klicka på för att utöka avsnittet "Övergångar" i panelen "Attribut". Som standard bör varje rullgardinsmeny i detta avsnitt vara inställd på "Ingen."
Öppna rullgardinsmenyn "Enter", som styr animeringen som spelas upp när SecondFragment övergår till toppen av bakbunten. Välj animationen "fade_out".

Om du byter till fliken "Design" ser du att den här animeringen har lagts till "action_firstFragment_to_secondFragment."

Kör det uppdaterade projektet på din Android-enhet eller AVD. Du bör nu stöta på en fade-out effekt när du navigerar från FirstFragment till SecondFragment.

Om du tittar igen på "Attribut" -panelen ser du att "Enter" inte är den enda delen av övergången där du kan använda en animering. Du kan också välja mellan:

Utgång: Animationen som spelas upp när ett fragment lämnar stacken
Pop Enter: Animationen som spelas upp när ett fragment fyller toppen av bunten
Pop Exit: Animationen som spelas upp när ett fragment övergår till bunten av bunten

Prova att experimentera genom att tillämpa olika animationer på olika delar av dina övergångar. Du kan också ladda ner det slutförda projektet från GitHub.

Avslutar

I den här artikeln tittade vi på hur du kan använda komponenten Navigationsarkitektur för att skapa en enda-aktivitet, flera-fragment-applikation, komplett med anpassade övergångsanimationer. Har navigeringskomponenten övertygat dig om att migrera dina projekt till den här typen av applikationsstruktur? Låt oss veta i kommentarerna nedan!