Bedingungen in Kotlin – Teil 2

In diesem Codelab fügst du deiner vorhandenen Würfel-Android-App Würfel-Bilder hinzu. Stelle zuerst das vorherige Codelab bereit, um die Grundlage der Würfel-Roll-App zu schaffen.

Anstelle des Werts der Würfel in einer TextView zeigt Ihre App das entsprechende Würfelbild für die Anzahl der Seiten an, die gewürfelt wurden. So wird die App optisch ansprechender und nutzerfreundlicher.

Sie erhalten einen Link, über den Sie die Würfelbilder herunterladen können. Diese fügen Sie dann als Ressourcen in Ihrer App hinzu. Verwenden Sie eine when-Anweisung in Kotlin, um Code zu programmieren, für den Sie das Würfelbild verwenden möchten.

Vorbereitung

  • Wir haben das Codelab Erstellen einer Würfel-Android-App mit einer Schaltfläche abgeschlossen.
  • Er kann Steuerelementanweisungen erstellen (if / else, when-Anweisungen).
  • Er konnte die Benutzeroberfläche der App basierend auf der Nutzereingabe aktualisieren (die Datei MainActivity.kt wird geändert).
  • Ich kann einen Klick-Listener zu einem Button. hinzufügen
  • Er kann Bildressourcen zu einer Android-App hinzufügen.

Lerninhalte

  • ImageView aktualisieren, während die App ausgeführt wird.
  • App-Verhalten basierend auf verschiedenen Bedingungen anpassen (mit einer when-Anweisung)

Aufgaben

  • Eine Android-App mit Würfeln und Button, die auf einem Würfel gespielt wird und das Bild auf dem Bildschirm aktualisiert.

Voraussetzungen

  • Einen Computer, auf dem Android Studio installiert ist
  • Eine Internetverbindung zum Herunterladen der Würfelbilder.

Für diese Aufgabe ersetzen Sie TextView in Ihrem Layout durch ein ImageView, das ein Bild des Würfelergebnisses zeigt.

würfelförmige App öffnen

  1. Öffne die Würfelroller App in Studio mit einer Schaltfläche erstellen und führe sie aus.
    Die App sollte so aussehen.

  1. Öffne activity_main.xml (app > res > Layout > activity_main.xml).
    Dadurch wird der Layouteditor geöffnet.

TextView löschen

  1. Wählen Sie im Layouteditor den TextView in der Baumstruktur aus.
  1. Klicken Sie mit der rechten Maustaste und wählen Sie Löschen aus oder drücken Sie die Delete-Taste.
  2. Ignorieren Sie die Warnung für Button. Im nächsten Schritt wird das Problem behoben.

ImageView zum Layout hinzufügen

  1. Ziehen Sie eine ImageView aus der Palette in die Ansicht Design und positionieren Sie sie über der Button.

  1. Wählen Sie im Dialogfeld Ressource auswählen unter Beispieldaten die Option Avatare aus. Dies ist das temporäre Bild, das Sie verwenden, bis Sie in der nächsten Aufgabe die Würfelbilder hinzufügen.

  1. Tippen Sie auf OK. Die Designansicht Ihrer App sollte in etwa so aussehen.

  1. In der Baumstruktur werden zwei Fehler angezeigt. Button ist nicht vertikal eingeschränkt und ImageView ist weder vertikal noch horizontal eingeschränkt.

Button ist nicht vertikal eingeschränkt, weil du TextView entfernt hast, unterhalb derer es ursprünglich positioniert wurde. Jetzt müssen Sie die ImageView und die darunter liegende Button positionieren.

Position von ImageView und Schaltfläche festlegen

Du musst ImageView vertikal auf dem Bildschirm zentrieren, unabhängig davon, wo sich Button befindet.

  1. Fügen Sie der ImageView horizontale Beschränkungen hinzu. Verbinde die linke Seite von ImageView mit dem linken Rand des übergeordneten Elements ConstraintLayout.
  2. Verbinde die rechte Seite von ImageView mit dem rechten Rand des übergeordneten Elements.
    Dadurch wird die ImageView innerhalb des übergeordneten Elements horizontal zentriert.

  1. Fügen Sie dem ImageView eine vertikale Einschränkung hinzu und verbinden Sie den oberen Teil des ImageView-Elements mit dem oberen Bereich des übergeordneten Elements.
    Das Element ImageView wird nach oben zum ConstraintLayout verschoben.
  2. Fügen Sie dem Button eine vertikale Einschränkung hinzu und verbinden Sie den oberen Rand des Button mit dem Ende des ImageView.
    Der Button wird unter dem ImageView nach oben verschoben.
  3. Wähle jetzt noch einmal ImageView aus und füge eine vertikale Einschränkung hinzu, die den unteren Rand von ImageView mit dem unteren Rand des übergeordneten Elements verbindet.
    Dadurch wird die ImageView vertikal in ConstraintLayout zentriert.

Alle Warnungen zu Beschränkungen sollten jetzt entfernt sein.

Im Anschluss sollte die Ansicht Design so aussehen, wobei die ImageView in der Mitte und die Button darunter angezeigt werden.

Möglicherweise wird im ImageView in der Baumstruktur eine Warnung angezeigt, in der Sie aufgefordert werden, Ihrem ImageView eine Inhaltsbeschreibung hinzuzufügen. Im Moment solltest du dir keine Gedanken über diese Warnung machen, da du die Inhaltsbeschreibung von ImageView später auf der Grundlage deines Würfelbildes festlegst. Diese Änderung wird im Kotlin-Code vorgenommen.

In dieser Aufgabe laden Sie einige Würfelbilder herunter und fügen sie Ihrer App hinzu.

Würfelbilder herunterladen

  1. Öffnen Sie diese URL, um eine ZIP-Datei mit Würfelbildern auf Ihren Computer herunterzuladen. Warte, bis der Download abgeschlossen ist.
  2. Suchen Sie die Datei auf Ihrem Computer, wahrscheinlich im Ordner Downloads.
  3. Doppelklicken Sie auf die ZIP-Datei, um sie zu entpacken. Dadurch wird ein neuer DiceImages-Ordner erstellt, der sechs Würfel-Bilddateien mit den Würfelwerten von 1 bis 6 enthält.

Würfelbilder zur App hinzufügen

  1. Klicken Sie in Android Studio im Menü auf Ansicht & Tool für Windows-Tools oder auf den Tab Ressourcenmanager links neben dem Projekt-Fenster.
  2. Klicken Sie unter Ressourcenmanager auf das + und wählen Sie Drawables importieren aus. Ein Dateibrowser wird geöffnet.

  1. Suchen Sie die sechs Würfel-Bilddateien und wählen Sie sie aus. Du kannst die erste Datei auswählen und anschließend die Shift-Taste gedrückt halten, um die anderen Dateien auszuwählen.
  2. Klicken Sie auf Öffnen.
  1. Klicken Sie auf Next (Weiter) und dann auf Import (Importieren), um zu bestätigen, dass Sie diese sechs Ressourcen importieren möchten.

  1. Wenn die Dateien erfolgreich importiert wurden, sollten die 6 Bilder in der Liste Drawable für Ihre App angezeigt werden.

Gut gemacht! In der nächsten Aufgabe verwenden Sie diese Bilder in Ihrer App.

Wichtig! – Sie können sich die folgenden Bilder in Ihrem Kotlin-Code mit ihren Ressourcen-IDs ansehen:

  • R.drawable.dice_1
  • R.drawable.dice_2
  • R.drawable.dice_3
  • R.drawable.dice_4
  • R.drawable.dice_5
  • R.drawable.dice_6

Beispiel-Avatarbild ersetzen

  1. Wählen Sie im Design-Editor die Option ImageView aus.
  2. Suchen Sie unter Attribute im Abschnitt Deklarierte Attribute das Tool srcCompat, für das das Avatarbild festgelegt ist.

Beachten Sie, dass das Werkzeugsymbol srcCompat nur in der Ansicht Design von Android Studio verwendet wird. Das Bild wird Entwicklern nur beim Erstellen der App angezeigt. Es ist jedoch nicht zu sehen, wenn Sie die App tatsächlich im Emulator oder auf einem Gerät ausführen.

  1. Klicken Sie auf die kleine Vorschau des Avatars. Es wird ein Dialogfeld geöffnet, in dem Sie eine neue Ressource für diesen ImageView auswählen können.

  1. Wählen Sie die dice_1-Leiste aus und klicken Sie auf OK.

Wow! ImageView nimmt den gesamten Bildschirm ein.

Als Nächstes passen Sie die Breite und Höhe von ImageView an, damit die Button nicht ausgeblendet wird.

  1. Suchen Sie im Fenster Attributes unter dem Restrictions Widget die Attribute layout_width und layout_height. Sie ist derzeit auf Wrap_content festgelegt. Das bedeutet, dass die ImageView so hoch und breit wie der Content (das Quellbild) ist.
  2. Legen Sie stattdessen eine feste Breite von 160 dp und eine feste Höhe von 200 dp für ImageView fest. Drücken Sie die Eingabetaste.

    Die ImageView ist jetzt wesentlich kleiner.


Button ist möglicherweise etwas zu nah am Bild.

  1. Fügen Sie einen oberen Rand der Schaltfläche von 16 dp hinzu, indem Sie ihn im Constraint-Widget festlegen.

Sobald die Designansicht aktualisiert wurde, sieht die App viel besser aus.

Würfelbild ändern, wenn auf die Schaltfläche geklickt wird

Das Layout wurde korrigiert, aber die MainActivity-Klasse muss aktualisiert werden, um die Würfelbilder zu verwenden.

Die App „MainActivity.kt“ enthält momentan einen Fehler. Wenn Sie versuchen, die App auszuführen, wird dieser Build-Fehler angezeigt:

Das liegt daran, dass dein Code weiterhin auf TextView verweist, die du aus dem Layout gelöscht hast.

  1. Öffnen Sie MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt).

Der Code bezieht sich auf R.id.textView, dies wird in Android Studio jedoch nicht erkannt.

  1. Wählen Sie in der Methode rollDice() einen beliebigen Code, der sich auf TextView bezieht, aus und löschen Sie ihn.
// Update the TextView with the dice roll
val resultTextView: TextView = findViewByID(R.id.textView)
resultTextView.text = dice.roll().toString()
  1. Erstellen Sie außerdem innerhalb von rollRice() eine neue Variable namens diceImage vom Typ ImageView. Setzen Sie den Wert auf ImageView aus dem Layout. Verwende die Methode findViewById() und übergib die Ressourcen-ID von ImageView, R.id.imageView, als Eingabeargument.
val diceImage: ImageView = findViewById(R.id.imageView)

Wenn Sie sich nicht sicher sind, wie Sie die genaue Ressourcen-ID von ImageView ermitteln können, sehen Sie oben im Fenster Attribute nach. id.

Wenn Sie im Kotlin-Code auf diese Ressourcen-ID verweisen, müssen Sie genau dieselbe ID eingeben (kleines i, Großbuchstaben, keine Leerzeichen). Andernfalls wird in Android Studio ein Fehler angezeigt.

  1. Fügen Sie diese Codezeile hinzu, um zu testen, ob Sie ImageView korrekt aktualisieren können, wenn auf die Schaltfläche geklickt wird. Die Würfelform wird nicht immer auf „2“ gesetzt sein. Verwende zu Testzwecken einfach das Bild dice_2.
diceImage.setImageResource(R.drawable.dice_2)

Dieser Code ruft die Methode setImageResource() für ImageView auf und übergibt die Ressourcen-ID für das Bild dice_2. Dadurch wird ImageView auf dem Bildschirm aktualisiert, sodass das Bild dice_2 angezeigt wird.

Die Methode rollDice() sollte jetzt so aussehen:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val diceImage: ImageView = findViewById(R.id.imageView)
    diceImage.setImageResource(R.drawable.dice_2)
}
  1. Führen Sie Ihre App aus und überprüfen Sie, ob sie korrekt ausgeführt wird.

Die App sollte mit einem leeren Bildschirm beginnen, mit Ausnahme der Schaltfläche Rollen.

Sobald du auf die Schaltfläche tippst, wird ein Würfelbild mit dem Wert 2 eingeblendet. Ja!

Das Bild konnte basierend auf dem Tippen auf die Schaltfläche geändert werden. Du kommst der Sache näher!

Eine gute Antwort auf die Würfel ist immer eine 2. Verwenden Sie die Kontrollflusslogik, die Sie im Codelab Bedingtes Verhalten für verschiedene Würfel hinzufügen kennen, damit das entsprechende Würfelbild auf dem Bildschirm je nach Zufall angezeigt wird.

Bevor Sie mit der Eingabe von Code beginnen, sollten Sie sich überlegen, wie sich die App verhalten soll. Beschreiben Sie dazu den Pseudocode der App. Beispiel:

Wenn der Nutzer eine 1 hat, wird das Bild von dice_1 angezeigt.

Wenn der Nutzer eine 2 bewegt, wird das Bild von dice_2 angezeigt.

usw.

Der obige Pseudocode kann mit if / else-Anweisungen in Kotlin basierend auf dem Wert der Würfel geschrieben werden.

if (diceRoll == 1) {
   diceImage.setImageResource(R.drawable.dice_1)
} else if (diceRoll == 2) {
   diceImage.setImageResource(R.drawable.dice_2)
}
 ...

Das Schreiben von if / else für jeden Fall ist aber ein ziemlich guter Anfang. Dieselbe Logik kann auch mit einer when-Anweisung vereinfacht werden. Das ist kürzer (weniger Code). Gehen Sie in Ihrer App entsprechend vor.

when (diceRoll) {
   1 -> diceImage.setImageResource(R.drawable.dice_1)
   2 -> diceImage.setImageResource(R.drawable.dice_2)
   ...

„rollDice()“-Methode aktualisieren

  1. Löschen Sie in der rollDice()-Methode die Codezeile, die jedes Mal die Bildressourcen-ID auf dice_2-Bild setzt.
diceImage.setImageResource(R.drawable.dice_2)
  1. Ersetzen Sie es durch eine when-Anweisung, die den ImageView auf der Grundlage des diceRoll-Werts aktualisiert.
   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }

Die Methode rollDice() sollte so aussehen, wenn Sie mit den Änderungen fertig sind.

private fun rollDice() {
   val dice = Dice(6)
   val diceRoll = dice.roll()

   val diceImage: ImageView = findViewById(R.id.imageView)

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }
}
  1. Führe die App aus. Wenn du auf Roll klickst, wird das Würfelbild auf andere Werte außer 2 gesetzt. Es funktioniert.

Code optimieren

Sie können den folgenden Code ändern, wenn Sie noch prägnanteren Code schreiben möchten. Er hat keine sichtbaren Auswirkungen auf den Nutzer Ihrer App, wird jedoch dazu führen, dass sich der Code kürzer und weniger häufig wiederholt.

Du hast vielleicht bemerkt, dass der Aufruf von diceImage.setImageResource() sechsmal in deiner „If“-Anweisung erscheint.

when (diceRoll) {
    1 -> diceImage.setImageResource(R.drawable.dice_1)
    2 -> diceImage.setImageResource(R.drawable.dice_2)
    3 -> diceImage.setImageResource(R.drawable.dice_3)
    4 -> diceImage.setImageResource(R.drawable.dice_4)
    5 -> diceImage.setImageResource(R.drawable.dice_5)
    6 -> diceImage.setImageResource(R.drawable.dice_6)
}

Die einzige Änderung zwischen den einzelnen Fällen ist die verwendete Ressourcen-ID. Das bedeutet, dass Sie eine Variable erstellen können, um die zu verwendende Ressourcen-ID zu speichern. Dann können Sie diceImage.setImageResource() nur einmal in Ihrem Code aufrufen und die richtige Ressourcen-ID übergeben.

  1. Ersetzen Sie den Code oben durch Folgendes.
val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   6 -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

Ein neues Konzept besteht darin, dass ein when-Ausdruck tatsächlich einen Wert zurückgeben kann. Mit diesem neuen Code-Snippet gibt der when-Ausdruck die richtige Ressourcen-ID zurück, die in der Variable drawableResource gespeichert wird. Mit dieser Variablen können Sie dann die angezeigte Bildressource aktualisieren.

  1. Beachten Sie, dass when jetzt rot unterstrichen ist. Wenn Sie den Mauszeiger darauf bewegen, wird eine Fehlermeldung angezeigt: 'when' Ausdruck muss vollständig sein. Fügen Sie den erforderlichen Zweig hinzu.

Der Fehler ist darauf zurückzuführen, dass der Wert des when-Ausdrucks drawableResource zugewiesen ist. Deshalb muss when vollständig sein. Er muss alle Fälle verarbeiten, damit ein Wert immer zurückgegeben wird, auch wenn Sie zu einem 12-seitigen Würfel wechseln. In Android Studio wird empfohlen, einen Branch else hinzuzufügen. Sie können das Problem beheben, indem Sie die Anfrage für 6 zu else ändern. Die Fälle für 1 bis 5 sind identisch, aber alle anderen Fälle, einschließlich 6, werden von else bearbeitet.

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   else -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)
  1. Führen Sie die App aus, um sicherzustellen, dass sie weiterhin korrekt funktioniert. Teste dabei aber so, dass alle Zahlen in den Würfelbildern 1–6 erscheinen.

In ImageView eine geeignete Inhaltsbeschreibung erstellen

Da Sie die gerollte Zahl nun mit einem Bild ersetzt haben, können die Screenreader nicht mehr erkennen, welche Nummer gerollt wurde. Aktualisiere nach der Aktualisierung der Bildressource die Inhaltsbeschreibung von ImageView. Die Inhaltsbeschreibung sollte eine Textbeschreibung der Inhalte sein, die im ImageView angezeigt werden, damit Screenreader sie beschreiben können.

diceImage.contentDescription = diceRoll.toString()

Diese Textbeschreibung kann von Screenreadern vorgelesen werden. Wenn also die Würfelrolle auf dem Bildschirm angezeigt wird, wird die Inhaltsbeschreibung laut als „6"“ vorgelesen.

Nützlichere Produkteinführungen ermöglichen

Wenn der Nutzer die App zum ersten Mal öffnet, ist die App leer (mit Ausnahme der Schaltfläche Roll), die ungewöhnlich erscheint. Die Nutzer wissen möglicherweise nicht, was sie erwartet. Ändere also die Benutzeroberfläche, wenn du das Spiel nach dem ersten Mal starten und die Activity erstellen möchtest. Dann ist die Wahrscheinlichkeit höher, dass Nutzer auf die Schaltfläche Roll tippen, um Würfel zu erzeugen.

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

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

   // Do a dice roll when the app starts
   rollDice()
}

Code kommentieren

Fügen Sie dem Code Kommentare hinzu, um zu beschreiben, was in dem Code geschieht.

Nachdem Sie alle diese Änderungen vorgenommen haben, könnte Ihre rollDice()-Methode so aussehen.

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {
   // Create new Dice object with 6 sides and roll the dice
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Find the ImageView in the layout
   val diceImage: ImageView = findViewById(R.id.imageView)

   // Determine which drawable resource ID to use based on the dice roll
   val drawableResource = when (diceRoll) {
       1 -> R.drawable.dice_1
       2 -> R.drawable.dice_2
       3 -> R.drawable.dice_3
       4 -> R.drawable.dice_4
       5 -> R.drawable.dice_5
       else -> R.drawable.dice_6
   }

   // Update the ImageView with the correct drawable resource ID
   diceImage.setImageResource(drawableResource)

   // Update the content description
   diceImage.contentDescription = diceRoll.toString()
}

Die vollständige MainActivity.kt-Datei finden Sie im unten verlinkten Lösungscode auf GitHub.

Gut gemacht, dass du die Würfel-App fertiggestellt hast! Jetzt kannst du diese App gemeinsam mit deinen Freunden zum nächsten Gamingabend bringen!

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

So rufst du den Code für dieses Codelab auf GitHub ab und öffnest es in Android Studio:

  1. Starte Android Studio.
  2. Klicken Sie im Fenster Welcome to Android Studio (Willkommen in Android Studio) auf Check out project from version management (Projekt aus der Versionsverwaltung ansehen).
  3. Wählen Sie Git aus.

  1. Fügen Sie im Dialogfeld Repository klonen die angegebene Code-URL in das Feld URL ein.
  2. Klicken Sie auf die Schaltfläche Test (Testen). Prüfen Sie danach, ob ein grünes Pop-up-Infofeld mit der Meldung Verbindung erfolgreich angezeigt wird.
  3. Optional: Ändern Sie das Directory in ein anderes Verzeichnis als den vorgeschlagenen Standardwert.

  1. Klicken Sie auf Klonen. Der Code wird in Android Studio abgerufen.
  2. Klicken Sie im Pop-up Kästchen zur Versionsverwaltung auf Ja.

  1. Warten Sie, bis Android Studio geöffnet wurde.
  2. Wähle das richtige Modul für den Codelab-Starter oder den Lösungscode aus.

  1. Klicken Sie auf Erstellen , um den Code zu erstellen und auszuführen.
  • Mithilfe von setImageResource() kann das Bild geändert werden, das in einem ImageView angezeigt wird.
  • Mit Steuerelement-Ablaufanweisungen wie if / else- oder when-Ausdrücken können Sie verschiedene Fälle in Ihrer App verarbeiten, zum Beispiel unterschiedliche Bilder unter verschiedenen Umständen anzeigen.

Gehen Sie so vor:

  1. Füge einen weiteren Würfel zur App hinzu, sodass eine Roll-Schaltfläche zwei Würfel Ergebnisse liefert. Wie viele ImageViews brauchen Sie in Ihrem Layout? Wie wirkt sich das auf den Code MainActivity.kt aus?

Aufgaben prüfen:

Die abgeschlossene App sollte problemlos funktionieren und beide Würfel anzeigen.