Navigationseditor

Android Studio enthält ein GUI, mit dem Sie ein Navigationsdiagramm erstellen und bearbeiten können. Dies ist im Wesentlichen ein Editor für die zugrunde liegende XML-Ressourcendatei.

Übersicht

Nachdem Sie Ihrer App eine XML-Grafik hinzugefügt haben, öffnet Android Studio die Grafik in den Navigationseditor Im Navigationseditor können Sie oder die zugrunde liegende XML direkt bearbeiten.

<ph type="x-smartling-placeholder">
</ph>
Abbildung 1. Der Navigationseditor
<ph type="x-smartling-placeholder">
    </ph>
  1. Bereich „Ziele“: Hier werden Ihr Navigationshost und alle Ziele aufgelistet. Grafikeditor hinzu.
  2. Grafikeditor: enthält eine visuelle Darstellung Ihrer Navigation Diagramm. Sie können zwischen der Designansicht und der Ansicht zugrunde liegende XML-Darstellung in der Ansicht Text.
  3. Attribute: Zeigt Attribute für das ausgewählte Element in der Navigationsdiagramm.

Klicke auf den Tab Text, um den entsprechenden XML-Code aufzurufen. Dieser sollte ähnlich aussehen. in das folgende Snippet ein:

<?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. Beim Hinzufügen und die Verbindung von Aktionen mit der Grafik verbinden, können Sie die entsprechenden <destination>- und <action>-Elemente hier als untergeordnete Elemente. Wenn Sie verschachtelten Grafiken als untergeordnete <navigation>-Elemente.

Reiseziele hinzufügen

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

In diesem Beispiel wird gezeigt, wie Sie ein neues Ziel erstellen. So fügen Sie ein neues mit dem Navigations-Editor erstellen, gehen Sie so vor:

  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 in der Fragmentübersicht.

Sie sehen nun, dass Android Studio diese Ziel hinzu.

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

<ph type="x-smartling-placeholder">
</ph>
Abbildung 2. Ein Ziel und ein Platzhalter

Weitere Möglichkeiten zum Hinzufügen von Zielen zur Navigationsgrafik finden Sie unter Zusätzliche Ziele.

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

Wenn Sie im Navigationseditor bereits einen Zieltyp haben, den Sie die Sie Ihrer Navigationsgrafik hinzufügen möchten, klicken Sie auf Neues Ziel .

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

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.

Sie sehen nun, dass Android Studio diese Ziel hinzu.

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

<ph type="x-smartling-placeholder">
</ph>
Abbildung 3. Ein Ziel und ein Platzhalter

Anatomie eines Ziels

Klicken Sie auf ein Ziel, um es auszuwählen. Beachten Sie die folgenden Attribute in der Bereich Attribute:

  • Das Feld Type gibt an, ob das Ziel als Fragment, Aktivität oder einer anderen benutzerdefinierten Klasse im Quellcode enthalten.
  • Das Feld Label enthält den vom Nutzer lesbaren Namen des Ziels. Dieses kann in der Benutzeroberfläche angezeigt werden, z. B. wenn Sie den NavGraph verbinden. mithilfe von setupWithNavController() zu Toolbar. Verwenden Sie daher Ressourcenstrings für diesen Wert.
  • Das Feld ID enthält die Ziel-ID, die für den Verweis auf die Ziel im Code ein.
  • Das Drop-down-Menü Kurs enthält den Namen der Klasse, die verknüpft ist mit das Ziel. Klicken Sie auf dieses Drop-down-Menü, um den verknüpften Kurs in einen anderen Zieltyp haben.

Klicken Sie auf den Tab Text, um die XML-Ansicht der Navigationsgrafik aufzurufen. Die XML-Datei enthält dieselben Attribute id, name, label und layout für die 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>

Sie können auch den Layout-Editor verwenden, um einem NavHostFragment-Element der Aktivität ausführen. Gehen Sie dazu so vor:

  1. Doppelklicken Sie in Ihrer Liste der Projektdateien auf die Layout-XML-Datei Ihrer Aktivität. -Datei, um sie im Layout-Editor zu öffnen.
  2. Wählen Sie im Bereich Palette die Kategorie Container aus. Suchen Sie alternativ nach "NavHostFragment".
  3. Ziehen Sie die Ansicht „NavHostFragment“ auf Ihre Aktivität.
  4. Das Dialogfeld Navigationsgrafiken wird angezeigt. Wählen Sie hier die entsprechenden Navigationsdiagramm, das mit dieser NavHostFragment verknüpft werden soll, und Klicken Sie dann auf OK.

Ziele verbinden

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

Mit Aktionen stellen Sie die verschiedenen Pfade dar, die Nutzer nehmen können. über Ihre App. Für die Navigation zu den Zielen müssen Sie den Code für die Navigation zu schreiben.

Mit dem Navigationseditor können Sie zwei Ziele verbinden, indem Sie die Folgendes:

  1. Halten Sie auf dem Tab Design den Mauszeiger über die rechte Seite des Ziel, von dem aus die Nutzer navigieren sollen. Über dem Bild erscheint ein Kreis. wie in Abbildung 4 dargestellt.

    <ph type="x-smartling-placeholder">
    </ph>
    Abbildung 4. Ein Ziel mit einer Aktionsverbindung Kreis

  2. Bewegen Sie den Cursor über das Ziel, zu dem Nutzer navigieren sollen, und Veröffentlichung. Die resultierende Linie zwischen den beiden Zielen repräsentiert eine wie in Abbildung 5 dargestellt.

    <ph type="x-smartling-placeholder">
    </ph>
    Abbildung 5. Ziele mit einer Aktion verbinden

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

    • Das Feld Typ enthält „Aktion“.
    • Das Feld ID enthält die ID für die Aktion.
    • Das Feld Destination (Ziel) enthält die ID für das Zielfragment. oder Aktivitäten.

  4. Klicken Sie auf den Tab Text, um zur XML-Ansicht zu wechseln. Ein Aktionselement ist jetzt die dem Quellziel hinzugefügt wurden. Die Aktion hat eine ID und ein Ziel das die ID des nächsten Ziels enthält, wie in den folgendes Beispiel:

    <?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. Bei verfügt eine Aktion über ihre eigene ID und die ID des Ziels, an das ein die Nutzenden durchgeführt werden sollen.

Platzhalterziele

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