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
- Öffne die Würfelroller App in Studio mit einer Schaltfläche erstellen und führe sie aus.
Die App sollte so aussehen.
- Öffne
activity_main.xml
(app > res > Layout > activity_main.xml).
Dadurch wird der Layouteditor geöffnet.
TextView löschen
- Wählen Sie im Layouteditor den
TextView
in der Baumstruktur aus.
- Klicken Sie mit der rechten Maustaste und wählen Sie Löschen aus oder drücken Sie die
Delete
-Taste. - Ignorieren Sie die Warnung für
Button
. Im nächsten Schritt wird das Problem behoben.
ImageView zum Layout hinzufügen
- Ziehen Sie eine
ImageView
aus der Palette in die Ansicht Design und positionieren Sie sie über derButton
.
- 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.
- Tippen Sie auf OK. Die Designansicht Ihrer App sollte in etwa so aussehen.
- In der Baumstruktur werden zwei Fehler angezeigt.
Button
ist nicht vertikal eingeschränkt undImageView
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.
- Fügen Sie der
ImageView
horizontale Beschränkungen hinzu. Verbinde die linke Seite vonImageView
mit dem linken Rand des übergeordneten ElementsConstraintLayout
. - Verbinde die rechte Seite von
ImageView
mit dem rechten Rand des übergeordneten Elements.
Dadurch wird dieImageView
innerhalb des übergeordneten Elements horizontal zentriert.
- Fügen Sie dem
ImageView
eine vertikale Einschränkung hinzu und verbinden Sie den oberen Teil desImageView
-Elements mit dem oberen Bereich des übergeordneten Elements.
Das ElementImageView
wird nach oben zumConstraintLayout
verschoben. - Fügen Sie dem
Button
eine vertikale Einschränkung hinzu und verbinden Sie den oberen Rand desButton
mit dem Ende desImageView
.
DerButton
wird unter demImageView
nach oben verschoben. - Wähle jetzt noch einmal
ImageView
aus und füge eine vertikale Einschränkung hinzu, die den unteren Rand vonImageView
mit dem unteren Rand des übergeordneten Elements verbindet.
Dadurch wird dieImageView
vertikal inConstraintLayout
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
- Öffnen Sie diese URL, um eine ZIP-Datei mit Würfelbildern auf Ihren Computer herunterzuladen. Warte, bis der Download abgeschlossen ist.
- Suchen Sie die Datei auf Ihrem Computer, wahrscheinlich im Ordner Downloads.
- 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
- Klicken Sie in Android Studio im Menü auf Ansicht & Tool für Windows-Tools oder auf den Tab Ressourcenmanager links neben dem Projekt-Fenster.
- Klicken Sie unter Ressourcenmanager auf das + und wählen Sie Drawables importieren aus. Ein Dateibrowser wird geöffnet.
- 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. - Klicken Sie auf Öffnen.
- Klicken Sie auf Next (Weiter) und dann auf Import (Importieren), um zu bestätigen, dass Sie diese sechs Ressourcen importieren möchten.
- 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
- Wählen Sie im Design-Editor die Option
ImageView
aus. - 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.
- 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.
- 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.
- 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. - 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.
DieImageView
ist jetzt wesentlich kleiner.
Button
ist möglicherweise etwas zu nah am Bild.
- 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.
- Ö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.
- Wählen Sie in der Methode
rollDice()
einen beliebigen Code, der sich aufTextView
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()
- Erstellen Sie außerdem innerhalb von
rollRice()
eine neue Variable namensdiceImage
vom TypImageView
. Setzen Sie den Wert aufImageView
aus dem Layout. Verwende die MethodefindViewById()
und übergib die Ressourcen-ID vonImageView
,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.
- 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 Bilddice_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)
}
- 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
- Löschen Sie in der
rollDice()
-Methode die Codezeile, die jedes Mal die Bildressourcen-ID aufdice_2
-Bild setzt.
diceImage.setImageResource(R.drawable.dice_2)
- Ersetzen Sie es durch eine
when
-Anweisung, die denImageView
auf der Grundlage desdiceRoll
-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)
}
}
- 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.
- 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.
- 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)
- 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:
- Starte Android Studio.
- Klicken Sie im Fenster Welcome to Android Studio (Willkommen in Android Studio) auf Check out project from version management (Projekt aus der Versionsverwaltung ansehen).
- Wählen Sie Git aus.
- Fügen Sie im Dialogfeld Repository klonen die angegebene Code-URL in das Feld URL ein.
- 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.
- Optional: Ändern Sie das Directory in ein anderes Verzeichnis als den vorgeschlagenen Standardwert.
- Klicken Sie auf Klonen. Der Code wird in Android Studio abgerufen.
- Klicken Sie im Pop-up Kästchen zur Versionsverwaltung auf Ja.
- Warten Sie, bis Android Studio geöffnet wurde.
- Wähle das richtige Modul für den Codelab-Starter oder den Lösungscode aus.
- 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
- oderwhen
-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:
- 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 CodeMainActivity.kt
aus?
Aufgaben prüfen:
Die abgeschlossene App sollte problemlos funktionieren und beide Würfel anzeigen.