Edytor nawigacji

Android Studio zawiera interfejs GUI, który umożliwia tworzenie i edytowanie wykresu nawigacji. Jest to w zasadzie edytor bazowego pliku zasobu XML.

Przegląd

Po dodaniu do aplikacji wykresu XML Android Studio otworzy go w Edytorze nawigacji. W edytorze nawigacji możesz wizualnie edytować wykresy nawigacji lub bezpośrednio edytować bazowy plik XML.

Rysunek 1. Edytor nawigacji
  1. Panel Miejsca docelowe: zawiera listę hosta nawigacji i wszystkich miejsc docelowych w Edytorze wykresów.
  2. Edytor wykresów: zawiera wizualizację wykresu nawigacji. Możesz przełączać się między widokiem Projekt a bazową reprezentacją XML w widoku Tekst.
  3. Atrybuty: wyświetla atrybuty wybranego elementu na wykresie nawigacji.

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 elementem głównym wykresu nawigacji. Gdy dodasz do wykresu miejsca docelowe i działania łączące, zobaczysz tutaj odpowiednie elementy <destination><action> jako elementy podrzędne. Jeśli masz [zagnieżdżone wykresy][2], pojawią się one jako elementy podrzędne <navigation>.

Dodawanie miejsc docelowych

Miejsce docelowe możesz utworzyć na podstawie istniejącego fragmentu lub działania. Możesz też użyć edytora nawigacji, aby utworzyć nowe miejsce docelowe lub utworzyć element zastępczy, który później zastąpisz 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 potem Utwórz nowe miejsce docelowe.
  2. W wyświetlonym oknie New Android Component (Nowy komponent Androida) utwórz fragment. Więcej informacji o fragmentach znajdziesz w [omówieniu fragmentów][3].

W Edytorze nawigacji zobaczysz, że Android Studio dodało to miejsce docelowe do wykresu.

Ilustracja 2 przedstawia przykład miejsca docelowego i [miejsca docelowego zastępczego][4].

Rysunek 2. Miejsce docelowe i symbol zastępczy

Inne sposoby dodawania miejsc docelowych do wykresu nawigacji znajdziesz w artykule [Dodatkowe miejsca docelowe][5].

Tworzenie miejsca docelowego na podstawie istniejącego fragmentu lub aktywności

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

Następnie w menu, które się pojawi, kliknij odpowiednie miejsce docelowe. W widoku Projekt możesz teraz zobaczyć podgląd miejsca docelowego, a w widoku Tekst – odpowiedni kod XML w grafie nawigacji.

Tworzenie nowego miejsca docelowego 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 New Android Component (Nowy komponent Androida) utwórz fragment.

W Edytorze nawigacji zobaczysz, że Android Studio dodało to miejsce docelowe do wykresu.

Ilustracja 3 przedstawia przykład miejsca docelowego i [miejsca docelowego zastępczego][2].

Rysunek 3. Miejsce docelowe i symbol zastępczy

Anatomia miejsca docelowego

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

  • Pole Typ wskazuje, czy miejsce docelowe jest zaimplementowane jako fragment, aktywność czy inna klasa niestandardowa w kodzie źródłowym.
  • Pole Etykieta zawiera nazwę miejsca docelowego, która jest czytelna dla użytkownika. Może to być widoczne w interfejsie, np. gdy połączysz [NavGraph][10] z Toolbar za pomocą [setupWithNavController()][11]. Z tego powodu używaj ciągów zasobów dla tej wartości.
  • Pole ID zawiera identyfikator miejsca docelowego, który służy do odwoływania się do niego w kodzie.
  • Menu Klasa zawiera nazwę klasy powiązanej z miejscem docelowym. Kliknij to menu rozwijane, aby zmienić powiązaną klasę na inny typ miejsca docelowego.

Kliknij kartę Tekst, aby wyświetlić widok XML wykresu nawigacji. Plik XML zawiera te same atrybuty id, name, labellayout dla miejsca docelowego, co w tym fragmencie kodu:

<?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ć [narzędzia Layout Editor][1], aby dodać NavHostFragment do Activity. W tym celu:

  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 Paleta wybierz kategorię Kontenery lub wyszukaj „NavHostFragment”.
  3. Przeciągnij widok NavHostFragment na swoją aktywność.
  4. W wyświetlonym oknie dialogowym Navigation Graphs (Wykresy nawigacji) wybierz odpowiedni wykres nawigacji, który chcesz powiązać z tym NavHostFragment, a potem kliknij OK.

Łączenie miejsc docelowych

Działanie to logiczne połączenie między miejscami docelowymi. Działania są reprezentowane na wykresie nawigacji jako strzałki. Działania zwykle łączą jedno miejsce docelowe z innym, ale możesz też utworzyć [działania globalne][6], które przenoszą Cię do określonego miejsca docelowego z dowolnego miejsca w aplikacji.

Dzięki działaniom możesz przedstawić różne ścieżki, którymi użytkownicy mogą podążać w aplikacji. Pamiętaj, że aby przejść do miejsc docelowych, musisz napisać kod, który to umożliwi.

Aby połączyć 2 miejsca docelowe, wykonaj te czynności w edytorze nawigacji:

  1. Na karcie Projekt umieść wskaźnik myszy po prawej stronie miejsca docelowego, z którego użytkownicy mają nawigować. Po prawej stronie miejsca docelowego pojawi się okrąg, jak pokazano na rysunku 4.

    Rysunek 4. Miejsce docelowe z połączeniem działania circle
  2. Przeciągnij kursor nad miejsce docelowe, do którego mają dotrzeć użytkownicy, i zwolnij przycisk. Powstała linia między dwoma miejscami docelowymi reprezentuje działanie, jak pokazano na rysunku 5.

    Rysunek 5. Łączenie miejsc docelowych z działaniem
  3. Kliknij strzałkę, aby podświetlić działanie. W panelu Atrybuty wyświetlają się te atrybuty:

    • Pole Typ zawiera wartość „Działanie”.
    • Pole Identyfikator zawiera identyfikator działania.
    • Pole Miejsce docelowe zawiera identyfikator fragmentu miejsca docelowego lub aktywności.
  4. Kliknij kartę Tekst, aby przełączyć się na widok XML. Element działania zostanie dodany do miejsca docelowego. Działanie ma identyfikator i atrybut miejsca docelowego, który zawiera identyfikator następnego miejsca docelowego, jak pokazano 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>
    

W grafie nawigacji działania są reprezentowane przez elementy <action>. Działanie zawiera co najmniej własny identyfikator i identyfikator miejsca docelowego, do którego powinien zostać przekierowany użytkownik.

Miejsca docelowe zastępcze

Do reprezentowania niezaimplementowanych miejsc docelowych możesz używać obiektów zastępczych. Obiekt zastępczy to wizualna reprezentacja miejsca docelowego. W edytorze nawigacji możesz używać obiektów zastępczych tak jak każdego innego miejsca docelowego.

[1]: /studio/write/layout-editor [2]: /guide/navigation/navigation-nested-graphs [3]: /guide/components/fragments [4]: /guide/navigation/navigation-create-destinations#placeholders [5]: /guide/navigation/navigation-create-destinations [6]: /guide/navigation/navigation-global-action [10]: /reference/androidx/navigation/NavGraph [11]: /reference/androidx/navigation/ui/NavigationUI#setupWithNavController(androidx.appcompat.widget.Toolbar,%20androidx.navigation.NavController)