Grundlagen von Android und Kotlin 03.1: Fragment erstellen

Dieses Codelab ist Teil des Kurses „Grundlagen von Android und Kotlin“. Sie können diesen Kurs am besten nutzen, wenn Sie die Codelabs der Reihe nach durcharbeiten. Alle Codelabs des Kurses sind auf der Landingpage für Codelabs zu den Grundlagen von Android und Kotlin aufgeführt.

In diesem Codelab erfahren Sie mehr über Fragmente und erstellen ein Fragment in einer Starter-App namens „AndroidTrivia“. Im nächsten Codelab erfahren Sie mehr über die Navigation und arbeiten weiter an der AndroidTrivia-App.

Was Sie bereits wissen sollten

  • Grundlagen von Kotlin
  • Grundlegende Android-Apps in Kotlin erstellen
  • Mit Layouts arbeiten

Lerninhalte

  • Fragment statisch in Ihre App einfügen

Aufgaben

  • Fragment in einer Aktivität erstellen

In den drei Codelabs, aus denen diese Lektion besteht, arbeiten Sie an einer App namens „AndroidTrivia“. Die fertige App ist ein Spiel, in dem der Nutzer drei Quizfragen zur Android-Programmierung beantwortet. Wenn der Nutzer alle drei Fragen richtig beantwortet, gewinnt er das Spiel und kann seine Ergebnisse teilen.

Die AndroidTrivia-App veranschaulicht Navigationsmuster und ‑steuerelemente. Die App hat mehrere Komponenten:

  • Auf dem Titelbildschirm, der im Screenshot oben links zu sehen ist, startet der Nutzer das Spiel.
  • Auf dem Spielbildschirm mit Fragen, der oben in der Mitte zu sehen ist, spielt der Nutzer das Spiel und sendet seine Antworten.
  • Die Navigationsleiste, die oben rechts zu sehen ist, wird seitlich in der App eingeblendet und enthält ein Menü mit einer Kopfzeile. Über das Leistensymbol  wird die Navigationsleiste geöffnet. Das Navigationsmenü enthält einen Link zur Seite „Über“ und einen Link zu den Spielregeln.

Oben in der App wird eine farbige Ansicht angezeigt, die als App-Leiste oder Aktionsleiste bezeichnet wird.

In diesem Codelab arbeiten Sie mit einer Starter-App, die Vorlagencode und Fragmentklassen enthält, die Sie zum Vervollständigen der Trivia-App benötigen.

  1. Laden Sie das Android Studio-Projekt AndroidTrivia-Starter herunter.
  2. Öffnen Sie das Projekt in Android Studio und führen Sie die App aus. Wenn die App geöffnet wird, wird nur der App-Name und ein leerer Bildschirm angezeigt.


  3. Öffnen Sie im Bereich „Projekt“ von Android Studio die Ansicht „Projekt: Android“, um die Projektdateien aufzurufen. Öffnen Sie den Ordner app > java, um die Klassen MainActivity und die Fragmentklassen aufzurufen.

  4. Öffnen Sie den Ordner res > layout und doppelklicken Sie auf activity_main.xml. Die Datei activity_main.xml wird im Layout-Editor angezeigt.
  5. Klicken Sie auf den Tab Design. Der Komponentenbaum für die Datei activity_main.xml zeigt das Root-Layout als vertikales LinearLayout.



    In einem vertikalen linearen Layout werden alle untergeordneten Ansichten im Layout vertikal ausgerichtet.

Ein Fragment stellt eine Funktionsweise oder einen Teil der Benutzeroberfläche (UI) in einer Aktivität dar. Sie können mehrere Fragmente in einer einzigen Aktivität kombinieren, um eine UI mit mehreren Bereichen zu erstellen, und ein Fragment in mehreren Aktivitäten wiederverwenden.

Stellen Sie sich ein Fragment als modularen Abschnitt einer Aktivität vor, also als eine Art „Unteraktivität“, die Sie auch in anderen Aktivitäten verwenden können:

  • Ein Fragment hat einen eigenen Lebenszyklus und empfängt eigene Eingabeereignisse.
  • Sie können ein Fragment hinzufügen oder entfernen, während die Aktivität ausgeführt wird.
  • Ein Fragment wird in einer Kotlin-Klasse definiert.
  • Die Benutzeroberfläche eines Fragments wird in einer XML-Layoutdatei definiert.

Die AndroidTrivia-App hat eine Hauptaktivität und mehrere Fragmente. Die meisten Fragmente und ihre Layoutdateien wurden für Sie definiert. In dieser Aufgabe erstellen Sie ein Fragment und fügen es der Hauptaktivität der App hinzu.

Schritt 1: Fragmentklasse hinzufügen

In diesem Schritt erstellen Sie eine leere TitleFragment-Klasse. Erstellen Sie zuerst eine Kotlin-Klasse für ein neues Fragment:

  1. Klicken Sie in Android Studio auf eine beliebige Stelle im Bereich „Projekt“, um den Fokus wieder auf die Projektdateien zu richten. Klicken Sie beispielsweise auf den Ordner com.example.android.navigation.
  2. Wählen Sie File > New > Fragment > Fragment (Blank) (Datei > Neu > Fragment > Fragment (Leer)) aus.
  3. Verwenden Sie TitleFragment als Fragmentname. Entfernen Sie die Häkchen aus allen Kästchen, einschließlich Layout-XML erstellen, Fragment-Factory-Methoden einfügen und Interface-Callbacks einfügen.
  4. Klicken Sie auf Fertig.
  5. Öffnen Sie die Fragmentdatei TitleFragment.kt, falls sie noch nicht geöffnet ist. Sie enthält die Methode onCreateView(), die eine der Methoden ist, die während des Lebenszyklus eines Fragments aufgerufen wird.
  6. Entfernen Sie in onCreateView() den Abschnitt return TextView(activity).apply, einschließlich der Zeile, die mit setText beginnt. Die Funktion onCreateView() enthält nur noch den folgenden Code:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Bindungsobjekt erstellen

Das Fragment wird jetzt nicht kompiliert. Damit das Fragment kompiliert werden kann, müssen Sie ein Binding-Objekt erstellen und die Ansicht des Fragments aufblasen (was der Verwendung von setContentView() für eine Aktivität entspricht).

  1. Erstellen Sie in der Methode onCreateView() in TitleFragment.kt eine binding-Variable (val binding).
  2. Rufen Sie die Methode DataBindingUtil.inflate() für das Binding-Objekt des Fragments auf, das FragmentTitleBinding ist, um die Ansicht des Fragments zu rendern.

    Übergeben Sie vier Parameter an die Methode:
  • inflater, das LayoutInflater zum Aufblähen des Bindungslayouts.
  • Die XML-Layoutressource des zu instanziierenden Layouts. Verwenden Sie eines der Layouts, die bereits für Sie definiert sind, R.layout.fragment_title.
  • container für das übergeordnete ViewGroup. Dieser Parameter ist optional.
  • false für den Wert attachToParent.
  1. Weisen Sie die Bindung, die von DataBindingUtil.inflate zurückgegeben wird, der Variablen binding zu.
  2. Geben Sie binding.root aus der Methode zurück, die die aufgeblähte Ansicht enthält. Ihre onCreateView()-Methode sieht jetzt so aus:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

Schritt 2: Neues Fragment zur Hauptlayoutdatei hinzufügen

In diesem Schritt fügen Sie der Layoutdatei activity_main.xml der App TitleFragment hinzu.

  1. Öffnen Sie res > layout > activity_main.xml und klicken Sie auf den Tab Text, um den XML-Code des Layouts aufzurufen.
  2. Fügen Sie im vorhandenen LinearLayout-Element ein fragment-Element hinzu.
  3. Legen Sie die ID des Fragments auf titleFragment fest.
  4. Legen Sie den Namen des Fragments auf den vollständigen Pfad der Fragmentklasse fest, in diesem Fall com.example.android.navigation.TitleFragment.
  5. Legen Sie die Breite und Höhe des Layouts auf match_parent fest.
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>
  1. Führen Sie die App aus. Das Fragment wurde Ihrem Hauptbildschirm hinzugefügt.

Android Studio-Projekt: AndroidTriviaFragment

In diesem Codelab haben Sie der AndroidTrivia-App ein Fragment hinzugefügt. In den nächsten beiden Codelabs in dieser Lektion werden Sie weiter daran arbeiten.

  • Ein Fragment ist ein modularer Abschnitt einer Aktivität.
  • Ein Fragment hat einen eigenen Lebenszyklus und empfängt eigene Eingabeereignisse.
  • Verwenden Sie das Tag <fragment>, um das Layout für das Fragment in der XML-Layoutdatei zu definieren.
  • Das Layout für ein Fragment in onCreateView() wird aufgebläht.
  • Sie können ein Fragment hinzufügen oder entfernen, während die Aktivität ausgeführt wird.

Udacity-Kurs:

Android-Entwicklerdokumentation:

In diesem Abschnitt werden mögliche Hausaufgaben für Schüler und Studenten aufgeführt, die dieses Codelab im Rahmen eines von einem Kursleiter geleiteten Kurses durcharbeiten. Es liegt in der Verantwortung des Kursleiters, Folgendes zu tun:

  • Weisen Sie bei Bedarf Aufgaben zu.
  • Teilen Sie den Schülern/Studenten mit, wie sie Hausaufgaben abgeben können.
  • Benoten Sie die Hausaufgaben.

Lehrkräfte können diese Vorschläge nach Belieben nutzen und auch andere Hausaufgaben zuweisen, die sie für angemessen halten.

Wenn Sie dieses Codelab selbst durcharbeiten, können Sie mit diesen Hausaufgaben Ihr Wissen testen.

Beantworten Sie diese Fragen

Frage 1

Was sind einige der Unterschiede zwischen Fragmenten und Aktivitäten? Wählen Sie alle zutreffenden Aussagen aus.

  • Wenn Sie ein Fragment erstellen, blähen Sie das Layout in der Methode onCreateView() auf. Wenn Sie eine Aktivität erstellen, blähen Sie das Layout in onCreate() auf.
  • Eine Aktivität hat ihr eigenes Layout, ein Fragment jedoch nicht.
  • Eine Aktivität hat einen eigenen Lebenszyklus, ein Fragment jedoch nicht.
  • Wenn Sie das Layout für ein Fragment oder eine Aktivität aufblasen, können Sie auf das Layout als R.layout.layoutname verweisen.

Frage 2

Welche der folgenden Aussagen zu Fragmenten sind richtig? Wähle alle zutreffenden Antworten aus.

  • Sie können ein Fragment in mehreren Aktivitäten verwenden.
  • Eine Aktivität kann mehrere Fragmente haben.
  • Nachdem Sie ein Fragment in einer Kotlin-Klasse definiert haben, wird es automatisch der Layoutdatei activity_main.xml hinzugefügt.
  • Mit dem Tag <fragment> wird der Ort in einer Layoutdatei definiert, an dem ein Fragment eingefügt werden soll.

Nächste Lektion starten: 3.2 Navigationspfade definieren

Links zu anderen Codelabs in diesem Kurs finden Sie auf der Landingpage für Android Kotlin Fundamentals-Codelabs.