Navigationseditor

Android Studio enthält eine grafische Benutzeroberfläche, mit der Sie einen Navigationsgraphen erstellen und bearbeiten können. Im Grunde ist das ein Editor für die zugrunde liegende XML-Ressourcendatei.

Übersicht

Nachdem Sie Ihrer App einen XML-Graphen hinzugefügt haben, wird er in Android Studio im Navigationseditor geöffnet. Dort können Sie Navigationsgraphen visuell bearbeiten oder die zugrunde liegende XML-Datei direkt bearbeiten.

1. Bereich „Ziele“: Hier sind der Navigationshost und alle Ziele im Grapheneditor aufgeführt.
2. Grapheneditor: Enthält eine visuelle Darstellung Ihres Navigations graphen. Sie können zwischen der Designansicht und der zugrunde liegenden XML-Darstellung in der Textansicht wechseln.
3. Attribute: Hier werden die Attribute für das ausgewählte Element im Navigationsgraphen angezeigt.

Klicken Sie auf den Tab Text , um die entsprechende XML-Datei zu sehen, die dem folgenden Snippet ähneln sollte:

<?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 Navigationsgraphen. Wenn Sie Ihrem Graphen Ziele und Verbindungsaktionen hinzufügen, sehen Sie hier die entsprechenden <destination> und <action> Elemente als untergeordnete Elemente. Bei verschachtelten Graphen werden sie 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 angezeigten Dialogfeld Neue Android-Komponente Ihr Fragment. Weitere Informationen zu Fragmenten finden Sie unter der Fragmente – Übersicht.

Zurück im Navigationseditor sehen Sie, dass Android Studio dieses Ziel dem Graphen hinzugefügt hat.

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

Weitere Informationen zum Hinzufügen von Zielen zu Ihrem Navigationsgraphen finden Sie unter Zusätzliche Ziele.

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

Wenn Sie im Navigationseditor einen vorhandenen Zieltyp haben, den Sie Ihrem Navigationsgraphen hinzufügen möchten, klicken Sie auf Neues Ziel .

Klicken Sie dann im Drop-down-Menü auf das entsprechende Ziel. Sie sehen jetzt eine Vorschau des Ziels in der Designansicht sowie die entsprechende XML-Datei in der Textansicht Ihres Navigationsgraphen.

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 angezeigten Dialogfeld Neue Android-Komponente Ihr Fragment.

Zurück im Navigationseditor sehen Sie, dass Android Studio dieses Ziel dem Graphen hinzugefügt hat.

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

Anatomie eines Ziels

Klicken Sie auf ein Ziel, um es auszuwählen, und beachten Sie die folgenden Attribute im Bereich Attribute:

• Das Feld Typ gibt an, ob das Ziel in Ihrem Quellcode als Fragment, Aktivität oder andere benutzerdefinierte Klasse implementiert ist.
• Das Feld Label enthält den für Nutzer lesbaren Namen des Ziels. Dieser Name kann in der Benutzeroberfläche angezeigt werden, z. B. wenn Sie NavGraph mit einer Toolbar verbinden, indem Sie setupWithNavController() verwenden. Verwenden Sie daher Ressourcenstrings für diesen Wert.
• 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 mit dem Ziel verknüpft ist. Klicken Sie auf dieses Drop-down-Menü, um die verknüpfte Klasse in einen anderen Zieltyp zu ändern.

Klicken Sie auf den Tab Text , um die XML-Ansicht Ihres Navigationsgraphen aufzurufen. Die XML-Datei enthält die gleichen Attribute id, name, label und layout für das Ziel wie im folgenden Snippet:

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

NavHostFragment

Sie können mit dem Layout Editor auch einer Aktivität ein NavHostFragment hinzufü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 Navigationsgraphen den entsprechenden Navigationsgraphen aus, der 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 Navigationsgraphen als Pfeile dargestellt. Aktionen verbinden in der Regel ein Ziel mit einem anderen. Sie können aber auch globale Aktionen erstellen, mit denen Sie von überall in Ihrer App zu einem bestimmten Ziel gelangen.

Mit Aktionen stellen Sie die verschiedenen Pfade dar, die Nutzer in Ihrer App nehmen können. Damit Nutzer tatsächlich zu Zielen navigieren können, müssen Sie den Code für die Navigation schreiben.

So verbinden Sie mit dem Navigationseditor zwei Ziele:

1. Bewegen Sie den Mauszeiger auf dem Tab Design auf die rechte Seite des Ziels, von dem aus Nutzer navigieren sollen. Rechts neben dem Ziel wird ein Kreis angezeigt, wie in Abbildung 4 dargestellt.

   

2. Ziehen Sie den Mauszeiger auf das Ziel, zu dem Nutzer navigieren sollen, und lassen Sie die Maustaste los. Die resultierende Linie zwischen den beiden Zielen stellt eine Aktion dar, wie in Abbildung 5 gezeigt.

   

3. Klicken Sie auf den Pfeil, um die Aktion hervorzuheben. 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 für das Zielfragment oder die Zielaktivität.

4. Klicken Sie auf den Tab Text , um zur XML-Ansicht zu wechseln. Dem Quellziel wird jetzt 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 <?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>

In Ihrem Navigationsgraphen 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.