Android Kotlin Fundamentals 03.1: Fragment erstellen

Dieses Codelab ist Teil des Android Kotlin Fundamentals-Kurss. Sie profitieren von diesem Kurs, wenn Sie nacheinander die Codelabs durcharbeiten. Alle Kurs-Codelabs finden Sie auf der Landingpage für Kotlin-Grundlagen für Android-Entwickler.

In diesem Codelab erfährst du mehr über Fragmente und erstellst in einer Start-App mit dem Namen AndroidTrivia ein Fragment. Im nächsten Codelab erfährst du mehr über die Navigation und kannst die AndroidTrivia-App weiter verwenden.

Was Sie bereits wissen sollten

  • Kotlin
  • Einfache Android-Apps in Kotlin erstellen
  • Mit Layouts arbeiten

Lerninhalte

  • Fragment zur Anwendung statisch hinzufügen

Aufgaben

  • Erstelle ein Fragment in einer Aktivität.

In den drei Codelabs, die in dieser Lektion enthalten sind, arbeiten Sie an der App „AndroidTrivia“. Die abgeschlossene App ist ein Spiel, in dem der Nutzer drei Quizfragen zum Android-Programm 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 besteht aus mehreren Komponenten:

  • Auf dem Titelbildschirm, der im Screenshot oben links zu sehen ist, beginnt der Nutzer das Spiel.
  • Auf dem Bildschirm mit den Fragen, die in der Mitte oben zu sehen sind, spielt der Nutzer das Spiel und sendet seine Antworten.
  • Die Navigationsleiste rechts oben wird von der Seite der App eingeblendet. Sie enthält ein Menü mit Kopfzeile. Mit der Leiste wird die Navigationsleiste geöffnet. Das Menü der Navigationsleiste enthält einen Link zur Seite „Info“ und einen Link zu den Regeln des Spiels.

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

In diesem Codelab arbeitest du mit einer Start-App, die Vorlagencode und Fragmentklassen bereitstellt, die du beim Ausfüllen der Quiz-App benötigst.

  1. Laden Sie das Android Studio-Projekt AndroidTrivia-Starter herunter.
  2. Öffne das Projekt in Android Studio und führe die App aus. Es werden nur der App-Name und ein leerer Bildschirm angezeigt.


  3. Öffnen Sie im Bereich „Android Studio-Projekt“ die Ansicht „Projekt: Android“, um sich die Projektdateien anzusehen. Öffne den Ordner app > java, um die Klassen MainActivity und Fragmente zu sehen.

  4. Öffnen Sie den Ordner res > layout und klicken Sie doppelt auf activity_main.xml. Die Datei activity_main.xml wird im Layouteditor angezeigt.
  5. Klicken Sie auf den Tab Design. In der Baumstruktur der Datei activity_main.xml wird das Stammlayout als vertikales LinearLayout angezeigt.



    Bei einem vertikalen linearen Layout sind alle untergeordneten Ansichten vertikal ausgerichtet.

Ein Fragment repräsentiert ein Verhalten oder einen Teil der Benutzeroberfläche (UI) in einer Aktivität. Du kannst mehrere Fragmente in einer einzigen Aktivität kombinieren, um eine UI mit mehreren Fensterbereichen zu erstellen, und du kannst ein Fragment in mehreren Aktivitäten wiederverwenden.

Du kannst dir ein Fragment wie eine modulare Übung einer Aktivität vorstellen, die du auch in anderen Aktivitäten verwenden kannst:

  • Ein Fragment hat einen eigenen Lebenszyklus und erhält eigene Eingabeereignisse.
  • Sie können ein Fragment hinzufügen, während die Aktivität ausgeführt wird.
  • Ein Fragment wird in einer Kotlin-Klasse definiert.
  • Eine Benutzeroberfläche für Fragmente ist in einer XML-Layoutdatei definiert.

Die AndroidTrivia-App besteht aus einer Hauptaktivität und mehreren Fragmenten. Die meisten Fragmente und ihre Layoutdateien wurden für Sie definiert. In dieser Aufgabe erstellst du ein Fragment und fügst es dem Hauptaktivitäten der App hinzu.

Schritt 1: Fragmentklasse hinzufügen

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

  1. Klicken Sie in Android Studio auf eine beliebige Stelle im Projektbereich, damit der Fokus wieder auf die Projektdateien gerichtet wird. Klicken Sie beispielsweise auf den Ordner com.beispiel.android.navigation.
  2. Wähle Datei > Neu > Fragment > Fragment (leer) aus.
  3. Verwenden Sie NameFragment als Fragmentnamen. Entfernen Sie die Häkchen aus allen Kästchen, einschließlich Layout-XML-Datei erstellen, Fragmentfabrik-Methoden einschließen und Callbacks der Schnittstelle einschließen.
  4. Klicken Sie auf Fertig.
  5. Öffnen Sie die TitleFragment.kt-Fragmentdatei, falls sie noch nicht geöffnet ist. Sie enthält die Methode onCreateView(). Das ist eine der Methoden, die während eines Lebenszyklus von Fragmenten aufgerufen werden.
  6. Entfernen Sie in onCreateView() den Abschnitt return TextView(activity).apply, einschließlich der Zeile, die mit setText beginnt. Die Funktion onCreateView() bleibt nur noch folgender Code:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Bindungsobjekt erstellen

Das Fragment konnte nicht kompiliert werden. Um das Fragment zu kompilieren, musst du ein Bindungsobjekt erstellen und das Fragment auflaufen, was der Verwendung von setContentView() für eine Aktivität entspricht.

  1. Erstellen Sie in der onCreateView()-Methode in TitleFragment.kt eine binding-Variable (val binding).
  2. Du kannst die Fragmentansicht vergrößern, indem du die DataBindingUtil.inflate()-Methode für das Binding-Objekt aufrufst, also FragmentTitleBinding.

    Sie können vier Parameter an die Methode übergeben:
  • inflater: LayoutInflater, mit dem das Bindungslayout aufgebläht wird.
  • Die XML-Layoutressource des zu entfernenden Layouts. Verwenden Sie eines der bereits definierten Layouts: R.layout.fragment_title.
  • container für das übergeordnete Element ViewGroup. Dieser Parameter ist optional.
  • false für den Wert attachToParent.
  1. Weisen Sie die Bindung zu, die DataBindingUtil.inflate an die Variable binding zurückgibt.
  2. Geben Sie binding.root aus der Methode zurück, die die aufgeblähte Ansicht enthält. Die Methode onCreateView() 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 in die Hauptlayoutdatei einfügen

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

  1. Öffnen Sie res > Layout > activity_main.xml und klicken Sie auf den Tab Text, um den Layout-XML-Code aufzurufen.
  2. Füge im vorhandenen LinearLayout-Element ein fragment-Element hinzu.
  3. Setzt die Fragment-ID auf titleFragment.
  4. Lege den Namen des Fragments auf den vollständigen Pfad der Fragmentklasse fest. In diesem Fall ist das com.example.android.navigation.TitleFragment.
  5. Breite und Höhe des Layouts auf match_parent festlegen.
<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ühre die App aus. Das Fragment wurde deinem Hauptbildschirm hinzugefügt.

Android Studio-Projekt: AndroidTriviaFragment

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

  • Ein Fragment ist ein modularer Abschnitt einer Aktivität.
  • Ein Fragment hat einen eigenen Lebenszyklus und erhält eigene Eingabeereignisse.
  • Mit dem Tag <fragment> kannst du das Layout des Fragments in der XML-Layoutdatei definieren.
  • Mach das Layout für ein Fragment in onCreateView() auf.
  • Sie können ein Fragment hinzufügen, während die Aktivität ausgeführt wird.

Udacity-Kurs:

Android-Entwicklerdokumentation:

In diesem Abschnitt werden mögliche Hausaufgaben für Schüler oder Studenten aufgeführt, die an diesem von einem Kursleiter geleiteten Codelab arbeiten. Die Lehrkraft kann Folgendes tun:

  • Bei Bedarf können Sie die entsprechenden Aufgaben zuweisen.
  • Schülern mitteilen, wie sie Aufgaben für die Aufgabe abgeben
  • Benoten Sie die Hausaufgaben.

Lehrkräfte können diese Vorschläge so oft oder so oft verwenden, wie sie möchten. anderen Aufgaben können sie nach Belieben zugewiesen werden.

Wenn Sie alleine an diesem Codelab arbeiten, können Sie Ihr Wissen mit diesen Hausaufgaben testen.

Diese Fragen beantworten

Frage 1

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

  • Wenn du ein Fragment erstellst, kannst du das Layout in der Methode onCreateView() aufblähen. Wenn Sie eine Aktivität erstellen, erweitern Sie das Layout in onCreate().
  • Eine Aktivität hat ein eigenes Layout, ein Fragment jedoch kein eigenes Layout.
  • Eine Aktivität hat ihren eigenen Lebenszyklus, aber ein Fragment nicht.
  • Wenn du das Layout für ein Fragment oder eine Aktivität aufblasst, kannst du es als R.layout.layoutname referenzieren.

Frage 2

Welche der folgenden Aussagen zu Fragmenten ist wahr? Wählen Sie alle zutreffenden Antworten aus.

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

Mit der nächsten Lektion beginnen: 3.2 Navigationspfade definieren

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