Einfache interaktive App zum Würfeln erstellen

In diesem Codelab erstellen Sie eine Android-App zum Würfeln, in der Nutzer auf ein Button in der App klicken können, um einen Würfel zu werfen. Das Ergebnis des Würfelwurfs wird auf dem Bildschirm in einem TextView angezeigt.

Sie verwenden den Layout Editor in Android Studio, um das App-Layout zu erstellen, und schreiben dann Kotlin-Code für das, was passiert, wenn auf Button geklickt wird.

Vorbereitung

• So erstellen und führen Sie eine „Hello, World!“-App in Android Studio aus.
• Sie sind mit der Verwendung von TextViews und ImageViews in einer App vertraut.
• So ändern Sie die Attribute eines TextView im Layout-Editor.
• Hier erfahren Sie, wie Sie Text in eine String-Ressource extrahieren, um die Übersetzung Ihrer App zu vereinfachen und Strings wiederzuverwenden.
• Grundlagen der Kotlin-Programmierung, wie sie in den vorherigen Codelabs vermittelt wurden.

Lerninhalte

• So fügen Sie einer Android-App ein Button hinzu.
• So fügen Sie Verhalten hinzu, das ausgeführt wird, wenn in der App auf ein Button getippt wird.
• So öffnen und ändern Sie den Activity-Code einer App.
• So lassen Sie eine Toast-Meldung anzeigen.
• So aktualisieren Sie den Inhalt eines TextView, während die App ausgeführt wird.

Aufgaben

• Eine Android-App zum Würfeln, die eine Button zum Würfeln enthält und den Text auf dem Bildschirm mit dem Ergebnis des Würfelns aktualisiert.

Voraussetzungen

• Einen Computer, auf dem Android Studio installiert ist

So sieht die App aus, wenn Sie dieses Codelab abgeschlossen haben.

Projekt mit leerer Aktivität erstellen

1. Wenn Sie bereits ein Projekt in Android Studio geöffnet haben, wählen Sie File > New > New Project... aus, um den Bildschirm Create New Project zu öffnen.
2. Erstellen Sie unter Create New Project (Neues Projekt erstellen) ein neues Kotlin-Projekt mit der Vorlage Empty Activity (Leere Aktivität).
3. Nenne die App „Dice Roller“ (Würfel) mit einem Mindest-API-Level von 19 (KitKat).

Wichtig:Wenn Sie noch nicht wissen, wie Sie ein neues Projekt in Android Studio erstellen, finden Sie weitere Informationen unter Erste Android-App erstellen und ausführen.

4. Führen Sie die neue App aus. Sie sollte so aussehen.
   

Layout-Editor öffnen

1. Doppelklicken Sie im Fenster Project auf activity_main.xml (app > res > layout > activity_main.xml), um die Datei zu öffnen. Sie sollten den Layout Editor sehen, in dem sich nur das TextView „Hello World“ in der Mitte der App befindet.
   

Als Nächstes fügen Sie Ihrer App ein Button hinzu. Ein Button ist ein Element der Benutzeroberfläche (UI) in Android, auf das der Nutzer tippen kann, um eine Aktion auszuführen.

In dieser Aufgabe fügen Sie ein Button unter dem TextView „Hello World“ ein. Die TextView und die Button befinden sich in einem ConstraintLayout, einem Typ von ViewGroup.

Wenn es Views innerhalb eines ViewGroup gibt, gelten die Views als untergeordnete Elemente des übergeordneten ElementsViewGroup. Im Fall Ihrer App wären TextView und Button untergeordnete Elemente des übergeordneten Elements ConstraintLayout.

Fahren Sie mit dem Hinzufügen eines Button als untergeordnetes Element des vorhandenen ConstraintLayout in Ihrer App fort.

Hinweis:Wie in einem Stammbaum können übergeordnete Ansichten in einer Ansichtshierarchie selbst untergeordnete Ansichten sein und untergeordnete Ansichten können übergeordnete Ansichten für andere untergeordnete Ansichten sein.

Schaltfläche zum Layout hinzufügen

1. Ziehen Sie ein Button aus der Palette in die Designansicht und positionieren Sie es unter dem TextView „Hello World“.
   
2. Prüfen Sie im Komponentenbaum unter der Palette, ob Button und TextView unter ConstraintLayout aufgeführt sind (als untergeordnete Elemente von ConstraintLayout).
3. Es wird ein Fehler angezeigt, dass Button nicht eingeschränkt ist. Da sich Button in einem ConstraintLayout befindet, müssen Sie vertikale und horizontale Einschränkungen festlegen, um es zu positionieren.

Schaltfläche positionieren

In diesem Schritt fügen Sie eine vertikale Einschränkung vom oberen Rand von Button zum unteren Rand von TextView hinzu. Dadurch wird Button unter TextView positioniert.

1. Halten Sie in der Designansicht am oberen Rand von Button den weißen Kreis mit blauem Rahmen gedrückt. Ziehen Sie den Mauszeiger. Ein Pfeil folgt ihm. Lassen Sie die Maustaste los, wenn Sie die untere Kante von „Hello World“ TextView erreicht haben. Dadurch wird eine Layoutbeschränkung festgelegt und die Button wird direkt unter der TextView angezeigt.
   
2. Sehen Sie sich die Attribute rechts im Layout-Editor an.
3. Im Constraint-Widget sehen Sie eine neue Layout-Einschränkung, die auf den unteren Rand von TextView festgelegt ist: Top → BottomOf textView (0 dp). (0 dp) bedeutet, dass der Rand 0 ist. Außerdem wird ein Fehler für fehlende horizontale Einschränkungen angezeigt.
   
4. Fügen Sie eine horizontale Einschränkung von der linken Seite von Button zur linken Seite des übergeordneten Elements ConstraintLayout hinzu.
5. Wiederholen Sie den Vorgang auf der rechten Seite und verbinden Sie den rechten Rand von Button mit dem rechten Rand von ConstraintLayout. Das Ergebnis sollte so aussehen:

6. Wenn Button weiterhin ausgewählt ist, sollte das Constraint-Widget so aussehen. Es wurden zwei zusätzliche Einschränkungen hinzugefügt: Start → StartOf parent (0dp) und End → EndOf parent (0dp). Das bedeutet, dass das Button horizontal im übergeordneten Element, dem ConstraintLayout, zentriert ist.
   

7. Führen Sie die App aus. Sie sollte wie im Screenshot unten aussehen. Sie können auf das Button klicken, aber es passiert noch nichts. Weiter gehts!

Schaltflächentext ändern

Als Nächstes nehmen Sie einige weitere Änderungen an der Benutzeroberfläche im Layout-Editor vor.

Ändern Sie das Label Button von „Schaltfläche“ in „Roll“, um anzugeben, was die Schaltfläche bewirkt.

1. Wählen Sie im Layout-Editor das Button aus, gehen Sie zu Attribute, ändern Sie den Text in Roll und drücken Sie die Taste Enter (Return auf dem Mac).

2. Im Komponentenbaum wird neben Button ein orangefarbenes Warndreieck angezeigt. Wenn Sie den Mauszeiger auf das Dreieck bewegen, wird eine Meldung angezeigt. Android Studio hat in Ihrem App-Code einen fest codierten String („Roll“) erkannt und schlägt vor, stattdessen eine String-Ressource zu verwenden.

Wenn Sie einen String fest codieren, ist es schwieriger, die App in andere Sprachen zu übersetzen und Strings in verschiedenen Teilen der App wiederzuverwenden. Glücklicherweise bietet Android Studio eine automatische Korrektur.

3. Klicken Sie in der Komponentenstruktur auf das orangefarbene Dreieck.

Die vollständige Warnmeldung wird geöffnet.

4. Klicken Sie unten in der Meldung unter Vorgeschlagene Korrektur auf die Schaltfläche Beheben. Eventuell müssen Sie dazu nach unten scrollen.
5. Das Dialogfeld Ressource extrahieren wird geöffnet. Einen String extrahieren bedeutet, den Text „Roll“ zu nehmen und eine String-Ressource namens roll in strings.xml (app > res > values > strings.xml) zu erstellen. Die Standardwerte sind korrekt. Klicken Sie auf OK.

6. Beachten Sie, dass im Bereich Attribute das Attribut text für Button jetzt @string/roll lautet. Damit wird auf die Ressource verwiesen, die Sie gerade erstellt haben.
   

In der Designansicht sollte auf dem Button weiterhin Roll stehen.

„TextView“ gestalten

Der Text „Hello World!“ ist recht klein und die Nachricht ist für Ihre App nicht relevant. In diesem Schritt ersetzen Sie die kleine Nachricht „Hello, World!“ durch eine Zahl, um den gewürfelten Wert anzuzeigen, und vergrößern die Schrift, damit sie besser zu sehen ist.

1. Wählen Sie im Design-Editor das TextView aus, damit seine Attribute im Fenster Attribute angezeigt werden.
2. Ändern Sie die textSize des TextView in 36sp, damit der Text groß und gut lesbar ist. Möglicherweise müssen Sie scrollen, um textSize zu finden.

3. Löschen Sie das Attribut text von TextView. Sie müssen im TextView nichts anzeigen, bis der Nutzer die Würfel rollt.

Es ist jedoch sehr hilfreich, wenn Sie beim Bearbeiten des Layouts und des Codes für Ihre App etwas Text im TextView sehen. Zu diesem Zweck können Sie dem TextView Text hinzufügen, der nur in der Layoutvorschau sichtbar ist, nicht aber, wenn die App ausgeführt wird.

.

4. Wählen Sie TextView in der Komponentenstruktur aus.
5. Suchen Sie unter Gemeinsame Attribute nach dem Attribut text und darunter nach einem weiteren Attribut text mit einem Toolsymbol. Das Attribut text wird dem Nutzer angezeigt, wenn die App ausgeführt wird. Das Attribut text mit einem Tool-Symbol ist das Attribut „tools text“, das nur für Sie als Entwickler bestimmt ist.
6. Setzen Sie den Text für die Tools auf „1“ in TextView (um so zu tun, als hätten Sie eine 1 gewürfelt). Die „1“ wird nur im Design Editor in Android Studio angezeigt, nicht aber, wenn Sie die App auf einem echten Gerät oder Emulator ausführen.

Da dieser Text nur von App-Entwicklern gesehen wird, müssen Sie keine String-Ressource dafür erstellen.

7. Sehen Sie sich Ihre App in der Vorschau an. Die „1“ wird angezeigt.

8. Führen Sie Ihre App aus. So sieht die App aus, wenn sie auf einem Emulator ausgeführt wird. Die „1“ wird nicht angezeigt. Das ist das richtige Verhalten.

Sehr gut, Sie haben die Layoutänderungen vorgenommen.

Sie haben eine App mit einer Schaltfläche, aber wenn Sie auf die Schaltfläche tippen, passiert nichts. Dazu müssen Sie etwas Kotlin-Code schreiben, der die Würfel rollt und den Bildschirm aktualisiert, wenn auf die Schaltfläche getippt wird.

Damit Sie diese Änderung vornehmen können, müssen Sie ein wenig mehr über die Struktur einer Android-App wissen.

Ein Activity stellt das Fenster bereit, in dem die Benutzeroberfläche Ihrer App gerendert wird. Normalerweise nimmt eine Activity den gesamten Bildschirm der ausgeführten App ein. Jede App hat eine oder mehrere Aktivitäten. Die Aktivität der obersten Ebene oder die erste Aktivität wird oft als MainActivity bezeichnet und von der Projektvorlage bereitgestellt. Wenn der Nutzer beispielsweise durch die Liste der Apps auf seinem Gerät scrollt und auf das App-Symbol „Dice Roller“ tippt, startet das Android-System die MainActivity der App.

In Ihrem MainActivity-Code müssen Sie Details zum Layout des Activity und zur Interaktion des Nutzers damit angeben.

• In der Geburtstagskarten-App gibt es eine Activity, auf der die Geburtstagsnachricht und das Bild angezeigt werden.
• In der App „Würfel“ gibt es ein Activity, in dem das von Ihnen erstellte TextView- und Button-Layout angezeigt wird.

Bei komplexeren Apps kann es mehrere Bildschirme und mehr als ein Activity geben. Jede Activity hat einen bestimmten Zweck.

In einer Fotogalerie-App könnten Sie beispielsweise ein Activity zum Anzeigen eines Rasters von Fotos, ein zweites Activity zum Anzeigen eines einzelnen Fotos und ein drittes Activity zum Bearbeiten eines einzelnen Fotos haben.

Öffnen Sie die Datei „MainActivity.kt“.

Sie fügen Code hinzu, um auf das Tippen auf eine Schaltfläche in der MainActivity zu reagieren. Dazu müssen Sie mehr über den MainActivity-Code wissen, der bereits in Ihrer App enthalten ist.

1. Öffnen Sie die Datei MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt). So sollte es aussehen: Wenn import... angezeigt wird, klicken Sie auf ..., um die Importe zu maximieren.

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

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

Sie müssen nicht jedes einzelne Wort des oben genannten Codes verstehen, aber Sie sollten eine allgemeine Vorstellung davon haben, was er bewirkt. Je mehr Sie mit Android-Code arbeiten, desto vertrauter wird er Ihnen und desto besser werden Sie ihn verstehen.

2. Sehen Sie sich den Kotlin-Code für die Klasse MainActivity an, die durch das Keyword class und dann den Namen gekennzeichnet ist.

class MainActivity : AppCompatActivity() {
    ...
}

3. Beachten Sie, dass es in Ihrem MainActivity keine main()-Funktion gibt.
   
   Sie haben bereits gelernt, dass jedes Kotlin-Programm eine main()-Funktion haben muss. Android-Apps funktionieren anders. Anstatt eine main()-Funktion aufzurufen, ruft das Android-System die onCreate()-Methode Ihres MainActivity auf, wenn Ihre App zum ersten Mal geöffnet wird.
   
4. Suchen Sie die Methode onCreate(), die dem folgenden Code ähnelt.

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

In einem späteren Codelab erfahren Sie mehr über override. Machen Sie sich also jetzt keine Gedanken darüber. Im restlichen Teil der Methode onCreate() wird das MainActivity mit Code aus den Importen eingerichtet und das Startlayout mit setContentView() festgelegt.

5. Beachten Sie die Zeilen, die mit import beginnen.
   

Android bietet ein Framework mit zahlreichen Klassen, um das Schreiben von Android-Apps zu vereinfachen. Es muss jedoch genau wissen, welche Klasse Sie meinen. Mit einer import-Anweisung können Sie angeben, welche Klasse im Framework in Ihrem Code verwendet werden soll. Die Klasse Button ist beispielsweise in android.widget.Button definiert.

Automatische Importe aktivieren

Wenn Sie mehr Klassen verwenden, kann es sehr aufwendig werden, import-Anweisungen hinzuzufügen. Glücklicherweise hilft Android Studio Ihnen dabei, die richtigen Importe auszuwählen, wenn Sie von anderen bereitgestellte Klassen verwenden. In diesem Schritt konfigurieren Sie Android Studio so, dass Importe automatisch hinzugefügt und nicht verwendete Importe aus Ihrem Code entfernt werden.

1. Öffnen Sie in Android Studio die Einstellungen über File > Other Settings > Preferences for New Projects.
2. Maximieren Sie Weitere Einstellungen > Automatischer Import. Achten Sie in den Abschnitten Java und Kotlin darauf, dass die Optionen Add unambiguous imports on the fly (Eindeutige Importe spontan hinzufügen) und Optimize imports on the fly (for current project) (Importe spontan optimieren (für aktuelles Projekt)) aktiviert sind. Beachten Sie, dass in jedem Abschnitt zwei Kästchen vorhanden sind.
   
   Mit den Einstellungen für eindeutige Importe wird Android Studio angewiesen, automatisch eine Importanweisung hinzuzufügen, sofern es ermitteln kann, welche verwendet werden soll. Mit den Einstellungen für Importe optimieren wird Android Studio angewiesen, alle Importe zu entfernen, die nicht von Ihrem Code verwendet werden.
   
3. Speichern Sie die Änderungen und schließen Sie die Einstellungen, indem Sie auf OK drücken.

Jetzt wissen Sie etwas mehr über die MainActivity. Als Nächstes ändern Sie die App so, dass durch Klicken auf die Button etwas auf dem Bildschirm passiert.

Nachricht anzeigen, wenn auf die Schaltfläche geklickt wird

In diesem Schritt legen Sie fest, dass beim Klicken auf die Schaltfläche unten auf dem Bildschirm eine kurze Meldung angezeigt wird.

1. Fügen Sie der Methode onCreate() nach dem Aufruf von setContentView() den folgenden Code hinzu. Mit der Methode findViewById() wird die Button im Layout gesucht. R.id.button ist die Ressourcen-ID für die Button, die eine eindeutige Kennung dafür ist. Im Code wird eine Referenz auf das Button-Objekt in einer Variablen namens rollButton gespeichert, nicht das Button-Objekt selbst.

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

Hinweis: Android weist den Ressourcen in Ihrer App automatisch ID-Nummern zu. Die Schaltfläche Roll hat beispielsweise eine Ressourcen-ID und der String für den Schaltflächentext hat ebenfalls eine Ressourcen-ID. Ressourcen-IDs haben das Format R.<type>.<name>, z. B. R.string.roll. Bei View-IDs ist <type> id, z. B. R.id.button.

Im Code wird der Verweis auf das Button-Objekt in einer Variablen namens rollButton gespeichert, nicht das Button-Objekt selbst.

Wichtig:Wenn Kotlin ein Objekt einer Variablen zuweist, wird nicht jedes Mal das gesamte Objekt kopiert, sondern eine Referenz zum Objekt gespeichert. Eine Referenz ist wie eine Sozialversicherungsnummer oder eine andere nationale ID-Nummer: Die Nummer bezieht sich auf eine Person, ist aber nicht die Person selbst. Wenn Sie die Nummer kopieren, kopieren Sie nicht die Person.

Die onCreate()-Methode sollte jetzt so aussehen.

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

   val rollButton: Button = findViewById(R.id.button)
}

2. Prüfen Sie, ob Android Studio automatisch eine import-Anweisung für Button hinzugefügt hat.
   Es gibt jetzt drei Importanweisungen. Die dritte wurde automatisch hinzugefügt.
   

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

Hinweis:Wenn die automatischen Importe nicht aktiviert werden konnten, wird Button rot hervorgehoben. Sie können den richtigen Import manuell hinzufügen, indem Sie den Textcursor in das Wort Button setzen und dann Alt+Enter (Option+Enter auf einem Mac) drücken.

Als Nächstes müssen Sie Code mit dem Button verknüpfen, damit der Code ausgeführt werden kann, wenn auf das Button getippt wird. Ein Klick-Listener ist Code, der angibt, was bei einem Tippen oder Klicken passieren soll. Sie können sich das so vorstellen, dass der Code einfach nur darauf wartet, dass der Nutzer auf die Button klickt.

3. Verwenden Sie das rollButton-Objekt und legen Sie einen Klick-Listener dafür fest, indem Sie die Methode setOnClickListener() aufrufen.

rollButton.setOnClickListener {
}

Während der Eingabe werden in Android Studio möglicherweise mehrere Vorschläge angezeigt. Wählen Sie in diesem Fall die Option setOnClickListener {...} aus.

In die geschweiften Klammern schreiben Sie Anweisungen dazu, was passieren soll, wenn auf die Schaltfläche getippt wird. Derzeit wird in Ihrer App eine Toast angezeigt, eine kurze Nachricht, die dem Nutzer präsentiert wird.

4. Erstellen Sie ein Toast mit dem Text "Dice Rolled!", indem Sie Toast.makeText() aufrufen.

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. Weisen Sie dann das Toast an, sich selbst durch Aufrufen der show()-Methode anzuzeigen.

toast.show()

So sieht die aktualisierte Klasse MainActivity aus. Die Anweisungen package und import befinden sich weiterhin am Anfang der Datei:

class MainActivity : AppCompatActivity() {

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

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

Sie könnten die beiden Zeilen im Click-Listener in einer einzigen Zeile ohne Variable kombinieren. Dies ist ein gängiges Muster, das Sie möglicherweise auch in anderem Code finden.

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

6. Führen Sie die App aus und klicken Sie auf die Schaltfläche Roll (Würfeln). Unten auf dem Display sollte eine Benachrichtigung eingeblendet werden, die nach kurzer Zeit wieder verschwindet.

Super! Durch den Klick auf die Schaltfläche wurde die Mitteilung eingeblendet. Das ist das erste Mal, dass Sie Kotlin-Code für Android geschrieben haben.

TextView aktualisieren, wenn auf die Schaltfläche geklickt wird

Anstatt eine temporäre Toast-Meldung anzuzeigen, schreiben Sie Code, um die TextView auf dem Bildschirm zu aktualisieren, wenn auf die Schaltfläche Roll (Würfeln) geklickt wird.

1. Kehren Sie zu activity_main.xml zurück (app > res > layout > activity_main.xml).
2. Klicken Sie auf das TextView.
3. Die ID ist textView.
   
4. Öffnen Sie MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt).
5. Löschen Sie die Codezeilen, mit denen die Toast erstellt und angezeigt wird.

rollButton.setOnClickListener {
  
}

6. Erstellen Sie stattdessen eine neue Variable mit dem Namen resultTextView, um die TextView zu speichern.
7. Verwenden Sie findViewById(), um textView im Layout anhand seiner ID zu finden und eine Referenz darauf zu speichern.

val resultTextView: TextView = findViewById(R.id.textView)

8. Setze den Text auf resultTextView auf „6“ in Anführungszeichen.
   

resultTextView.text = "6"

Das ist ähnlich wie beim Festlegen des text-Attributs in Attributes, nur dass der Text jetzt in Ihrem Code steht und daher in doppelten Anführungszeichen eingeschlossen werden muss. Wenn Sie dies explizit festlegen, wird für TextView vorerst immer 6 angezeigt. In der nächsten Aufgabe fügen Sie den Code hinzu, mit dem die Würfel geworfen und verschiedene Werte angezeigt werden.

So sollte die Klasse MainActivity aussehen:

class MainActivity : AppCompatActivity() {

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

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. Führen Sie die App aus und klicken Sie auf die Schaltfläche. Dadurch sollte TextView auf „6“ aktualisiert werden.

Jetzt müssen Sie nur noch die Würfel rollen. Sie können die Klasse Dice aus dem vorherigen Codelab wiederverwenden, die die Logik für das Würfeln enthält.

Klasse „Dice“ hinzufügen

1. Erstellen Sie nach der letzten geschweiften Klammer in der MainActivity-Klasse die Dice-Klasse mit einer roll()-Methode.

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. Beachten Sie, dass Android Studio numSides mit einer gewellten grauen Linie unterstreicht. Es kann einen Moment dauern, bis die Änderungen angezeigt werden.
3. Bewegen Sie den Mauszeiger auf numSides. Es wird ein Pop-up mit der Meldung Property 'numSides' could be private (Die Eigenschaft „numSides“ könnte privat sein) angezeigt.
   

Wenn Sie numSides als private markieren, ist es nur innerhalb der Klasse Dice zugänglich. Da der einzige Code, der numSides verwendet, sich in der Klasse Dice befindet, ist es in Ordnung, dieses Argument für die Klasse Dice als private festzulegen. Weitere Informationen zu private- und public-Variablen finden Sie in der nächsten Einheit.

4. Klicken Sie in Android Studio auf Make 'numSides' 'private', um die vorgeschlagene Korrektur vorzunehmen.

rollDice()-Methode erstellen

Nachdem Sie Ihrer App eine Dice-Klasse hinzugefügt haben, aktualisieren Sie MainActivity, damit sie verwendet wird. Um Ihren Code besser zu organisieren, können Sie die gesamte Logik zum Würfeln in einer Funktion zusammenfassen.

1. Ersetzen Sie den Code im Klick-Listener, der den Text auf „6“ setzt, durch einen Aufruf von rollDice().

rollButton.setOnClickListener {
   rollDice()
}

2. Da rollDice() noch nicht definiert ist, wird in Android Studio ein Fehler gemeldet und rollDice() wird rot angezeigt.
3. Wenn Sie den Mauszeiger auf rollDice() bewegen, werden das Problem und einige mögliche Lösungen angezeigt.

4. Klicken Sie auf Weitere Aktionen, um ein Menü aufzurufen. Android Studio kann Ihnen viel Arbeit abnehmen.

Tipp:Wenn Sie Schwierigkeiten haben, den Mauszeiger zu bewegen und dann auf Weitere Aktionen zu klicken, können Sie auf rollDice() klicken und dann Alt+Enter (Option+Enter auf einem Mac) drücken, um das Menü aufzurufen.

5. Wählen Sie Funktion „rollDice“ erstellen aus. Android Studio erstellt eine leere Definition für die Funktion in MainActivity.

private fun rollDice() {
    TODO("Not yet implemented")
}

Neue Dice-Objektinstanz erstellen

In diesem Schritt lassen Sie mit der Methode rollDice() einen Würfel erstellen und würfeln und das Ergebnis in TextView anzeigen.

1. Löschen Sie in rollDice() den TODO()-Aufruf.
2. Fügen Sie Code hinzu, um einen Würfel mit 6 Seiten zu erstellen.

val dice = Dice(6)

3. Rufen Sie die Methode roll() auf, um die Würfel zu werfen, und speichern Sie das Ergebnis in einer Variablen mit dem Namen diceRoll.

val diceRoll = dice.roll()

4. Rufen Sie findViewById() auf, um den TextView zu finden.

val resultTextView: TextView = findViewById(R.id.textView)

Die Variable diceRoll ist eine Zahl, während für TextView Text verwendet wird. Sie können die Methode toString() für diceRoll verwenden, um sie in einen String zu konvertieren.

5. Konvertieren Sie diceRoll in einen String und verwenden Sie diesen, um den Text von resultTextView zu aktualisieren.

resultTextView.text = diceRoll.toString()

So sieht die rollDice()-Methode aus:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

6. Führen Sie die App aus. Das Würfelergebnis sollte sich in andere Werte als 6 ändern. Da es sich um eine Zufallszahl zwischen 1 und 6 handelt, kann auch der Wert 6 manchmal angezeigt werden.

Hurra, du bist der Fels in der Brandung!

Es ist normal, dass Ihr Code etwas unübersichtlich aussieht, nachdem Sie hier und da Anpassungen vorgenommen haben, damit Ihre App funktioniert. Bevor Sie Ihren Code verlassen, sollten Sie jedoch einige einfache Bereinigungsaufgaben durchführen. Dann ist die App in einem guten Zustand und lässt sich in Zukunft leichter verwalten.

Diese Gewohnheiten sind es, die professionelle Android-Entwickler beim Schreiben ihres Codes anwenden.

Android-Styleguide

Wenn Sie in Teams arbeiten, ist es ideal, wenn die Teammitglieder Code auf ähnliche Weise schreiben, damit der Code einheitlich ist. Aus diesem Grund gibt es für Android einen Styleguide für das Schreiben von Android-Code, der Namenskonventionen, Formatierung und andere Best Practices enthält. Halten Sie sich beim Schreiben von Android-Code an diese Richtlinien: Kotlin-Styleguide für Android-Entwickler.

Im Folgenden finden Sie einige Möglichkeiten, wie Sie den Styleguide einhalten können.

Code bereinigen

Code komprimieren

Sie können Ihren Code prägnanter gestalten, indem Sie ihn in weniger Zeilen zusammenfassen. Hier sehen Sie beispielsweise den Code, mit dem der Klick-Listener für Button festgelegt wird.

rollButton.setOnClickListener {
    rollDice()
}

Da die Anleitung für den Klick-Listener nur eine Zeile lang ist, können Sie den rollDice()-Methodenaufruf und die geschweiften Klammern in einer Zeile zusammenfassen. So sieht das aus. Eine statt drei Zeilen.

rollButton.setOnClickListener { rollDice() }

Code neu formatieren

Als Nächstes formatieren Sie den Code neu, damit er den empfohlenen Konventionen für die Codeformatierung für Android entspricht.

1. Wählen Sie in der Klasse MainActivity.kt den gesamten Text in der Datei mit der Tastenkombination Control+A unter Windows oder Command+A auf einem Mac aus. Alternativ können Sie in Android Studio im Menü Bearbeiten > Alle auswählen aufrufen.
2. Wählen Sie den gesamten Text in der Datei aus und rufen Sie in Android Studio das Menü Code > Reformat Code auf oder verwenden Sie die Tastenkombination Ctrl+Alt+L (Command+Option+L auf dem Mac).

Dadurch wird die Formatierung Ihres Codes aktualisiert, einschließlich Leerzeichen, Einrückung und mehr. Möglicherweise sehen Sie keine Änderung. Das ist gut. Dein Code war dann bereits richtig formatiert.

Code kommentieren

Fügen Sie Ihrem Code Kommentare hinzu, um zu beschreiben, was in dem von Ihnen geschriebenen Code passiert. Wenn der Code komplexer wird, ist es auch wichtig, warum Sie den Code so geschrieben haben, wie Sie es getan haben. Wenn Sie später zum Code zurückkehren, um Änderungen vorzunehmen, ist möglicherweise immer noch klar, was der Code tut, aber Sie erinnern sich möglicherweise nicht mehr daran, warum Sie ihn so geschrieben haben.

Es ist üblich, für jede Klasse (MainActivity und Dice sind die einzigen Klassen in Ihrer App) und jede Methode, die Sie schreiben, einen Kommentar hinzuzufügen. Verwenden Sie die Symbole /** und **/ am Anfang und Ende Ihres Kommentars, um dem System mitzuteilen, dass es sich nicht um Code handelt. Diese Zeilen werden vom System ignoriert, wenn Ihr Code ausgeführt wird.

Beispiel für einen Kommentar zu einem Kurs:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

Beispiel für einen Kommentar zu einer Methode:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

Innerhalb einer Methode können Sie Kommentare hinzufügen, wenn das für den Leser Ihres Codes hilfreich ist. Sie können das Symbol // am Anfang Ihres Kommentars verwenden. Alles nach dem Symbol // in einer Zeile wird als Kommentar betrachtet.

Beispiel für zwei Kommentare in einer Methode:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

1. Nehmen Sie sich etwas Zeit, um Ihrem Code Kommentare hinzuzufügen.
2. Nach all diesen Änderungen an Kommentaren und Formatierung ist es ratsam, die App noch einmal auszuführen, um sicherzugehen, dass sie weiterhin wie erwartet funktioniert.

Im Lösungscode sehen Sie eine Möglichkeit, wie Sie Ihren Code kommentieren können.

Der Lösungscode für dieses Codelab befindet sich im unten gezeigten Projekt und Modul.

URL des Lösungscodes : https://github.com/google-developer-training/android-basics-kotlin-create-dice-roller-with-button-app-solution

So rufen Sie den Code für dieses Codelab von GitHub ab und öffnen ihn in Android Studio:

1. Starte Android Studio.
2. Klicken Sie im Fenster Welcome to Android Studio auf Check out project from version control.
3. Wählen Sie Git aus.

4. Fügen Sie im Dialogfeld Repository klonen die bereitgestellte Code-URL in das Feld URL ein.
5. Klicken Sie auf die Schaltfläche Testen, warten Sie und prüfen Sie, ob ein grünes Pop-up-Fenster mit der Meldung Verbindung erfolgreich angezeigt wird.
6. Optional können Sie das Verzeichnis in ein anderes als das vorgeschlagene Standardverzeichnis ändern.

7. Klicken Sie auf Klonen. Android Studio beginnt mit dem Abrufen Ihres Codes.
8. Klicken Sie im Pop-up-Fenster Checkout from Version Control auf Yes.

9. Warten Sie, bis Android Studio geöffnet wird.
10. Wählen Sie das richtige Modul für Ihren Codelab-Starter- oder Lösungscode aus.

11. Klicken Sie auf die Schaltfläche Ausführen , um Ihren Code zu erstellen und auszuführen.

Hilfe:Wenn der heruntergeladene Code nicht richtig geladen oder ausgeführt wird, sehen Sie im Leitfaden für Hilfe und Fehlerbehebung nach.

• Fügen Sie einer Android-App mit dem Layout-Editor ein Button hinzu.
• Ändern Sie die MainActivity.kt-Klasse, um der App interaktives Verhalten hinzuzufügen.
• Lassen Sie eine Toast-Meldung als temporäre Lösung einblenden, um zu prüfen, ob Sie auf dem richtigen Weg sind.
• Legen Sie mit setOnClickListener() einen On-Click-Listener für ein Button fest, um das Verhalten beim Klicken auf ein Button zu definieren.
• Wenn die App ausgeführt wird, können Sie den Bildschirm aktualisieren, indem Sie Methoden für TextView, Button oder andere UI-Elemente im Layout aufrufen.
• Kommentieren Sie Ihren Code, damit andere, die ihn lesen, nachvollziehen können, wie Sie vorgegangen sind.
• Formatieren Sie Ihren Code neu und bereinigen Sie ihn.

• Button-Klasse
• Toast-Klasse
• TextView-Klasse
• Kotlin-Styleguide für Android-Entwickler

Hinweis : Übungen sind optional. Sie bieten Ihnen die Möglichkeit, das in diesem Codelab Gelernte zu üben.

Gehen Sie so vor:

1. Fügen Sie der App einen weiteren Würfel hinzu. Wenn Sie auf die Schaltfläche Würfeln klicken, sollen zwei Würfel geworfen werden. Die Ergebnisse sollten auf dem Bildschirm in zwei verschiedenen TextViews angezeigt werden.

Arbeit überprüfen:

Die fertige App sollte fehlerfrei ausgeführt werden und zwei Würfel anzeigen.