Tartalom

• Mi a navigációs architektúra alkotóeleme?
• A Navigációs szerkesztő hozzáadása az Android Studio alkalmazáshoz
• Projektfüggőségek: Navigációs töredék és Navigációs felhasználói felület
• Vizuális áttekintést kap az alkalmazás navigációjáról
• A navigációs grafikon kitöltése: Úti célok hozzáadása
• A töredék elrendezésének frissítése
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Úti célok összekapcsolása tevékenységekkel
• A navigációs grafikon tárolása
• Az átmenetek indítása a NavController segítségével
• További navigáció hozzáadása
• Egyéni átmeneti animációk készítése
• Csomagolás

A 2018 I / O konferencia során a Google új megközelítést jelentett be az Android-alkalmazások fejlesztésére.

A Google hivatalos ajánlása az, hogy hozzon létre egy olyan tevékenységet, amely az alkalmazás fő belépési pontja, majd az alkalmazás többi tartalmát töredékek formájában továbbítja.

Bár az a különbség, hogy a különböző fragmensek tranzakcióit és életciklusait összezsúfolják, rémálomnak tűnhet, a I / O 2018-ban a Google elindította a Navigációs architektúra összetevőt is, amelynek célja az, hogy segítsen Önnek elfogadni az ilyen típusú egyéni tevékenységi struktúrát.

Ebben a cikkben megmutatjuk, hogyan adhatja hozzá a Navigációs összetevőt a projekthez, és hogyan lehet azt gyorsan és egyszerűen létrehozni egyaktivitású, többrészes alkalmazáshoz, az Android Studio új navigációs szerkesztőjének kis segítségével. Miután létrehozta és összekapcsolta a fragmenseit, javítjuk az Android szokásos fragmentumátmeneteit a Navigációs elem és a Szerkesztő használatával, amellyel teljesen testreszabható átmeneti animációkat hozhat létre.

Mi a navigációs architektúra alkotóeleme?

Az Android JetPack része, a Navigációs architektúra alkotóeleme segít a különböző útvonalak megjelenítésében az alkalmazáson keresztül, és leegyszerűsíti ezen útvonalak végrehajtásának folyamatát, különös tekintettel a töredékes tranzakciók kezelésére.

A Navigációs elem használatához el kell készítenie a Navigációs grafikont, amely egy XML fájl, amely leírja, hogy az alkalmazás tevékenységei és fragmentumai hogyan kapcsolódnak egymáshoz.

A navigációs grafikon a következőkből áll:

• Célpont: Az egyes képernyők, amelyekbe a felhasználó navigálhat
• Hozzászólások: Azok az útvonalak, amelyeket a felhasználó megtehet az alkalmazás rendeltetési helyei között

A projekt navigációs grafikonjának vizuális ábrázolását az Android Studio Navigációs szerkesztőjében tekintheti meg. Az alábbiakban található egy navigációs grafikon, amely három rendeltetési helyből és három műveletből áll, amint az a Navigációs szerkesztőben megjelenik.

A Navigációs összetevő célja, hogy segítsen megvalósítani a Google új ajánlott alkalmazásstruktúráját, ahol egyetlen tevékenység „tárolja” a navigációs grafikont, és az összes rendeltetési hely töredékekként kerül megvalósításra. Ebben a cikkben ezt az ajánlott megközelítést követjük, és létrehozunk egy alkalmazást, amely MainActivity és három töredék célállomást tartalmaz.

A Navigációs összetevő azonban nem csak az ilyen ajánlott szerkezettel rendelkező alkalmazások számára. Egy projektnek több navigációs grafikonja is lehet, és fragmenseket és tevékenységeket rendeltetési helyként használhat ezekben a navigációs grafikonokban. Ha egy nagy, érett projektet migrál a Navigációs elemre, akkor könnyebbé válik az alkalmazás navigációs folyamatainak csoportokra bontása, ahol minden csoport egy „fő” tevékenységből, néhány kapcsolódó fragmensből és a saját navigációs grafikonjából áll.

A Navigációs szerkesztő hozzáadása az Android Studio alkalmazáshoz

Annak érdekében, hogy a legtöbbet hozza ki a Navigációs összetevőből, az Android Studio 3.2 Canary és újabb verziói új navigációs szerkesztőt tartalmaznak.

A szerkesztő engedélyezése:

• Az Android Studio menüsorában válassza az „Android Studio> Beállítások…” elemet.
• A bal oldali menüben válassza a „Kísérleti” lehetőséget.
• Ha még nincs kiválasztva, jelölje be a „Navigációs szerkesztő engedélyezése” jelölőnégyzetet.

• Kattintson az „OK” gombra.
• Indítsa újra az Android Studio alkalmazást.

Projektfüggőségek: Navigációs töredék és Navigációs felhasználói felület

Hozzon létre egy új projektet a választott beállításokkal, majd nyissa meg a build.gradle fájlt, és adja hozzá a navigációs töredéket és a navigációs ui mint projektfüggőségeket:

függőségek {végrehajtási fájlTree (könyvtár: libs, tartalmazza:) megvalósítás com.android.support:appcompat-v7:28.0.0 implementáció com.android.support.constraint: kényszer-elrendezés: 1.1.3 // A következő // hozzáadása "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // A Navigation-UI hozzáférést biztosít bizonyos segítő funkciókhoz // megvalósítás "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementációs com .android.support: support-v4: 28.0.0 testVégrehajtási idő: június: 4.12 androidTestImplementation com.android.support.test: futó: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

Vizuális áttekintést kap az alkalmazás navigációjáról

Navigációs gráf létrehozása:

• Kattintson a vezérlőgombra a projekt „res” könyvtárába, és válassza az “Új> Android erőforrás könyvtár” lehetőséget.
• Nyissa meg az „Erőforrás típusa” legördülő menüt és válassza a „navigáció” lehetőséget.
• Válassza az „OK” lehetőséget.
• Kattintson a vezérlőgombra az új „újra / navigáció” könyvtárra, és válassza az „Új> Navigációs erőforrás fájl” lehetőséget.
• Nyissa meg az „Erőforrás típusa” legördülő menüt és válassza a „Navigáció” lehetőséget.

• Adja meg ezt a fájlnevet; A „nav_graph” -t használom.
• Kattintson az „OK” gombra.

Nyissa meg a „res / navigation / nav_graph” fájlt, és a Navigációs szerkesztő automatikusan elindul. Az Elrendezés-szerkesztőhöz hasonlóan a Navigációs Szerkesztő „Tervezés” és „Szöveg” fülre is fel van osztva.

Ha a „Szöveg” fület választja, akkor a következő XML jelenik meg:

<? xml version = "1.0" encoding = "utf-8"?> // Navigáció ”minden navigációs gráf gyökér csomópontja //

A „Tervezés” lapon helyezheti el és szerkesztheti alkalmazásának navigációját vizuálisan.

Balról jobbra a Navigációs Szerkesztő a következőkből áll:

• A rendeltetési helyek listája: Ez felsorolja az összes rendeltetési helyet, amelyek képezik az adott navigációs grafikont, valamint azt a tevékenységet, ahol a navigációs grafikon üzemel.
• A grafikus szerkesztő: A grafikus szerkesztő vizuális áttekintést nyújt a grafikon összes rendeltetési helyéről és az azokat összekötő műveletekről.
• Az Attribútumok szerkesztője: Ha kiválaszt egy rendeltetési helyet vagy műveletet a Grafikus Szerkesztőben, az “Attribútumok” panelen jelennek meg az aktuálisan kiválasztott elem adatai.

A navigációs grafikon kitöltése: Úti célok hozzáadása

Navigációs grafikonunk jelenleg üres. Adjunk hozzá néhány úti célt.

Hozzáadhat már létező tevékenységeket vagy fragmentumokat, de a navigációs grafikon segítségével gyorsan és egyszerűen új fragmentumokat is létrehozhat:

• Kattintson az „Új cél” gombra, és válassza az „Üres cél létrehozása” lehetőséget.

• A „Fragment Name” mezőbe írja be a fragmentum osztály nevét; Az „FirstFragment” -t használom.
• Győződjön meg róla, hogy a „Létrehoz XML formátum” jelölőnégyzet be van jelölve.
• Töltse ki a „Fragment Layout Name” mezőt; A „fragment_first” -t használom.
• Kattintson a „Befejezés” gombra.

Most egy FirstFragment alosztály és a hozzá tartozó “fragment_first.xml” elrendezési erőforrásfájl kerül hozzáadásra a projekthez. Az FirstFragment rendeltetési helyként is megjelenik a navigációs grafikonon.

Ha a Navigációs szerkesztőben az FirstFragment elemet választja, akkor az „Attribútumok” panelen megjelennek bizonyos információk a rendeltetési helyről, például az osztály neve és az azonosító, amelyet erre a célra hivatkozva használ a kódjában.

Öblítse le és ismételje meg a SecondFragment és a ThirdFragment hozzáadását a projekthez.

Váltás a „Szöveg” fülre, és látni fogja, hogy az XML frissítésre került, hogy tükrözze ezeket a változásokat.

Minden navigációs grafikonnak van kezdő célja, amely a képernyő, amely akkor jelenik meg, amikor a felhasználó elindítja az alkalmazását. A fenti kódban az FirstFragment alkalmazást használjuk alkalmazásunk kezdő rendeltetési helyének. Ha átvált a „Tervezés” fülre, akkor észre fog venni egy ház ikont, amely a FirstFragment-et is jelzi a grafikon kezdő célpontjaként.

Ha inkább más kiindulási pontot szeretne használni, válassza ki a kérdéses tevékenységet vagy fragmenst, majd az „Attribútumok” panelen válassza a „Start kezdőcél beállítása” lehetőséget.

Alternatív megoldásként ezt a változást kódszinten is végrehajthatja:

A töredék elrendezésének frissítése

Most megvan a rendeltetési helyünk, tegyünk hozzá néhány felhasználói felület elemet, hogy mindig egyértelmű legyen, melyik töredéket éppen megtekintettük.

Minden egyes töredékhez hozzáteszem a következőket:

• TextView, amely tartalmazza a töredék címét
• Egy gomb, amely lehetővé teszi a felhasználó számára, hogy az egyik töredékről a másikra navigáljon

Íme az egyes elrendezési erőforrás-kódok kódja:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Úti célok összekapcsolása tevékenységekkel

A következő lépés célok összekapcsolása akciók révén.

Műveletet hozhat létre a navigációs szerkesztőben az egyszerű drag and drop használatával:

• Győződjön meg arról, hogy a Szerkesztő “Design” fül van kiválasztva.
• Vigye az egérmutatót a navigálni kívánt rendeltetési hely jobb oldalán tól től, amely ebben az esetben a FirstFragment. Megjelenik egy kör.
• Kattintson és húzza a kurzort arra a célra, amelyben navigálni szeretne nak nek, amely SecondFragment. Kék vonalnak kell megjelennie. Ha a SecondFragment kék színű van kiemelve, engedje el a kurzort, hogy kapcsolatot létesítsen a célállomások között.

Most egy akció nyílnak kell lennie, amely összekapcsolja az FirstFragment-et a SecondFragment-rel. Kattintson a nyíl kiválasztására, és az „Attribútum” panel frissül, és megjelenít néhány információt erről a műveletről, beleértve a rendszerhez hozzárendelt azonosítót.

Ez a változás a Navigációs grafikon XML-jében is tükröződik:

… … …

Öblítsük meg és ismételjük meg a SecondFragment és a ThirdFragment összekapcsoló művelet létrehozásához, valamint a ThirdFragment és az FirstFragment összekapcsolásához szükséges művelet létrehozásához.

A navigációs grafikon tárolása

A navigációs grafikon vizuálisan ábrázolja az alkalmazás rendeltetési helyeit és műveleteit, de ezek meghívásához további kód szükséges.

Miután elkészítette a navigációs grafikont, el kell helyeznie azt egy tevékenység belsejében, hozzáadva egy NavHostFragment az adott tevékenység elrendezési fájljához. Ez a NavHostFragment tartalmaz egy tárolót, ahol a navigáció megtörténhet, és felel majd a töredékek cseréjéhez is, amíg a felhasználó navigál az alkalmazásán.

Nyissa meg a projekt „activity_main.xml” fájlját, és adjon hozzá egy NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Hozzon létre egy töredéket, amely NavHostFragmentként fog működni //

A fenti kódban az app: defaultNavHost = ”true” lehetővé teszi a Navigációs állomás számára, hogy elfogja a rendszer “Vissza” gombjának megnyomását, tehát az alkalmazás mindig tiszteletben tartja a navigációs grafikonban leírt navigációt.

Az átmenetek indítása a NavController segítségével

Ezután telepítenünk kell a NavController-et, amely egy új elem, amely a NavHostFragment navigációs folyamatának irányításáért felel.

Egy új képernyőhöz való navigáláshoz be kell töltenie a NavController készüléket a Navigation.findNavController használatával, fel kell hívnia a navigációs () módszert, majd átadnia kell a rendeltetési hely azonosítóját, amelyben navigál, vagy a műveletet, amelyre hivatkozni kíván. Például felhívom az „action_firstFragment_to_secondFragment” kifejezést, amely a felhasználót a FirstFragmentből a SecondFragmentbe szállítja:

NavController navController = Navigáció.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment);

A felhasználó egy gombra kattintva lép át az új képernyőre, ezért be kell építenünk egy OnClickListener alkalmazást is.

A módosítások elvégzése után az FirstFragmentnek így kell kinéznie:

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; A nyilvános osztályú FirstFragment kiterjeszti a töredéket {public FirstFragment () {} @A nyilvános void felülírása az onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Orreide public View onCreateView (LayoutInflater inflater, ViewGroup tároló, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @A nyilvános érvénytelenség felülírása az OnViewCreated oldalon (@NonNull View nézet, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (új View.OnClickListener) }}); }}

Ezután nyissa meg a MainActivity-t, és adja hozzá a következőket:

• NavigationView.OnNavigationItemSelectedListener: A hallgató az navigációs tételek eseményeinek kezelésére
• SecondFragment.OnFragmentInteractionListener: Interfész, amelyet akkor hoztak létre, amikor a Navigációs szerkesztőn létrehozta a SecondFragment

A MainActivity-nek végre kell hajtania az onFragmentInteraction () módszert is, amely lehetővé teszi a kommunikációt a töredék és a tevékenység között.

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; A nyilvános osztályú MainActivity kiterjeszti az AppCompatActivity eszközöket a NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Operride védett void onCreate (Bundle SaveInstanceState) {super.onCreate (SaveInstanceState); setContentView (R.layout.activity_main); } @A nyilvános logikai onNavigationItemSelected felülírása (@NonNull MenuItem elem) {return false; } @A nyilvános érvénytelenség onFragmentInteraction (Uri uri) {}} felülírása

További navigáció hozzáadása

Az alkalmazás többi navigációjának végrehajtásához csak be kell másolnunk / beillesztenünk az onViewCreated blokkot, és meg kell tennünk néhány csípést, hogy a helyes gomb-kütyüre és a navigációs műveletekre hivatkozzunk.

Nyissa meg a SecondFragment-et, és adja hozzá a következőket:

@A nyilvános érvénytelenség felülírása az OnViewCreated oldalon (@NonNull View nézet, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (új View.OnClickListener () {@Oreride public void onClick (View v) {NavController navController = Navigáció.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.Fagment (R.id); R.id }}); }

Ezután frissítse a ThirdFragment onViewCreated blokkját:

@A nyilvános érvénytelenség felülírása az OnViewCreated oldalon (@NonNull View nézet, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (új View.OnClickListener () {@Orride public void onClick (View v) {NavController navController = Navigáció.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id) }}); }

Végül, ne felejtsük el hozzáadni a ThirdFragment.OnFragmentInteractionListener felületet a MainActivityhoz:

A nyilvános osztály MainActivity kiterjeszti az AppCompatActivity eszközöket a NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener alkalmazáshoz {

Futtassa ezt a projektet Android-eszközén vagy Android virtuális eszközén (AVD), és tesztelje a navigációt. A három gombra kattintva navigálhat mindhárom töredék között.

Egyéni átmeneti animációk készítése

Ezen a ponton a felhasználó mozoghat az alkalmazásán, de az egyes fragmentumok közötti átmenet meglehetősen hirtelen megtörténik. Ebben az utolsó szakaszban a Navigációs komponenst használjuk, hogy különféle animációkat adjunk az egyes átmenetekhez, így azok zavartalanul zajlanak.

Minden használni kívánt animációt meg kell határozni a saját animációs erőforrásfájljában, egy „res / anim” könyvtárban. Ha a projekt még nem tartalmaz „res / anim” könyvtárat, akkor létre kell hoznia azt:

• Kattintson a vezérlőgombra a projekt „res” mappájára, és válassza az “Új> Android erőforrás könyvtár” lehetőséget.
• Adja ennek a könyvtárnak az „anim” nevet.
• Nyissa meg az „Erőforrás típusa” legördülő menüt, és válassza az „anim” lehetőséget.
• Kattintson az „OK” gombra.

Kezdjük azzal, hogy meghatározunk egy elhalványult animációt:

• Kattintson a vezérlőgombra a projekt „res / anim” könyvtárába.
• Válassza az „Új> Animációs erőforrás fájl” lehetőséget.
• Adja a fájlnak „fade_out” nevet.
• Nyissa meg a „fade_out” fájlt, és adja hozzá a következőket:

Ismételje meg a fenti lépéseket egy második, „slide_out_left” elnevezésű animációs erőforrás-fájl létrehozásához, majd adja hozzá a következőket:

Hozzon létre egy harmadik, „slide_out_right” nevű fájlt, és adja hozzá a következőket:

Most ezeket a animációkat hozzárendelheti tevékenységeihez a Navigációs szerkesztő segítségével.A fade-out animáció lejátszásához, amikor a felhasználó az FirstFragmentből a SecondFragmentbe navigál:

• Nyissa meg a navigációs grafikont, és ellenőrizze, hogy a „Design” fül van-e kiválasztva.
• Kattintson a művelet kiválasztására, amely összekapcsolja az FirstFragment-et a SecondFragment-rel.
• Az „Attribútumok” panelen kattintson az „Átmenetek” szakasz kibontásához. Alapértelmezés szerint ebben a szakaszban minden legördülő menüt „Nincs” -ra kell állítani.
• Nyissa meg az „Enter” legördülő menüt, amely irányítja az animációt, amely akkor játszódik le, amikor a SecondFragment átvált a hátsó verem tetejére. Válassza ki a „fade_out” animációt.

Ha átvált a „Tervezés” fülre, akkor látni fogja, hogy ezt az animációt hozzáadta a „action_firstFragment_to_secondFragment” elemhez.

Futtassa a frissített projektet Android-eszközén vagy AVD-jén. A FirstFragment-ről a SecondFragment-re való navigáláskor most egy eltűnő effektusnak kell találkoznia.

Ha újból megnézi az „Attribútumok” panelt, látni fogja, hogy az „Enter” nem az átmenet egyetlen része, ahol animációt alkalmazhat. A következők közül választhat:

• Kijárat: Az animáció, amelyet akkor lehet lejátszani, amikor egy töredék elhagyja a köteget
• Pop Enter: Az animáció, amelyet akkor lehet lejátszani, ha egy töredék a verem tetejét tölti be
• Pop Exit: Az animáció, amelyet akkor lehet lejátszani, ha egy töredék átalakul a halom aljára

Próbálja ki a kísérletet úgy, hogy különböző animációkat alkalmaz az átmenetek különböző részeire. A befejezett projektet a GitHubból is letöltheti.

Csomagolás

Ebben a cikkben megvizsgáltuk, hogyan lehet a Navigációs architektúra összetevőt létrehozni egytevékenységű, többszörös töredékes alkalmazáshoz, egyéni átmeneti animációkkal kiegészítve. Meggyőzte-e a Navigációs elem, hogy a projektjeit ilyen típusú alkalmazásstruktúrára migrálja? Tudassa velünk az alábbi megjegyzésekben!