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.
- Laden Sie das Android Studio-Projekt AndroidTrivia-Starter herunter.
- Ö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.
- Ö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. - Öffnen Sie den Ordner res > layout und doppelklicken Sie auf activity_main.xml. Die Datei
activity_main.xml
wird im Layout-Editor angezeigt. - Klicken Sie auf den Tab Design. Der Komponentenbaum für die Datei
activity_main.xml
zeigt das Root-Layout als vertikalesLinearLayout
.
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:
- 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.
- Wählen Sie File > New > Fragment > Fragment (Blank) (Datei > Neu > Fragment > Fragment (Leer)) aus.
- 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.
- Klicken Sie auf Fertig.
- Öffnen Sie die Fragmentdatei
TitleFragment.kt
, falls sie noch nicht geöffnet ist. Sie enthält die MethodeonCreateView()
, die eine der Methoden ist, die während des Lebenszyklus eines Fragments aufgerufen wird. - Entfernen Sie in
onCreateView()
den Abschnittreturn TextView(activity).apply
, einschließlich der Zeile, die mitsetText
beginnt. Die FunktiononCreateView()
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).
- Erstellen Sie in der Methode
onCreateView()
inTitleFragment.kt
einebinding
-Variable (val binding
). - Rufen Sie die Methode
DataBindingUtil.inflate()
für dasBinding
-Objekt des Fragments auf, dasFragmentTitleBinding
ist, um die Ansicht des Fragments zu rendern.
Übergeben Sie vier Parameter an die Methode:
inflater
, dasLayoutInflater
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 übergeordneteViewGroup
. Dieser Parameter ist optional.false
für den WertattachToParent
.
- Weisen Sie die Bindung, die von
DataBindingUtil.inflate
zurückgegeben wird, der Variablenbinding
zu. - Geben Sie
binding.root
aus der Methode zurück, die die aufgeblähte Ansicht enthält. IhreonCreateView()
-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.
- Öffnen Sie res > layout > activity_main.xml und klicken Sie auf den Tab Text, um den XML-Code des Layouts aufzurufen.
- Fügen Sie im vorhandenen
LinearLayout
-Element einfragment
-Element hinzu. - Legen Sie die ID des Fragments auf
titleFragment
fest. - Legen Sie den Namen des Fragments auf den vollständigen Pfad der Fragmentklasse fest, in diesem Fall
com.example.android.navigation.TitleFragment
. - 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>
- 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 inonCreate()
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:
Links zu anderen Codelabs in diesem Kurs finden Sie auf der Landingpage für Android Kotlin Fundamentals-Codelabs.