Navigationseditor

Android Studio enthält eine grafische Benutzeroberfläche, mit der Sie eine Navigationsgrafik erstellen und bearbeiten können. Dies ist im Wesentlichen ein Editor für die zugrunde liegende XML-Ressourcendatei.

Übersicht

Nachdem Sie Ihrer App ein XML-Diagramm hinzugefügt haben, wird es von Android Studio im Navigationseditor geöffnet. Im Navigationseditor können Sie Navigationsdiagramme visuell oder direkt den zugrunde liegenden XML-Code bearbeiten.

Abbildung 1. Navigationseditor
  1. Bereich "Ziele": Listet Ihren Navigationshost und alle Ziele im Grafikeditor auf.
  2. Grafikeditor: Enthält eine visuelle Darstellung des Navigationsdiagramms. Sie können zwischen der Designansicht und der zugrunde liegenden XML-Darstellung in der Textansicht wechseln.
  3. Attribute: Zeigt Attribute für das ausgewählte Element im Navigationsdiagramm an.

Klicken Sie auf den Tab Text, um den entsprechenden XML-Code zu sehen. Er sollte dem folgenden Snippet ähneln:

<?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>

Das <navigation>-Element ist das Stammelement eines Navigationsdiagramms. Wenn Sie Ihrem Diagramm Ziele und Verbindungsaktionen hinzufügen, werden die entsprechenden <destination>- und <action>-Elemente hier als untergeordnete Elemente angezeigt. verschachtelte Diagramme werden als untergeordnete <navigation>-Elemente angezeigt.

Ziele hinzufügen

Sie können ein Ziel aus einem vorhandenen Fragment oder einer vorhandenen Aktivität erstellen. Sie können mit dem Navigationseditor auch ein neues Ziel oder einen Platzhalter erstellen, der später durch ein Fragment oder eine Aktivität ersetzt wird.

In diesem Beispiel wird gezeigt, wie Sie ein neues Ziel erstellen. So fügen Sie mit dem Navigationseditor ein neues Ziel hinzu:

  1. Klicken Sie im Navigationseditor auf das Symbol Neues Ziel und dann auf Neues Ziel erstellen.
  2. Erstellen Sie im Dialogfeld Neue Android-Komponente das Fragment. Weitere Informationen zu Fragmenten finden Sie in der Übersicht zu Fragmenten.

Wie Sie im Navigationseditor sehen, wurde dieses Ziel in Android Studio zur Grafik hinzugefügt.

Abbildung 2 zeigt ein Beispiel für ein Ziel und ein Platzhalterziel.

Abbildung 2. Ein Ziel und ein Platzhalter

Weitere Möglichkeiten, der Navigationsgrafik Ziele hinzuzufügen, finden Sie unter Zusätzliche Ziele.

Ziel aus einem vorhandenen Fragment oder einer vorhandenen Aktivität erstellen

Wenn Sie im Navigationseditor einen vorhandenen Zieltyp in die Navigationsgrafik aufnehmen möchten, klicken Sie auf Neues Ziel .

Klicken Sie dann im Drop-down-Menü auf das entsprechende Ziel. Sie können jetzt in der Designansicht eine Vorschau des Ziels zusammen mit der entsprechenden XML-Datei in der Text-Ansicht des Navigationsdiagramms sehen.

Neues Fragmentziel erstellen

So fügen Sie mit dem Navigationseditor einen neuen Zieltyp hinzu:

  1. Klicken Sie im Navigationseditor auf das Symbol Neues Ziel .

    Klicken Sie dann auf Neues Ziel erstellen.

  2. Erstellen Sie im Dialogfeld Neue Android-Komponente das Fragment.

Wie Sie im Navigationseditor sehen, wurde dieses Ziel in Android Studio zur Grafik hinzugefügt.

Abbildung 3 zeigt ein Beispiel für ein Ziel und ein Platzhalterziel.

Abbildung 3. Ein Ziel und ein Platzhalter

Anatomie eines Ziels

Klicken Sie auf ein Ziel, um es auszuwählen. Notieren Sie sich die folgenden Attribute im Bereich Attribute:

  • Im Feld Typ wird angegeben, ob das Ziel als Fragment, als Aktivität oder als andere benutzerdefinierte Klasse im Quellcode implementiert wird.
  • Das Feld Label enthält den für Nutzer lesbaren Namen des Ziels. Dies kann in der Benutzeroberfläche angezeigt werden, z. B. wenn Sie NavGraph mithilfe von setupWithNavController() mit einer Toolbar verbinden. Verwenden Sie daher für diesen Wert Ressourcenstrings.
  • Das Feld ID enthält die Ziel-ID, mit der im Code auf das Ziel verwiesen wird.
  • Im Drop-down-Menü Klasse wird der Name der Klasse angezeigt, die dem Ziel zugeordnet ist. Klicken Sie auf dieses Drop-down-Menü, um die zugehörige Klasse in einen anderen Zieltyp zu ändern.

Klicken Sie auf den Tab Text, um die XML-Ansicht Ihrer Navigationsgrafik anzuzeigen. Die XML-Datei enthält dieselben id-, name-, label- und layout-Attribute für das Ziel, wie im folgenden Snippet gezeigt:

<?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>

Sie können auch den Layout-Editor verwenden, um einer Aktivität eine NavHostFragment hinzuzufügen. Gehen Sie dazu so vor:

  1. Doppelklicken Sie in der Liste der Projektdateien auf die Layout-XML-Datei Ihrer Aktivität, um sie im Layout-Editor zu öffnen.
  2. Wählen Sie im Bereich Palette die Kategorie Container aus oder suchen Sie nach "NavHostFragment".
  3. Ziehen Sie die Ansicht NavHostFragment auf Ihre Aktivität.
  4. Wählen Sie im angezeigten Dialogfeld Navigationsgrafiken die entsprechende Navigationsgrafik aus, die mit diesem NavHostFragment verknüpft werden soll, und klicken Sie dann auf OK.

Ziele verbinden

Eine Aktion ist eine logische Verbindung zwischen Zielen. Aktionen werden im Navigationsdiagramm als Pfeile dargestellt. Aktionen verbinden in der Regel ein Ziel mit einem anderen. Sie können jedoch auch globale Aktionen erstellen, die Sie von überall in Ihrer App zu einem bestimmten Ziel führen.

Mit Aktionen stellen Sie die verschiedenen Pfade dar, die Nutzer durch Ihre Anwendung gehen können. Wenn Sie tatsächlich zu Zielen navigieren möchten, müssen Sie den Code für die Navigation schreiben.

Mit dem Navigationseditor können Sie zwei Ziele verbinden. Gehen Sie dazu so vor:

  1. Halten Sie auf dem Tab Design den Mauszeiger auf die rechte Seite des Ziels, von dem aus Nutzer navigieren sollen. Auf der rechten Seite des Ziels erscheint ein Kreis (siehe Abbildung 4).

    Abbildung 4. Ein Ziel mit einem Kreis für Aktionsverbindungen

  2. Ziehen Sie den Cursor über das Ziel, zu dem Nutzer navigieren sollen, und lassen Sie die Maustaste los. Die resultierende Linie zwischen den beiden Zielen stellt eine Aktion dar (siehe Abbildung 5).

    Abbildung 5. Ziele mit einer Aktion verknüpfen

  3. Klicken Sie auf den Pfeil, um die Aktion zu markieren. Die folgenden Attribute werden im Bereich Attribute angezeigt:

    • Das Feld Typ enthält „Aktion“.
    • Das Feld ID enthält die ID für die Aktion.
    • Das Feld Ziel enthält die ID des Zielfragments oder der Zielaktivität.

  4. Klicken Sie auf den Tab Text, um zur XML-Ansicht zu wechseln. Jetzt wird dem Quellziel ein Aktionselement hinzugefügt. Die Aktion hat eine ID und ein Zielattribut, das die ID des nächsten Ziels enthält, wie im folgenden Beispiel gezeigt:

    <?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>

Im Navigationsdiagramm werden Aktionen durch <action>-Elemente dargestellt. Eine Aktion enthält mindestens eine eigene ID und die ID des Ziels, zu dem ein Nutzer weitergeleitet werden soll.

Platzhalterziele

Sie können Platzhalter verwenden, um nicht implementierte Ziele darzustellen. Ein Platzhalter dient als visuelle Darstellung eines Ziels. Im Navigationseditor können Sie Platzhalter wie jedes andere Ziel verwenden.