Zawartość

• Co to jest komponent architektury nawigacji?
• Dodawanie edytora nawigacji do Android Studio
• Zależności projektu: Fragment nawigacji i interfejs użytkownika nawigacji
• Uzyskaj wizualny przegląd nawigacji aplikacji
• Wypełnianie wykresu nawigacji: Dodawanie miejsc docelowych
• Aktualizowanie układów fragmentów
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Łączenie celów podróży z działaniami
• Hostowanie wykresu nawigacyjnego
• Wyzwalanie przejść za pomocą NavController
• Dodanie większej nawigacji
• Tworzenie niestandardowych animacji przejścia
• Podsumowując

Podczas konferencji we / wy w 2018 r. Google ogłosiło nowe podejście do tworzenia aplikacji na Androida.

Oficjalnym zaleceniem Google jest utworzenie pojedynczego działania, które będzie głównym punktem wejścia do aplikacji, a następnie dostarczenie pozostałej części aplikacji jako fragmentów.

Choć myśl o żonglowaniu wszystkimi różnymi transakcjami fragmentów i cyklami życia może wydawać się koszmarem, podczas I / O 2018 Google uruchomił również komponent architektury nawigacji, który ma pomóc ci w przyjęciu tego rodzaju struktury pojedynczej aktywności.

W tym artykule pokażemy, jak dodać komponent Nawigacja do swojego projektu oraz jak go używać do szybkiego i łatwego tworzenia aplikacji z jednym działaniem i wieloma fragmentami, z niewielką pomocą nowego edytora nawigacji Android Studio. Po utworzeniu i połączeniu fragmentów poprawimy standardowe przejścia fragmentów Androida za pomocą komponentu Nawigacja i edytora, aby utworzyć szereg w pełni konfigurowalnych animacji przejścia.

Co to jest komponent architektury nawigacji?

Komponent architektury nawigacji, będący częścią Androida JetPack, pomaga wizualizować różne trasy za pośrednictwem aplikacji i upraszcza proces wdrażania tych tras, szczególnie jeśli chodzi o zarządzanie transakcjami fragmentowymi.

Aby użyć komponentu Nawigacja, musisz utworzyć Wykres Nawigacji, który jest plikiem XML opisującym wzajemne relacje działań i fragmentów aplikacji.

Wykres nawigacyjny składa się z:

• Miejsca docelowe: Poszczególne ekrany, do których użytkownik może nawigować
• Działania: Trasy, jakie użytkownik może pokonać między celami aplikacji

Możesz wyświetlić wizualną reprezentację wykresu nawigacyjnego swojego projektu w Edytorze nawigacyjnym Android Studio. Poniżej znajduje się wykres nawigacyjny składający się z trzech miejsc docelowych i trzech działań wyświetlanych w Edytorze nawigacji.

Komponent Nawigacja został zaprojektowany, aby pomóc Ci wdrożyć nową zalecaną przez Google strukturę aplikacji, w której pojedyncze Działanie „hostuje” Wykres Nawigacji, a wszystkie miejsca docelowe są zaimplementowane jako fragmenty. W tym artykule zastosujemy się do tego zalecanego podejścia i stworzymy aplikację składającą się z MainActivity i trzech fragmentów miejsc docelowych.

Jednak komponent Nawigacja nie jest przeznaczony tylko dla aplikacji o tej zalecanej strukturze. Projekt może mieć wiele wykresów nawigacyjnych, a fragmenty i działania można wykorzystywać jako miejsca docelowe w obrębie tych wykresów nawigacyjnych. Jeśli migrujesz duży, dojrzały projekt do komponentu Nawigacja, łatwiejsze może być rozdzielenie przepływów nawigacyjnych Twojej aplikacji na grupy, gdzie każda grupa składa się z „głównej” aktywności, niektórych powiązanych fragmentów i własnego wykresu nawigacyjnego.

Dodawanie edytora nawigacji do Android Studio

Aby pomóc Ci w pełni wykorzystać komponent Nawigacji, Android Studio 3.2 Canary i wyższy zawiera nowy edytor Nawigacji.

Aby włączyć ten edytor:

• Wybierz „Android Studio> Preferencje…” z paska menu Android Studio.
• W menu po lewej stronie wybierz „Eksperymentalne”.
• Jeśli nie jest jeszcze zaznaczony, zaznacz pole wyboru „Włącz edytor nawigacji”.

• Kliknij OK."
• Uruchom ponownie Android Studio.

Zależności projektu: Fragment nawigacji i interfejs użytkownika nawigacji

Utwórz nowy projekt z wybranymi ustawieniami, a następnie otwórz jego plik build.gradle i dodaj fragment nawigacji i interfejs nawigacji jako zależności projektu:

zależności {implementacja fileTree (reż: libs, include:) implementacja com.android.support:appcompat-v7:28.0.0 implementacja com.android.support.constraint: układ ograniczeń: 1.1.3 // Dodaj następującą // implementację „android.arch.navigation: fragment nawigacji: 1.0.0-alpha05” // Interfejs nawigacyjny zapewnia dostęp do niektórych funkcji pomocniczych // implementacja ”android.arch.navigation: navigation-ui: 1.0.0-alpha05” com .android.support: support-v4: 28.0.0 test junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: rdzeń espresso: 3.0.2 }

Uzyskaj wizualny przegląd nawigacji aplikacji

Aby utworzyć wykres nawigacyjny:

• Kliknij z wciśniętym klawiszem Control w folder „res” projektu i wybierz „Nowy> Katalog zasobów Androida”.
• Otwórz menu „Typ zasobu” i wybierz „nawigacja”.
• Wybierz „OK”.
• Kliknij z wciśniętym klawiszem Control w nowy katalog „res / navigation” i wybierz „Nowy> Plik zasobów nawigacji”.
• Otwórz menu „Typ zasobu” i wybierz „Nawigacja”.

• Podaj tę nazwę pliku; Używam „nav_graph”.
• Kliknij OK."

Otwórz plik „res / navigation / nav_graph”, a Edytor nawigacji uruchomi się automatycznie. Podobnie jak edytor układu, edytor nawigacji jest podzielony na zakładki „Projekt” i „Tekst”.

Jeśli wybierzesz kartę „Tekst”, zobaczysz następujący kod XML:

<? xml version = "1.0" encoding = "utf-8"?> // Nawigacja jest węzłem głównym każdego wykresu nawigacyjnego //

Karta „Projektowanie” umożliwia wizualne tworzenie i edytowanie nawigacji aplikacji.

Od lewej do prawej edytor nawigacji składa się z:

• Lista miejsc docelowych: Zawiera listę wszystkich miejsc docelowych, które składają się na ten konkretny Wykres Nawigacji, oraz Aktywność, w której znajduje się Wykres Nawigacji.
• Edytor wykresów: Edytor wykresów zapewnia wizualny przegląd wszystkich miejsc docelowych wykresu i działań łączących je.
• Edytor atrybutów: Jeśli wybierzesz miejsce docelowe lub akcję w Edytorze wykresów, panel „Atrybuty” wyświetli informacje o aktualnie wybranym elemencie.

Wypełnianie wykresu nawigacji: Dodawanie miejsc docelowych

Nasz wykres nawigacyjny jest obecnie pusty. Dodajmy miejsca docelowe.

Możesz dodać Działania lub fragmenty, które już istnieją, ale możesz także użyć Wykresu Nawigacji, aby szybko i łatwo utworzyć nowe fragmenty:

• Kliknij przycisk „Nowy cel” i kliknij „Utwórz puste miejsce docelowe”.

• W polu „Fragment Name” wpisz nazwę klasy swojego fragmentu; Używam „FirstFragment”.
• Upewnij się, że pole wyboru „Utwórz układ XML” jest zaznaczone.
• Wypełnij pole „Nazwa układu fragmentu”; Używam „fragment_pierwszy”.
• Kliknij „Zakończ”.

Podklasa FirstFragment i odpowiedni plik zasobu układu „fragment_first.xml” zostaną teraz dodane do projektu. FirstFragment pojawi się również jako miejsce docelowe na wykresie nawigacyjnym.

Jeśli wybierzesz opcję FirstFragment w Edytorze nawigacji, panel „Atrybuty” wyświetli niektóre informacje o tym miejscu docelowym, takie jak nazwa jego klasy i identyfikator, którego będziesz używać, aby odwoływać się do tego miejsca docelowego w innym miejscu w kodzie.

Opłucz i powtórz, aby dodać SecondFragment i ThirdFragment do swojego projektu.

Przejdź na kartę „Tekst”, a zobaczysz, że plik XML został zaktualizowany w celu odzwierciedlenia tych zmian.

Każdy wykres nawigacyjny ma punkt początkowy, czyli ekran wyświetlany po uruchomieniu aplikacji przez użytkownika. W powyższym kodzie używamy FirstFragment jako miejsca docelowego naszej aplikacji. Jeśli przejdziesz do karty „Projekt”, zobaczysz ikonę domu, która oznacza również FirstFragment jako miejsce docelowe wykresu.

Jeśli wolisz użyć innego punktu początkowego, wybierz działanie lub fragment, o którym mowa, a następnie wybierz „Ustaw początkowy cel podróży” z panelu „Atrybuty”.

Alternatywnie możesz wprowadzić tę zmianę na poziomie kodu:

Aktualizowanie układów fragmentów

Teraz mamy nasze miejsca docelowe, dodajmy elementy interfejsu użytkownika, aby zawsze było jasne, który fragment aktualnie oglądamy.

Dodam do każdego fragmentu:

• TextView, który zawiera tytuł fragmentu
• Przycisk, który pozwoli użytkownikowi przechodzić od jednego fragmentu do drugiego

Oto kod każdego pliku zasobów układu:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Łączenie celów podróży z działaniami

Następnym krokiem jest połączenie naszych miejsc docelowych poprzez działania.

Możesz utworzyć akcję w Edytorze nawigacji za pomocą prostego przeciągania i upuszczania:

• Upewnij się, że wybrana jest karta „Projekt” edytora.
• Najedź kursorem na prawą stronę celu, do którego chcesz nawigować z, którym w tym przypadku jest FirstFragment. Powinien pojawić się okrąg.
• Kliknij i przeciągnij kursor do miejsca docelowego, do którego chcesz nawigować do, czyli SecondFragment. Powinna pojawić się niebieska linia. Gdy SecondFragment jest podświetlony na niebiesko, zwolnij kursor, aby utworzyć połączenie między tymi miejscami docelowymi.

Powinna być teraz strzałka akcji łącząca FirstFragment z SecondFragment. Kliknij, aby wybrać tę strzałkę, a panel „Atrybut” zaktualizuje się, aby wyświetlić informacje o tej akcji, w tym jej identyfikator przypisany do systemu.

Ta zmiana znajduje również odzwierciedlenie w pliku XML Grafu nawigacyjnego:

… … …

Opłucz i powtórz, aby utworzyć akcję łączącą SecondFragment z ThirdFragment i akcję łączącą ThirdFragment z FirstFragment.

Hostowanie wykresu nawigacyjnego

Wykres nawigacyjny zapewnia wizualną reprezentację miejsc docelowych i działań aplikacji, ale wywołanie tych działań wymaga dodatkowego kodu.

Po utworzeniu wykresu nawigacyjnego musisz umieścić go w działaniu, dodając NavHostFragment do pliku układu tego działania. Ten NavHostFragment zapewnia kontener, w którym może odbywać się nawigacja, i będzie również odpowiedzialny za zamianę fragmentów do i zejście, gdy użytkownik porusza się po Twojej aplikacji.

Otwórz plik „activity_main.xml” swojego projektu i dodaj NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Utwórz fragment, który będzie działał jak NavHostFragment //

W powyższym kodzie aplikacja: defaultNavHost = „true” pozwala hostowi nawigacji przechwytywać za każdym razem, gdy zostanie naciśnięty przycisk „Wstecz” systemu, więc aplikacja zawsze honoruje nawigację opisaną na wykresie nawigacji.

Wyzwalanie przejść za pomocą NavController

Następnie musimy zaimplementować NavController, który jest nowym komponentem odpowiedzialnym za zarządzanie procesem nawigacji w ramach NavHostFragment.

Aby przejść do nowego ekranu, musisz pobrać NavController za pomocą Navigation.findNavController, wywołać metodę navigate (), a następnie przekazać albo identyfikator miejsca docelowego, do którego nawigujesz, albo działanie, które chcesz wywołać. Na przykład wywołuję „action_firstFragment_to_secondFragment”, który przeniesie użytkownika z FirstFragment do SecondFragment:

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

Użytkownik przejdzie do nowego ekranu, klikając przycisk, więc musimy również zaimplementować OnClickListener.

Po wprowadzeniu tych zmian FirstFragment powinien wyglądać mniej więcej tak:

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; klasa publiczna FirstFragment rozszerza Fragment {public FirstFragment () {} @Override public void onCreate (pakiet saveInstanceState) {super.onCreate (saveInstanceState); if (getArguments ()! = null) {}} @Override public Wyświetl onCreateView (inflator LayoutInflater, kontener ViewGroup, pakiet saveInstanceState) {return inflater.inflate (R.layout.fragment_first, kontener, fałsz); } @Override public void onViewCreated (@NonNull Widok widoku, pakiet @Nullable zapisanyInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (nowy View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.rag_fragmentacja_fragmentacji }}); }}

Następnie otwórz MainActivity i dodaj:

• NavigationView.OnNavigationItemSelectedListener: Detektor do obsługi zdarzeń na elementach nawigacyjnych
• SecondFragment.OnFragmentInteractionListener: Interfejs wygenerowany podczas tworzenia SecondFragment za pomocą edytora nawigacji

MainActivity musi również zaimplementować metodę onFragmentInteraction (), która umożliwia komunikację między fragmentem a działaniem.

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; klasa publiczna MainActivity rozszerza AppCompatActivity implementuje NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override chroniony void onCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (element @NonNull MenuItem) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Dodanie większej nawigacji

Aby zaimplementować resztę nawigacji naszej aplikacji, musimy po prostu skopiować / wkleić blok onViewCreated i wprowadzić kilka poprawek, aby odwoływać się do odpowiednich widżetów przycisków i działań nawigacyjnych.

Otwórz SecondFragment i dodaj:

@Override public void onViewCreated (@NonNull Widok widoku, pakiet @Nullable zapisanyInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (nowy View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.rag_fragmentacja_sekwencji) }}); }

Następnie zaktualizuj blok onViewCreated ThirdFragment:

@Override public void onViewCreated (@NonNull Widok widoku, pakiet @Nullable zapisanyInstanceState) {Button button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (nowy View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.stag_fragmentacja_nazwa) }}); }

Na koniec nie zapomnij dodać interfejsu ThirdFragment.OnFragmentInteractionListener do MainActivity:

klasa publiczna MainActivity rozszerza AppCompatActivity implementuje NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Uruchom ten projekt na urządzeniu z Androidem lub urządzeniu wirtualnym z systemem Android (AVD) i przetestuj nawigację. Powinieneś być w stanie nawigować między wszystkimi trzema fragmentami, klikając różne przyciski.

Tworzenie niestandardowych animacji przejścia

W tym momencie użytkownik może poruszać się po aplikacji, ale przejście między poszczególnymi fragmentami jest dość nagłe. W tej ostatniej sekcji użyjemy komponentu Nawigacja, aby dodać inną animację do każdego przejścia, dzięki czemu będą przebiegać płynniej.

Każda animacja, której chcesz użyć, musi być zdefiniowana we własnym pliku zasobów animacji, w katalogu „res / anim”. Jeśli twój projekt nie zawiera jeszcze katalogu „res / anim”, musisz go utworzyć:

• Kliknij z wciśniętym klawiszem Control folder „res” projektu i wybierz „Nowy> Katalog zasobów Androida”.
• Nadaj temu katalogowi nazwę „anim”.
• Otwórz menu „Typ zasobu” i wybierz „anim”.
• Kliknij OK."

Zacznijmy od zdefiniowania animacji wygaszania:

• Kliknij z wciśniętym klawiszem Control w katalogu „res / anim” swojego projektu.
• Wybierz „Nowy> Plik zasobów animacji”.
• Nadaj temu plikowi nazwę „fade_out”.
• Otwórz plik „fade_out” i dodaj następujące elementy:

Powtórz powyższe kroki, aby utworzyć drugi plik zasobów animacji o nazwie „slide_out_left”, a następnie dodaj:

Utwórz trzeci plik o nazwie „slide_out_right” i dodaj następujące elementy:

Możesz teraz przypisywać te animacje do swoich działań za pomocą Edytora nawigacji.Aby odtworzyć animację wygaszania za każdym razem, gdy użytkownik przechodzi z FirstFragment do SecondFragment:

• Otwórz wykres nawigacyjny i upewnij się, że wybrana jest karta „Projekt”.
• Kliknij, aby wybrać akcję, która łączy FirstFragment z SecondFragment.
• W panelu „Atrybuty” kliknij, aby rozwinąć sekcję „Przejścia”. Domyślnie każde menu rozwijane w tej sekcji powinno mieć wartość „Brak”.
• Otwórz menu rozwijane „Enter”, które kontroluje animację odtwarzaną za każdym razem, gdy SecondFragment przejdzie na szczyt tylnego stosu. Wybierz animację „fade_out”.

Jeśli przejdziesz do karty „Projekt”, zobaczysz, że ta animacja została dodana do „action_firstFragment_to_secondFragment”.

Uruchom zaktualizowany projekt na urządzeniu z Androidem lub AVD. Powinieneś teraz doświadczyć efektu zanikania przy każdym przejściu z FirstFragment do SecondFragment.

Jeśli spojrzysz jeszcze raz na panel „Atrybuty”, zobaczysz, że „Enter” nie jest jedyną częścią przejścia, w której możesz zastosować animację. Możesz także wybrać:

• Wyjście: Animacja odtwarzana, gdy fragment opuszcza stos
• Pop Enter: Animacja odtwarzana, gdy fragment zapełnia górę stosu
• Wyjście Pop: Animacja odtwarzana, gdy fragment przechodzi na spód stosu

Spróbuj eksperymentować, stosując różne animacje do różnych części przejść. Możesz także pobrać ukończony projekt z GitHub.

Podsumowując

W tym artykule przyjrzeliśmy się, jak można użyć komponentu Architektura nawigacji do utworzenia aplikacji z jednym działaniem i wieloma fragmentami, wraz z niestandardowymi animacjami przejścia. Czy komponent Nawigacja przekonał Cię do migracji swoich projektów do tego rodzaju struktury aplikacji? Daj nam znać w komentarzach poniżej!