Edytor nawigacji

Android Studio zawiera graficzny interfejs użytkownika, który pozwala tworzyć i edytować wykresy nawigacyjne. Zasadniczo jest to edytor bazowego pliku zasobów XML.

Przegląd

Gdy dodasz wykres XML do aplikacji, Android Studio otworzy go w Edytorze nawigacji. W edytorze nawigacji możesz edytować wykresy nawigacyjne lub bezpośrednio edytować kod XML.

Rysunek 1. Edytor nawigacji
  1. Panel Miejsca docelowe: wyświetla nazwę hosta nawigacji i wszystkie miejsca docelowe w edytorze wykresów.
  2. Edytor wykresów: zawiera wizualną reprezentację wykresu nawigacyjnego. Możesz się przełączać między widokiem projektu a bazową reprezentacją kodu XML w widoku Tekst.
  3. Atrybuty: pokazuje atrybuty wybranego elementu na wykresie nawigacyjnym.

Kliknij kartę Tekst, aby wyświetlić odpowiedni kod XML, który powinien wyglądać podobnie do tego fragmentu:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/nav_graph">

</navigation>

Element <navigation> jest głównym elementem wykresu nawigacyjnego. Dodając do wykresu miejsca docelowe i łączące działania, zobaczysz tu odpowiadające im elementy <destination> i <action> jako elementy podrzędne. Jeśli masz zagnieżdżone wykresy, są one wyświetlane jako podrzędne elementy <navigation>.

Dodaj miejsca docelowe

Możesz utworzyć miejsce docelowe na podstawie istniejącego fragmentu lub działania. Możesz też użyć Edytora nawigacji, by utworzyć nowe miejsce docelowe albo utworzyć obiekt zastępczy do późniejszego zastąpienia fragmentem lub aktywnością.

Ten przykład pokazuje, jak utworzyć nowe miejsce docelowe. Aby dodać nowe miejsce docelowe za pomocą edytora nawigacji:

  1. W edytorze nawigacji kliknij ikonę Nowe miejsce docelowe , a następnie Utwórz nowe miejsce docelowe.
  2. W wyświetlonym oknie Nowy komponent Androida utwórz fragment. Więcej informacji na temat fragmentów znajdziesz w omówieniu fragmentów.

Zwróć uwagę, że w edytorze nawigacji Android Studio dodał do wykresu to miejsce docelowe.

Rysunek 2 przedstawia przykład miejsca docelowego i zastępczego miejsca docelowego.

Rysunek 2. Miejsce docelowe i obiekt zastępczy

Inne sposoby dodawania miejsc docelowych do wykresu nawigacyjnego znajdziesz w artykule Dodatkowe miejsca docelowe.

Utwórz miejsce docelowe na podstawie istniejącego fragmentu lub działania

Jeśli masz już typ miejsca docelowego, który chcesz dodać do wykresu nawigacyjnego w edytorze nawigacji, kliknij Nowe miejsce docelowe .

Następnie w wyświetlonym menu kliknij odpowiednie miejsce docelowe. Możesz teraz zobaczyć podgląd miejsca docelowego w widoku Projekt wraz z odpowiednim kodem XML w widoku Text (Tekst) na wykresie nawigacyjnym.

Utwórz nowe miejsce docelowe fragmentu

Aby dodać nowy typ miejsca docelowego za pomocą edytora nawigacji:

  1. W edytorze nawigacji kliknij ikonę Nowe miejsce docelowe .

    Następnie kliknij Utwórz nowe miejsce docelowe.

  2. W wyświetlonym oknie Nowy komponent Androida utwórz fragment.

Zwróć uwagę, że w edytorze nawigacji Android Studio dodał do wykresu to miejsce docelowe.

Rysunek 3 przedstawia przykład miejsca docelowego i zastępczego miejsca docelowego.

Rysunek 3. Miejsce docelowe i obiekt zastępczy

Anatomia miejsca docelowego

Kliknij miejsce docelowe, by je wybrać, i w panelu Atrybuty zwróć uwagę na te atrybuty:

  • Pole Typ wskazuje, czy miejsce docelowe jest zaimplementowane w kodzie źródłowym jako fragment, aktywność lub inna klasa niestandardowa.
  • Pole Etykieta zawiera zrozumiałą dla użytkownika nazwę miejsca docelowego. Ta informacja może pojawić się w interfejsie, na przykład wtedy, gdy połączysz NavGraph z Toolbar za pomocą setupWithNavController(). Z tego powodu dla tej wartości użyj ciągów zasobów.
  • Pole ID zawiera identyfikator miejsca docelowego, który służy do odwoływania się do miejsca docelowego w kodzie.
  • W menu Klasa wyświetla się nazwa klasy, która jest powiązana z miejscem docelowym. Kliknij to menu, aby zmienić powiązaną klasę na inny typ miejsca docelowego.

Kliknij kartę Tekst, by wyświetlić widok XML wykresu nawigacyjnego. Plik XML zawiera te same atrybuty id, name, label i layout miejsca docelowego, jak w tym fragmencie:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:startDestination="@id/blankFragment">
    <fragment
        android:id="@+id/blankFragment"
        android:name="com.example.cashdog.cashdog.BlankFragment"
        android:label="@string/label_blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

Możesz też użyć edytora układu, aby dodać NavHostFragment do działania, wykonując te czynności:

  1. Na liście plików projektu kliknij dwukrotnie plik XML układu aktywności, aby otworzyć go w edytorze układu.
  2. W panelu Palette wybierz kategorię Kontenery. Możesz też wyszukać „NavHostFragment”.
  3. Przeciągnij widok NavHostFragment na aktywność.
  4. W wyświetlonym oknie Wykresy nawigacyjne wybierz odpowiedni wykres nawigacyjny, który chcesz powiązać z tym elementem typu NavHostFragment, a następnie kliknij OK.

Połącz miejsca docelowe

Działanie to logiczne połączenie między miejscami docelowymi. Działania są przedstawione na wykresie nawigacyjnym jako strzałki. Działania zwykle łączą jedno miejsce docelowe z innym. Możesz jednak tworzyć działania globalne, które prowadzą do danego miejsca docelowego z dowolnego miejsca w aplikacji.

Działania reprezentują różne ścieżki, którymi użytkownicy mogą się poruszać w Twojej aplikacji. Pamiętaj, że aby rzeczywiście przejść do miejsc docelowych, musisz napisać kod do nawigacji.

Za pomocą edytora nawigacji możesz połączyć dwa miejsca docelowe, wykonując te czynności:

  1. Na karcie Projekt najedź kursorem na prawą stronę miejsca docelowego, z którego mają przechodzić użytkownicy. Po prawej stronie miejsca docelowego pojawi się okrąg, tak jak na ilustracji 4.

    Rysunek 4. Miejsce docelowe z okręgiem połączenia do działania

  2. Przeciągnij kursor nad miejsce docelowe, do którego mają przechodzić użytkownicy, i zwolnij miejsce. Linia wynikowa między dwoma miejscami docelowymi przedstawia działanie, jak widać na ilustracji 5.

    Rysunek 5. Łączenie miejsc docelowych za pomocą działania

  3. Kliknij strzałkę, aby wyróżnić działanie. W panelu Atrybuty widoczne są te atrybuty:

    • Pole Type (Typ) zawiera wartość „Action” (Działanie).
    • Pole ID zawiera identyfikator działania.
    • Pole Miejsce docelowe zawiera identyfikator aktywności lub fragmentu miejsca docelowego.

  4. Kliknij kartę Tekst, by przełączyć się na widok XML. Element działania jest teraz dodany do źródłowego miejsca docelowego. Działanie ma identyfikator i atrybut miejsce docelowe zawierające identyfikator następnego miejsca docelowego, jak widać w tym przykładzie:

    <?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:android="http://schemas.android.com/apk/res/android"
   app:startDestination="@id/blankFragment">
   <fragment
       android:id="@+id/blankFragment"
       android:name="com.example.cashdog.cashdog.BlankFragment"
       android:label="@string/label_blank"
       tools:layout="@layout/fragment_blank" >
       <action
           android:id="@+id/action_blankFragment_to_blankFragment2"
           app:destination="@id/blankFragment2" />
   </fragment>
   <fragment
       android:id="@+id/blankFragment2"
       android:name="com.example.cashdog.cashdog.BlankFragment2"
       android:label="@string/label_blank_2"
       tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

Działania na wykresie nawigacyjnym są reprezentowane przez elementy <action>. Działanie zawiera co najmniej własny identyfikator oraz identyfikator miejsca docelowego, do którego ma zostać przekierowany użytkownik.

Zastępcze miejsca docelowe

Do reprezentowania niezaimplementowanych miejsc docelowych możesz używać zmiennych. Obiekt zastępczy służy jako wizualna reprezentacja miejsca docelowego. W Edytorze nawigacji możesz używać symboli zastępczych tak samo jak w przypadku innych miejsc docelowych.