In den letzten 3 Videos haben wir ein kleines Spiel für Android entwickelt. Schau dir die letzten Teile unbedingt an, da lernst du wie man das Layout erstellt, die Spielelogik baut und vieles mehr.

Mit diesem Video wollen wir das Spiel abschließen und eine Highscore einbauen. So sieht man schnell, wie der Rekord im Spiel ist. Dazu lernen wir, wie Daten gespeichert und geladen werden.

Layout erweitern

Zunächst müssen wir unser Layout erweitern und eine neue TextView hinzufügen, die dann unsere Highscore anzeigen kann. Ich schlage vor, dass wir die neue TextView ganz oben platzieren, so hat man den Spielrekord immer gut im Blick.

Denk daran der neuen TextView eine ID zu geben, damit wir sie im nächsten Schritt im Programmcode verwenden können. Als ID nehmen wir einfach „highscore“, das schreiben wir so:

android:id="@+id/highscore"

Farben und Texte liegen wir immer in Resource-Dateien ab. Das hat den Vorteil, dass wir dann ganz einfach Texte in andere Sprachen übersetzen können. Außerdem lassen sich Farben für verschiedene Szenarien festlegen. So kann sich die App zum Beispiel nachts bzw. im Dark Mode in dunklen Farben präsentieren. Ziemlich cooles Feature, das hat nicht mal WhatsApp. 😉

Die Texte definieren wir in der strings.xml, die findest du im „res“-Ordner.

Eine Besonderheit bei dem Highscore-Text ist, dass der Text einen Platzhalter enthält, der im Spiel dynamisch ersetzt werden soll. Platzhalter schreibe ich immer mit einem Prozentzeichen vor und nach dem Wort. Ich empfehle dir das auch so zu machen, das hat sich bewährt. Diesen Platzhalter %value% ersetzen wir dann später automatisch im Code.

<string name="highscore" translatable="false">Highscore: %value%</string>

Denk daran, dass alle Texte übersetzt werden müssen, falls du mehrere Sprachen für deine App angelegt hast. Wenn ein Text in allen Sprachen gleich sein soll, setze im Sprachen-Editor das Häkchen bei „untranslatable“.

Die Farben definieren wir in der colors.xml.

Falls du eine zweite colors.xml angelegt hast, um Farben für den Night Mode zu definieren, solltest du auch die neuen Farben für die Highscore dort ergänzen. Schau dir das vorherige Video an. Darin erkläre ich dir, wie das mit dem Night Mode funktioniert.

Highscore im Code anbinden

Als nächstes müssen wir unsere neue TextView im Code anbinden, damit wir sie benutzen können.

Dazu deklarieren wir diese TextView zunächst oben in unserer MainActivity-Klasse. Außerdem brauchen wir auch wieder einen Zähler. Den deklarieren wir gleich mit.

In der „initViews“-Methode suchen wir alle Views aus dem Layout und weisen sie unseren deklarierten Variablen zu. Das müssen wir natürlich auch mit der neuen Highscore-TextView so machen.

Highscore hochzählen

Immer dann, wenn der Nutzer den korrekten Button gedrückt hat und damit weitergekommen ist als beim letzten Mal, müssen wir die Highscore hochzählen.

Also wörtlich: „Wenn die aktuelle Zahl größer ist als die aktuelle Highscore, dann soll die Highscore gleich der aktuellen Zahl sein (also sich entsprechend erhöhen)“.

Um den neuen Highscore-Wert anzuzeigen, müssen wir ihn in unsere Highscore-TextView schreiben. Dazu holen wir uns den Highscore-Text aus der strings.xml mit „getString“. Und den Platzhalter %value% ersetzen wir mit „replace“. So sieht das im Code aus:

highscoreView.setText(getString(R.string.highscore).replace("%value%", String.valueOf(highscore)));

Highscore speichern

Die Highscore müssen wir speichern. Denn alle Werte verschwinden, wenn man die App beendet und neu startet. Wir wollen aber, dass man auch noch Tage später sieht, wie der Rekord ist.

Am Besten speichern wir die Highscore immer dann, wenn wir sie hochzählen.

Dazu nutzen wir eine Klasse von Android, die „SharedPreferences“ heißt. Übersetzt heißt das „geteilte Einstellungen“, da man diese Klasse dazu nutzen kann, um Einstellungen zu speichern und sogar mit anderen Apps zu teilen, zumindest war das früher so. Heutzutage nutzt man diese Klasse um einfache Werte zu speichern und später wieder laden.

Damit wir Werte in den SharedPreferences speichern können, müssen wir den SharedPreferences-Editor nutzen.

SharedPreferences preferences = getPreferences(MODE_PRIVATE);

Und schließlich können wir dann mit Hilfe des Editors Werte speichern. In unserem Fall wollen wir die Highscore, eine ganze natürliche Zahl, speichern.

SharedPreferences.Editor editor = preferences.edit();
editor.putInt("highscore", highscore);

Wichtig: Du musst am Ende noch eine Zeile hinzufügen, damit die Einstellungen auch tatsächlich gespeichert werden.

editor.apply();

Highscore laden

Der Spieler kann nun die App beenden, wenn er nicht mehr spielen möchte. Startet er die App neu, soll die gespeicherte Highscore wieder geladen und angezeigt werden. Das machen wir am Besten in der onCreate-Methode, denn die wird immer dann aufgerufen, wenn die App startet und die MainActivity erzeugt wird.

Um die Highscore zu laden, nutzen wir wieder die SharedPreferences. Den Editor brauchen wir diesmal nicht, da wir Werte nur laden, aber nicht verändern möchten.

SharedPreferences preferences = getPreferences(MODE_PRIVATE);

Wir holen uns den Wert mit dem Namen „highscore“ aus den SharedPreferences. Falls keiner gespeichert ist (weil die App zum ersten Mal benutzt wird), soll die Highscore 0 sein. Das nennt sich „Fallback“ oder „Default“-Wert.

highscore = preferences.getInt("highscore", 0);

Nun haben wir unsere interne Variable gesetzt und müssen die Highscore-TextView wieder nutzen, um den Wert anzuzeigen.

highscoreView.setText(getString(R.string.highscore).replace("%value%", String.valueOf(highscore)));

Code wiederverwenden

Die Code-Zeile zum Aktualisieren der Highscore-TextView haben wir jetzt zweimal in unserer MainActivity. Das ist immer schlecht, denn Code wollen wir nicht kopieren, sondern nur einmal haben und ihn wiederverwenden. Deswegen nutzen wir für alles, was in der App passieren soll, einzelne Methoden/Funktionen.

Um also diesen Code nicht doppelt zu haben, schreiben wir eine neue Methode dafür. Die können wir einfach „showHighscore“ nennen.

Diese Methode rufen wir jetzt dort auf, wo vorher die Code-Zeile stand. Also einmal in loadHighscore, nachdem wir die Highscore geladen haben und einmal in onCorrect, nachdem der Nutzer einen neuen Rekord erreicht hat.

Fertig!

Quellcode herunterladen

Wenn du möchtest, kannst du dir den kompletten Quellcode der App herunterladen. Das kann dir helfen, falls du beim Nachbauen nicht weiterkommst. Klicke dazu hier.