Grundlagen von Android und Kotlin 01.2: Grundlegende App-Anatomie

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.

Einführung

Bisher haben Sie alles eingerichtet und Android Studio hat viel Code für Sie erstellt. Bevor Sie den gesamten Code ändern, sollten Sie wissen, was Sie gerade erstellt haben und wie Sie in den Quelldateien einer Android-App navigieren.

In diesem Codelab erfahren Sie mehr über die wichtigsten Komponenten einer Android-App und fügen einer App mit einer Schaltfläche einfache Interaktivität hinzu.

Was Sie bereits wissen sollten

• Android Studio installieren und öffnen
• So erstellen Sie ein neues App-Projekt.
• So führen Sie eine App auf einem Emulator oder einem physischen Gerät aus.

Lerninhalte

• So bearbeiten Sie die Layoutdatei der App.
• So erstellen Sie eine App mit interaktivem Verhalten.
• Viele neue Begriffe. Im Glossar finden Sie leicht verständliche Erklärungen von Begriffen und Konzepten.

Vorgehensweise

• Sehen Sie sich die Kotlin-Datei MainActivity und die Layoutdatei der Aktivität an.
• Bearbeite das Layout der Aktivität in XML.
• Fügen Sie dem Layout der Aktivität ein Button-Element hinzu.
• Extrahieren Sie hartcodierte Strings in eine Datei mit String-Ressourcen.
• Implementieren Sie Click-Handler-Methoden, um Meldungen auf dem Bildschirm anzuzeigen, wenn der Nutzer auf ein Button tippt.

In diesem Codelab erstellen Sie ein neues App-Projekt namens „DiceRoller“ und fügen eine Schaltfläche hinzu, um grundlegende Interaktivität zu ermöglichen. Jedes Mal, wenn auf die Schaltfläche geklickt wird, ändert sich der Wert des angezeigten Texts. Die fertige DiceRoller-App für dieses Codelab sieht so aus:

Im letzten Codelab haben Sie die wichtigsten Teile eines App-Projekts kennengelernt, einschließlich der Verzeichnisse java und res. In dieser Aufgabe konzentrieren Sie sich auf die beiden wichtigsten Dateien Ihrer App: die Kotlin-Datei MainActivity und die Layoutdatei activity_main.xml.

Schritt 1: MainActivity untersuchen

MainActivity ist ein Beispiel für ein Activity. Eine Activity ist eine Android-Kernklasse, mit der die Benutzeroberfläche einer Android-App gerendert und Eingabeereignisse empfangen werden. Wenn Ihre App gestartet wird, wird die in der Datei AndroidManifest.xml angegebene Aktivität gestartet.

Viele Programmiersprachen definieren eine „main“-Methode, mit der das Programm gestartet wird. Android-Apps haben keine „main“-Methode. Stattdessen gibt die Datei AndroidManifest.xml an, dass MainActivity gestartet werden soll, wenn der Nutzer auf das App-Symbol tippt. Zum Starten einer Aktivität verwendet das Android-Betriebssystem die Informationen im Manifest, um die Umgebung für die App einzurichten und die MainActivity zu erstellen. Anschließend führt MainActivity einige Einrichtungsschritte durch.

Jeder Aktivität ist eine Layoutdatei zugeordnet. Die Aktivität und das Layout sind durch einen Prozess verbunden, der als Layout-Inflation bezeichnet wird. Wenn die Aktivität gestartet wird, werden die in den XML-Layoutdateien definierten Ansichten in Kotlin-Ansichtsobjekte im Arbeitsspeicher umgewandelt (oder „aufgeblasen“). Anschließend kann die Aktivität diese Objekte auf dem Bildschirm darstellen und auch dynamisch ändern.

1. Wählen Sie in Android Studio File > New > New Project aus, um ein neues Projekt zu erstellen. Wählen Sie „Empty Activity“ (Leere Aktivität) aus und klicken Sie auf Next (Weiter).
2. Nennen Sie das Projekt DiceRoller und prüfen Sie alle anderen Werte für den Projektnamen und den Projektstandort. Achten Sie darauf, dass „AndroidX-Artefakte verwenden“ aktiviert ist. Klicken Sie auf Fertigstellen.
   
   
   
3. Maximieren Sie im Bereich Project > Android (Projekt > Android) java > com.example.android.diceroller. Doppelklicken Sie auf MainActivity. Im Code-Editor wird der Code in MainActivity angezeigt.
   
   
   
4. Unter dem Paketnamen und den Importanweisungen befindet sich die Klassendeklaration für MainActivity. Die Klasse MainActivity erweitert AppCompatActivity.

class MainActivity : AppCompatActivity() { ...

AppCompatActivity ist eine Unterklasse von Activity, die alle modernen Android-Funktionen unterstützt und gleichzeitig Abwärtskompatibilität mit älteren Android-Versionen bietet. Damit Ihre App auf möglichst vielen Geräten und für möglichst viele Nutzer verfügbar ist, sollten Sie immer AppCompatActivity verwenden.

5. Beachten Sie die Methode onCreate(). Aktivitäten verwenden keinen Konstruktor zum Initialisieren des Objekts. Stattdessen wird im Rahmen der Aktivitätseinrichtung eine Reihe vordefinierter Methoden (sogenannte „Lifecycle-Methoden“) aufgerufen. Eine dieser Methoden ist onCreate(), die Sie immer in Ihrer eigenen App überschreiben. Weitere Informationen zu den Methoden des Aktivitätslebenszyklus finden Sie in einem späteren Codelab.
   
   In onCreate() geben Sie an, welches Layout mit der Aktivität verknüpft ist, und Sie blähen das Layout auf. Die Methode setContentView() führt beide Aufgaben aus.
   

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

Die Methode setContentView() verweist mit R.layout.activity_main auf das Layout. Dabei handelt es sich um einen Ganzzahlverweis. Die Klasse R wird beim Erstellen Ihrer App generiert. Sie enthält alle Assets der App, einschließlich des Inhalts des Verzeichnisses res.R

In diesem Fall bezieht sich R.layout.activity_main auf die generierte Klasse R, den Ordner layout und die Layoutdatei activity_main.xml. Ressourcen enthalten keine Dateiendungen. Sie verweisen in der Klasse R auf viele der App-Ressourcen (einschließlich Bilder, Strings und Elemente in der Layoutdatei) mit ähnlichen Verweisen.

Schritt 2: App-Layout-Datei untersuchen

Alle Aktivitäten in Ihrer App haben eine zugehörige Layoutdatei im Verzeichnis res/layout der App. Eine Layoutdatei ist eine XML-Datei, in der beschrieben wird, wie eine Aktivität tatsächlich aussieht. In einer Layoutdatei werden Ansichten und ihre Position auf dem Bildschirm definiert.

Ansichten sind Elemente wie Text, Bilder und Schaltflächen, die die Klasse View erweitern. Es gibt viele Arten von Ansichten, darunter TextView, Button, ImageView und CheckBox.

In dieser Aufgabe untersuchen und ändern Sie die Layoutdatei der App.

1. Maximieren Sie im Bereich Project > Android (Projekt > Android) res > layout und doppelklicken Sie auf activity_main.xml. Der Editor für das Layoutdesign wird geöffnet. Android Studio enthält diesen Editor, mit dem Sie das Layout Ihrer App visuell erstellen und das Layoutdesign in der Vorschau ansehen können. In einem späteren Codelab erfahren Sie mehr über den Design-Editor.
2. Wenn Sie die Layoutdatei als XML aufrufen möchten, klicken Sie unten im Fenster auf den Tab Text.
   
   
   
3. Löschen Sie den gesamten vorhandenen XML-Code im Layout-Editor. Das Standardlayout, das Sie mit einem neuen Projekt erhalten, ist ein guter Ausgangspunkt, wenn Sie mit dem Android Studio-Designeditor arbeiten. In dieser Lektion arbeiten Sie mit dem zugrunde liegenden XML-Code, um ein neues Layout von Grund auf zu erstellen.
4. Kopieren Sie diesen Code und fügen Sie ihn in das Layout ein:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Sehen Sie sich nun den Code an:

1. Das Element der obersten Ebene oder das Stammelement des Layouts ist ein <LinearLayout>-Element. Die Ansicht LinearLayout ist ein ViewGroup. Ansichtsgruppen sind Container, die andere Ansichten enthalten und mit denen die Positionen der Ansichten auf dem Bildschirm festgelegt werden.
   
   Alle Ansichten und Ansichtsgruppen, die Sie Ihrem Layout hinzufügen, werden in einer Ansichtshierarchie organisiert. Das oberste XML-Element ist die Wurzel dieser Hierarchie. Die Stammansicht kann andere Ansichten und Ansichtsgruppen enthalten und die enthaltenen Ansichtsgruppen können andere Ansichten und Ansichtsgruppen enthalten. Wenn Ihre App ausgeführt wird, wird aus der Ansichtshierarchie in Ihrer XML-Layoutdatei eine Hierarchie von Objekten, wenn das Layout aufgebläht wird. In diesem Fall ist die Stammansichtsgruppe ein lineares Layout, in dem die untergeordneten Ansichten linear, nacheinander (entweder vertikal oder horizontal) angeordnet werden.
   
   Der Standard-Root für ein neues Android-Projekt ist ein ConstraintLayout, das gut mit dem Designeditor zusammenarbeitet. Für diese App verwenden Sie eine LinearLayout-Ansichtsgruppe, die einfacher als das Constraint-Layout ist. In der nächsten Lektion erfahren Sie mehr über Ansichtsgruppen und ConstraintLayout.
2. Achten Sie im Tag LinearLayout auf das Attribut android:layout_width. Die Breite dieses LinearLayout ist auf match parent festgelegt, sodass es dieselbe Breite wie das übergeordnete Element hat. Da dies die Stammansicht ist, wird das Layout auf die volle Breite des Bildschirms erweitert.
3. Beachten Sie das Attribut android:layout_height, das auf wrap_content festgelegt ist. Mit diesem Attribut wird die Höhe des LinearLayout an die kombinierte Höhe aller darin enthaltenen Ansichten angepasst. Derzeit ist das nur das TextView.
4. Sehen Sie sich das <TextView>-Element an. Dieses TextView, in dem Text angezeigt wird, ist das einzige visuelle Element in Ihrer DiceRoller-App. Das Attribut android:text enthält den anzuzeigenden String, in diesem Fall den String "Hello World!".
5. Beachten Sie die Attribute android:layout_width und android:layout_height im Element <TextView>, die beide auf wrap_content gesetzt sind. Der Inhalt der Textansicht ist der Text selbst. Die Ansicht nimmt also nur den für den Text erforderlichen Platz ein.

Die App zum Würfeln ist nicht sehr nützlich, wenn der Nutzer nicht würfeln und das Ergebnis nicht sehen kann. Fügen Sie zuerst eine Schaltfläche zum Würfeln und Text hinzu, in dem der gewürfelte Wert angezeigt wird.

Schritt 1: Schaltfläche zum Layout hinzufügen

1. Fügen Sie dem Layout unter der Textansicht ein Button-Element hinzu, indem Sie <Button eingeben und dann die Eingabetaste drücken. Es wird ein Button-Block angezeigt, der mit /> endet und die Attribute layout_width und layout_height enthält.

<Button
   android:layout_width=""
   android:layout_height="" />

2. Legen Sie sowohl das Attribut layout_width als auch das Attribut layout_height auf "wrap_content" fest. Mit diesen Werten hat die Schaltfläche dieselbe Breite und Höhe wie das darin enthaltene Textlabel.
3. Fügen Sie der Schaltfläche das Attribut android:text hinzu und weisen Sie ihm den Wert „Roll“ zu. Das Schaltflächenelement sieht jetzt so aus:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

Bei Button-Ansichten ist das Attribut text das Label der Schaltfläche. Im Layout-Editor wird das Attribut gelb hervorgehoben, was auf einen Tipp oder eine Warnung hinweist. In diesem Fall ist die gelbe Markierung darauf zurückzuführen, dass der String "Roll" im Schaltflächenlabel fest codiert ist, der String aber eine Ressource sein sollte. Im nächsten Abschnitt erfahren Sie mehr über String-Ressourcen.

Schritt 2: String-Ressourcen extrahieren

Anstatt Strings in Ihren Layout- oder Codedateien fest zu codieren, sollten Sie alle App-Strings in einer separaten Datei speichern. Diese Datei heißt strings.xml und befindet sich in den Ressourcen der App im Verzeichnis res/values/.

Wenn sich die Strings in einer separaten Datei befinden, lassen sie sich leichter verwalten, insbesondere wenn Sie sie mehrmals verwenden. Außerdem sind String-Ressourcen für die Übersetzung und Lokalisierung Ihrer App erforderlich, da Sie für jede Sprache eine String-Ressourcendatei erstellen müssen.

Android Studio hilft Ihnen mit Hinweisen und Warnungen, daran zu denken, Ihre Strings in eine Ressourcendatei einzufügen.

1. Klicken Sie einmal auf den String „Roll“ im Attribut android:text des Tags <Button>.
2. Drücken Sie Alt+Enter (Option+Enter unter macOS) und wählen Sie im Pop-up-Menü String-Ressource extrahieren aus.
3. Geben Sie unter Ressourcenname roll_label ein.
4. Klicken Sie auf OK. In der Datei res/values/string.xml wird eine String-Ressource erstellt und der String im Button-Element wird durch eine Referenz auf diese Ressource ersetzt:
   android:text="@string/roll_label"
5. Maximieren Sie im Bereich Project > Android (Projekt > Android) res > values (res > Werte) und doppelklicken Sie dann auf strings.xml, um die String-Ressourcen in der Datei strings.xml aufzurufen:

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

Tipp: Neben dem String, den Sie gerade hinzugefügt haben, enthält die Datei strings.xml auch den App-Namen. Der App-Name wird in der App-Leiste oben auf dem Bildschirm angezeigt, wenn Sie Ihr App-Projekt mit der leeren Vorlage starten. Sie können den App-Namen ändern, indem Sie die app_name-Ressource bearbeiten.

Schritt 3: Ansichten gestalten und positionieren

Ihr Layout enthält jetzt eine TextView- und eine Button-Ansicht. In dieser Aufgabe ordnen Sie die Ansichten in der Ansichtsgruppe an, damit sie ansprechender aussehen.

1. Klicken Sie auf den Tab Design, um eine Vorschau des Layouts zu sehen. Derzeit sind beide Ansichten nebeneinander oben auf dem Bildschirm zu sehen.
   
   
   
2. Klicken Sie auf den Tab Text, um zum XML-Editor zurückzukehren. Fügen Sie dem LinearLayout-Tag das Attribut android:orientation mit dem Wert "vertical" hinzu. Das <LinearLayout>-Element sollte nun so aussehen:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

In der Ansichtsgruppe LinearLayout werden die enthaltenen Ansichten nacheinander in einer Zeile positioniert, entweder horizontal in einer Reihe oder vertikal in einem Stapel. Die Standardeinstellung ist „horizontal“. Da Sie TextView über Button stapeln möchten, legen Sie die Ausrichtung auf „Vertikal“ fest. Das Design sieht jetzt so aus, mit der Schaltfläche unter dem Text:

3. Fügen Sie das Attribut android:layout_gravity sowohl dem TextView als auch dem Button hinzu und weisen Sie ihm den Wert "center_horizontal" zu. So werden beide Ansichten an der Mitte der horizontalen Achse ausgerichtet. Die Elemente „TextView“ und „Button“ sollten jetzt so aussehen:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

4. Fügen Sie dem linearen Layout das Attribut android:layout_gravity hinzu und weisen Sie ihm den Wert "center_vertical" zu. Ihr LinearLayout-Element sollte jetzt so aussehen:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

Hinweis : Wenn Sie die center_vertical-Ausrichtung sowohl für die Schaltflächen- als auch für die Textansicht hinzufügen (anstatt center_horizontal), werden die Ansichten sowohl horizontal als auch vertikal in der Mitte des Layouts zentriert. Die Ansichten liegen also übereinander.

Wenn Sie alle untergeordneten Elemente gleichzeitig zentrieren möchten, verwenden Sie center_vertical für das übergeordnete Element (das LinearLayout-Element), wie oben gezeigt.

5. Wenn Sie die Größe des Texts in der Textansicht erhöhen möchten, fügen Sie dem <TextView>-Element das Attribut android:textSize mit dem Wert "30sp" hinzu. Die Abkürzung sp steht für skalierbare Pixel. Das ist eine Maßeinheit für die Textgröße, die unabhängig von der Displayqualität des Geräts ist. Das TextView-Element sollte jetzt so aussehen:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

6. Kompilieren Sie Ihre App und führen Sie sie aus.
   
   
   

Sowohl der Text als auch die Schaltfläche sind jetzt gut platziert und in der Textansicht wird größerer Text angezeigt. Die Schaltfläche hat noch keine Funktion. Wenn Sie darauf klicken, passiert also nichts. Das ist Ihre nächste Aufgabe.

Schritt 4: Referenz auf die Schaltfläche im Code abrufen

Der Kotlin-Code in MainActivity definiert die interaktiven Teile Ihrer App, z. B. was passiert, wenn Sie auf eine Schaltfläche tippen. Wenn Sie eine Funktion schreiben möchten, die ausgeführt wird, wenn auf die Schaltfläche geklickt wird, müssen Sie in MainActivity einen Verweis auf das Button-Objekt in Ihrem aufgeblasenen Layout abrufen. So erhalten Sie einen Verweis auf die Schaltfläche:

• Weisen Sie dem Button in der XML-Datei eine ID zu.
• Verwenden Sie die Methode findViewById() in Ihrem Code, um einen Verweis auf das View mit einer bestimmten ID abzurufen.

Sobald Sie einen Verweis auf die Button-Ansicht haben, können Sie Methoden für diese Ansicht aufrufen, um sie während der Ausführung der App dynamisch zu ändern. Sie können beispielsweise einen Click-Handler hinzufügen, der Code ausführt, wenn auf die Schaltfläche getippt wird.

1. Öffnen Sie die Layoutdatei activity_main.xml, falls sie noch nicht geöffnet ist, und klicken Sie auf den Tab Text.
2. Fügen Sie der Schaltfläche das Attribut android:id hinzu und geben Sie ihm einen Namen (in diesem Fall „@+id/roll_button"“). Ihr <Button>-Element sieht jetzt so aus:

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

Wenn Sie eine ID für eine Ansicht in der XML-Layoutdatei erstellen, erstellt Android Studio eine Integer-Konstante mit dem Namen dieser ID in der generierten Klasse R. Wenn Sie eine Ansicht also roll_button nennen, generiert und erstellt Android Studio in der Klasse R eine Integer-Konstante mit dem Namen roll_button. Das Präfix "@+id" für den ID-Namen weist den Compiler an, diese ID-Konstante der R-Klasse hinzuzufügen. Alle Ansichts-IDs in Ihrer XML-Datei müssen dieses Präfix haben.

3. Öffnen Sie die Kotlin-Datei MainActivity. Fügen Sie in onCreate() nach setContentView() diese Zeile hinzu:

val rollButton: Button = findViewById(R.id.roll_button)

Verwenden Sie die Methode findViewById(), um eine View-Referenz für die Ansicht abzurufen, die Sie in der XML-Klasse definiert haben. In diesem Fall rufen Sie die Button-Referenz aus der R-Klasse und der ID roll_button ab und weisen diese Referenz der rollButton-Variablen zu.

Hinweis:Wenn Sie die Zeile eingeben, anstatt sie zu kopieren und einzufügen, wird in Android Studio ein Vorschlag zur automatischen Vervollständigung für den ID-Namen angezeigt, sobald Sie mit der Eingabe beginnen.

4. Android Studio hebt die Klasse Button rot hervor und unterstreicht sie, um darauf hinzuweisen, dass es sich um eine nicht aufgelöste Referenz handelt und Sie diese Klasse importieren müssen, bevor Sie sie verwenden können. Möglicherweise wird auch eine Kurzinfo mit dem vollständig qualifizierten Klassennamen angezeigt:
   
   
   
5. Drücken Sie Alt+Enter (Option+Enter auf einem Mac), um den vollständig qualifizierten Klassennamen zu übernehmen.

Tipp: Sie können Android Studio so konfigurieren, dass Importanweisungen für Klassen automatisch hinzugefügt werden, wenn die Bedeutung eindeutig ist. Im Einstellungsfeld für Editor > Allgemein > Automatischer Import wird festgelegt, wie Importe behandelt werden.

Schritt 5: Click-Handler hinzufügen, um einen Toast-Hinweis anzuzeigen

Ein Klick-Handler ist eine Methode, die jedes Mal aufgerufen wird, wenn der Nutzer auf ein anklickbares UI-Element wie eine Schaltfläche klickt oder tippt. Zum Erstellen eines Klick-Handlers benötigen Sie Folgendes:

• Eine Methode, die einen Vorgang ausführt.
• Die Methode setOnClickHandler(), die die Button mit der Handler-Methode verbindet.

In dieser Aufgabe erstellen Sie eine Click-Handler-Methode, um ein Toast anzuzeigen. Ein Toast ist eine Meldung, die kurz auf dem Bildschirm angezeigt wird. Sie verbinden die Click-Handler-Methode mit dem Button.

1. Erstellen Sie in der Klasse MainActivity nach onCreate() eine private Funktion mit dem Namen rollDice().

private fun rollDice() {
  
}

2. Fügen Sie diese Zeile der Methode rollDice() hinzu, um eine Toast anzuzeigen, wenn rollDice() aufgerufen wird:

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

Rufen Sie zum Erstellen eines Toasts die Methode Toast.makeText() auf. Für diese Methode sind drei Dinge erforderlich:

• Ein Context-Objekt. Mit dem Context-Objekt können Sie mit dem Android-Betriebssystem kommunizieren und Informationen zum aktuellen Status abrufen. Hier ist ein Context erforderlich, damit das Toast-Objekt dem Betriebssystem mitteilen kann, dass der Toast angezeigt werden soll. Da AppCompatActivity eine Unterklasse von Context ist, können Sie einfach das Keyword this für den Kontext verwenden.
• Die anzuzeigende Nachricht, hier "button clicked".
• die Dauer, für die die Nachricht angezeigt werden soll. Die Methode show() am Ende zeigt den Toast an.

3. Fügen Sie in onCreate() nach dem Aufruf von findViewById() diese Zeile hinzu, um rollDice() als Klick-Handler für das rollButton-Objekt zuzuweisen:

rollButton.setOnClickListener { rollDice() }

Die vollständige Definition Ihrer MainActivity-Klasse sieht nun so aus:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

4. Kompiliere und führe deine App aus. Jedes Mal, wenn du auf die Schaltfläche tippst, sollte ein Toast-Hinweis angezeigt werden.

In dieser Aufgabe ändern Sie die Methode rollDice(), um den Text in TextView zu ändern. Im ersten Schritt ändern Sie den Text von "Hello World!" in den String "Dice Rolled!". Im zweiten Schritt wird eine Zufallszahl zwischen 1 und 6 angezeigt.

Schritt 1: String anzeigen

1. Öffnen Sie activity_main.xml und fügen Sie der TextView eine ID hinzu.

android:id="@+id/result_text"

2. Öffnen Sie MainActivity. Kommentieren Sie in der Methode rollDice() die Zeile aus, um Toast anzuzeigen.
3. Verwenden Sie die Methode findViewById(), um einen Verweis auf die TextView anhand ihrer ID abzurufen. Weisen Sie den Verweis einer resultText-Variablen zu.

val resultText: TextView = findViewById(R.id.result_text)

4. Weisen Sie der resultText.text-Eigenschaft einen neuen String zu, um den angezeigten Text zu ändern. Sie können den Hinweis, diesen String in eine Ressource zu extrahieren, ignorieren. Es handelt sich nur um einen temporären String.

resultText.text = "Dice Rolled!"

5. Kompiliere und führe die App aus. Wenn du jetzt auf die Schaltfläche Roll tippst, wird TextView aktualisiert.

Schritt 2: Zufallszahl anzeigen

In dieser Aufgabe fügen Sie dem Klicken auf die Schaltfläche Zufälligkeit hinzu, um das Würfeln zu simulieren. Jedes Mal, wenn auf die Schaltfläche geklickt oder getippt wird, wählt Ihr Code eine Zufallszahl zwischen 1 und 6 aus und aktualisiert TextView. Das Generieren einer Zufallszahl ist nicht Android-spezifisch. Dazu verwenden Sie die Klasse Random.

1. Verwenden Sie oben in der Methode rollDice() die Methode Random.nextInt(), um eine Zufallszahl zwischen 1 und 6 zu erhalten:

val randomInt = Random().nextInt(6) + 1

2. Legen Sie die Eigenschaft text auf den Wert der zufälligen Ganzzahl als String fest:

resultText.text = randomInt.toString()

3. Kompiliere und führe die App aus. Jedes Mal, wenn du auf die Schaltfläche Roll (Würfeln) tippst, ändert sich die Zahl in der Textansicht.

Android Studio-Projekt: DiceRoller

Hinweis:Alle Programmieraufgaben sind optional.

Aufgabe:Fügen Sie der App eine zweite Schaltfläche mit der Bezeichnung „Count Up“ hinzu, die direkt unter der Schaltfläche Roll angezeigt wird. Wenn der Nutzer auf die Schaltfläche Count Up tippt, sollte der aktuelle Wert der Ergebnis-TextView abgerufen, um 1 erhöht und die TextView aktualisiert werden. Achten Sie darauf, dass Sie diese Grenzfälle berücksichtigen:

• Wenn die Ergebnis-Textansicht noch keine Zahl enthält (d. h. wenn in der Textansicht noch der Standardstring „Hello World“ steht), legen Sie den Ergebnis-Text auf „1“ fest.
• Wenn die Zahl bereits 6 ist, müssen Sie nichts tun.

Tipp: Der String in TextView-Ansichten ist eine Instanz der Klasse CharSequence. Um den Wert zu testen, müssen Sie ihn in einen String konvertieren:

resultText.text.toString()

Lösungscode für Programmieraufgabe

Android Studio-Projekt: DiceRoller-challenge

Aktivitäten

• MainActivity ist eine abgeleitete Klasse von AppCompatActivity, die wiederum eine abgeleitete Klasse von Activity ist. Eine Activity ist eine zentrale Android-Klasse, die für das Rendern der Benutzeroberfläche einer Android-App und das Empfangen von Eingabeereignissen verantwortlich ist.
• Alle Aktivitäten haben eine zugehörige Layoutdatei, die eine XML-Datei in den Ressourcen der App ist. Die Layoutdatei wird nach der Aktivität benannt, z. B. activity_main.xml.
• Die Methode setContentView() in MainActivity verknüpft das Layout mit der Aktivität und rendert das Layout, wenn die Aktivität erstellt wird.
• Beim Layout-Inflating werden die in den XML-Layoutdateien definierten Ansichten in Kotlin-Ansichtsobjekte im Arbeitsspeicher umgewandelt (oder „inflated“). Nachdem das Layout aufgebläht wurde, kann das Activity diese Objekte auf dem Bildschirm darstellen und dynamisch ändern.

Aufrufe

• Alle UI-Elemente im App-Layout sind abgeleitete Klassen der Klasse View und werden als Ansichten bezeichnet. TextView und Button sind Beispiele für Ansichten.
• View-Elemente können in einem ViewGroup gruppiert werden. Eine Ansichtsgruppe fungiert als Container für die darin enthaltenen Ansichten oder anderen Ansichtsgruppen. LinearLayout ist ein Beispiel für eine Ansichtsgruppe, in der die Ansichten linear angeordnet sind.

Attribute ansehen

• Die Attribute android:layout_width und android:layout_height geben die Gewichtung und Höhe einer Ansicht an. Der Wert match_parent dehnt die Ansicht auf die Breite oder Höhe des übergeordneten Elements. Der Wert wrap_content verkleinert die Ansicht, sodass sie an den Inhalt angepasst wird.
• Das Attribut android:text gibt den Text an, der in einer Ansicht angezeigt werden soll (falls in der Ansicht Text angezeigt wird). Bei Schaltflächen ist android:text das Schaltflächenlabel.
• Mit dem Attribut android:orientation in einer LinearLayout-Ansichtsgruppe werden die darin enthaltenen Ansichtselemente angeordnet. Bei einem Wert von horizontal werden Ansichten von links nach rechts angeordnet. Bei einem Wert von vertical werden die Ansichten von oben nach unten angeordnet.
• Mit dem Attribut android:layout_gravity wird die Platzierung einer Ansicht und aller untergeordneten Elemente dieser Ansicht festgelegt.
• Mit dem Attribut android:textSize wird die Größe des Texts in einer Textansicht definiert. Textgrößen werden in sp-Einheiten (skalierbare Pixel) angegeben. Mit „sp“-Einheiten können Sie Text unabhängig von der Displayqualität des Geräts skalieren.

Strings

• Anstatt Strings im Layout fest zu codieren, empfiehlt es sich, String-Ressourcen zu verwenden.
• String-Ressourcen befinden sich in der Datei values/res/string.xml.
• Verwenden Sie zum Extrahieren von Strings Alt+Enter (Option+Enter auf einem Mac). Wählen Sie im Pop-up-Menü String-Ressourcen extrahieren aus.

Ansichten verwenden

• Wenn Sie Ihren Kotlin-Code mit einer Ansicht verbinden möchten, die Sie im Layout definiert haben, müssen Sie nach dem Inflating der Ansicht eine Referenz zum Ansichtsobjekt abrufen. Weisen Sie der Ansicht im Layout eine ID (android:id) zu und rufen Sie dann mit der Methode findViewById() das zugehörige Ansichtsobjekt ab.
• Wenn Sie eine ID für eine Ansicht in der XML-Layoutdatei erstellen, erstellt Android Studio eine Integer-Konstante mit dem Namen dieser ID in der generierten Klasse R. Sie können diese R.id-Referenz dann in der Methode findViewById() verwenden.
• Sie können die Attribute eines Ansichtsobjekts in Ihrem Kotlin-Code direkt nach Attributname festlegen. Der Text in einer Textansicht wird beispielsweise durch das Attribut android:text im XML-Code und durch die Eigenschaft text in Kotlin definiert.
• Ein Klick-Handler ist eine Methode, die aufgerufen wird, wenn der Nutzer auf ein UI-Element klickt oder tippt. Wenn Sie einer Ansicht wie einer Schaltfläche eine Click-Handler-Methode zuweisen möchten, verwenden Sie die Methode setOnClickListener().

Toasts verwenden

Ein Toast ist eine Ansicht, in der dem Nutzer eine einfache Nachricht in einem kleinen Pop-up-Fenster angezeigt wird.

Rufen Sie zum Erstellen eines Toasts die Factory-Methode makeText() für die Klasse Toast mit drei Argumenten auf:

• Der Kontext der App Activity
• Die anzuzeigende Nachricht, z. B. eine String-Ressource
• Eine Dauer, z. B. Toast.LENGTH_SHORT

Rufen Sie show() auf, um den Toast anzuzeigen.

Udacity-Kurs:

• Android-Apps mit Kotlin entwickeln

Android-Entwicklerdokumentation:

• Android Studio kennenlernen
• Layouts
• View
• Button
• TextView
• App-Ressourcen – Übersicht
• Übersicht über Eingabeereignisse
• findViewById()
• setOnClickListener()
• Context

Sonstiges:

• Glossar mit Vokabeln und Konzepten

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.

App ändern

Öffnen Sie die DiceRoller-App. Fügen Sie der App eine Schaltfläche mit der Bezeichnung „Zurücksetzen“ hinzu, die direkt unter der Schaltfläche Würfeln angezeigt wird. Durch Klicken auf die Schaltfläche soll die Ergebnis-Textansicht auf 0 zurückgesetzt werden.

Beantworten Sie diese Fragen

Frage 1

Welche Methode für ein Activity-Objekt rendert das Layout der App und macht die zugehörigen Ansichten als Objekte verfügbar?

• onCreate()
• setClickListener()
• setContentView()
• show()

Frage 2

Mit welchem Ansichtsattribut legen Sie die Breite einer Ansicht so fest, dass sie sich an den Inhalt anpasst?

• android:view_width="wrap"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"

App zur Altersfreigabe einreichen

Prüfen Sie, ob die App Folgendes hat:

• Das App-Layout sollte eine Textansicht und zwei Schaltflächen enthalten.
• Im Code der App sollten zwei Klick-Handler festgelegt werden, einer für jede Schaltfläche.
• Der Click-Handler, der die Textansicht zurücksetzt, sollte die Text-Eigenschaft auf 0 festlegen.

Nächste Lektion starten: 1.3 Bildressourcen und Kompatibilität

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