Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Stellen Sie ein Hangman-Spiel: Benutzeroberfläche

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Create a Hangman Game for Android.
Create a Hangman Game: User Interaction

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In dieser Serie erstellen wir ein Hangman-Spiel für die Android-Plattform.  Im ersten Tutorial haben wir die Anwendung so eingerichtet, dass der Benutzer zwei Bildschirme angezeigt bekommt. Außerdem haben wir mit den Elementen der Benutzeroberfläche, die Bilder und die Zeichenformulare beginnen, um genau zu sein.  Im zweiten Tutorial werden wir das Spiellayout vergrößern. 


Einführung

Um das Layout des Spiels zu erstellen, müssen Sie einen Adapter verwenden, um den Buchsentasten zu erstellen und die Körperpotentiometer zu positionieren, werden die entsprechenden Funktionen angepasst.  Wir sprechen die Antworten des Spielers auch in XML, ruf Sie ab und wählen Sie ein fälliges Wort mit Java. 

Um dein Gedächtniß aufzufrischen, wird das letzte Spiel so aussehen. 

Android Hangman Game Final

1. Stellen Sie die Körperteile 

Schritt 1 

Im vorherigen Tutorial haben wir Bilder für den Galgen und für die sechs Körper erstellt.  Wir werden diese im Layout des Spiels in diesem Tutorial platzieren. Die Positionen, die Sie für diese Elemente festlegen, müssen von den Bildelementen bestimmt werden.  Ein Satz von Bildern, die Bilder in einem Bildbearbeitungsprogramm wie Adobe Photoshop zu importieren, sie manuell zu positionieren und dann ihre X- und Y-Positionen zu einem Bild zu verwenden, um die richtigen Positionen für Bild im XML-Layout festzulegen.  Wenn Sie mit den Demo-Bildern beginnen, können Sie im Voraus ein Lernprogramm durchführen, in dem Sie ein Lernprogramm ausführen können. 

Öffnen Sie zuerst activity_game.xml.  Geben Sie ein Layout für die Layouts ein, das ein Tutorial zum Thema "Layout" enthält. Layout ein, um die Bilder aufheben, aus dem Galgenbereich besteht. 

Schritt 2

In dem relativen Layout, das mit dem Hintergrund des Galgenbildes wie folgt gezeigt wird. 

Denken Sie daran, dass die Namen zu ändern, wenn das von Ihnen verwendete Bild anders ist.  Wir setzen das linke und obere Padding des Bildes auf 0, damit wir die anderen Bilder relativ zu ihrer Position positionieren können.  Wir werden in diesem Tutorial etwas weiterführende String-Ressourcen für die Inhaltsbeschreibungen hinzufügen.  Als nächstes ist der Kopf. 

Wenn Sie Ihre eigenen Bilder verwenden, müssen Sie den linken und oberen Abstand entsprechend ändern.  Wir verwenden ein ID-Attribut, das wir auf das Bild im Code weisen können.  Dies ist nützlich, wenn es sich um eine Benutzertabelle handelt.  Das nächste Bild, das wir hinzufügen, ist der Körper.

Das sieht sehr schön aus, war für den Kopf haben Sie und können Sie sehen, können Sie sehen, dass die Arme und Beine sehr ähnlich. 

Öffnen Sie die Res- / Values-XML-Datei des Projekts und fügen Sie die Inhaltsbeschreibungen hinzu, die in den folgenden Codefragmenten verwendet werden. 

Gehen Sie zurück zur Layout-Datei und wechseln Sie zur Grafikkarte Grafisches Layout, um das Ergebnis unserer Arbeit zu sehen.  Passen Sie die obere und linke Füllung jedes Bildes an, um ihre Position bei Bedarf anzupassen. 

Android Hangman Game Layout

Wann immer ein neues Spiel gestartet wird, müssen die Körperteile verdeckt werden.  Jeder Körperteil wird aufgedeckt, wenn die Spieler einen Buchstaben auswählen, der im Zielwort nicht vorhanden ist. 


2. Speichern Sie die Antwortwörter

Das Spiel verwendet eine Sammlung vordefinierter Wörter, die wir in XML speichern. You are the order with the water for Projects rules a new files.xml.

Android Hangman Game Arrays File

With the Register XML, erstellen Sie ein Array und fügen Sie ein. 

Für dieses Tutorial verwenden wir einen Array von Wörten, die sich auf Computer beziehen.  Um das Spiel interessant zu gestalten, können Sie mit verschiedenen Kategorien arbeiten, wobei alle Kategorien, die sich auf ein bestimmtes Thema beziehen.  Wenn die Benutzer auf die Wiedergabestaste klicken, können Sie sie auswählen, eine Kategorie auswählen und das entsprechende Wortfeld eingeben. 

3. Wählen Sie und präsentieren Sie ein Wort 

Schritt 1 

Zurück in die Aktivitätslayoutdatei Ihr Spiel ist für Sie ein lineares Layout direkt nach dem relativen Layout, das für den Galgenbereich hinzugefügt hat. Das lineare Layout ist für den Antwortbereich reserviert.

Wir speichern jedes Zeichen des Zielwortes in einer eigenen Textansicht, so dass wir jeden Buchstaben einzeln aufdecken können.  Wir benutzen die ID des linearen Layouts im Code, um die Textansichten zu ändern, wenn ein neues Wort ausgewählt wird. 

Schritt 2 

Öffnen Sie die GameActivity-Klasse und führen Sie die folgenden Importanweisungen nach. 

Innerhalb der Klassendeklaration fügen Sie eine OnCreate-Methode wie unten gezeigt hinzu.

Wir setzen die Inhaltsansicht auf die Layoutdatei, die wir gerad. 

Schritt 3

Bevor wir fortfahren, müssen wir einige Instanzvariablen deklarieren.  Fügen Sie die Deklaration unmittelbar vor der onCreate-Methode hinzu. 

Die Sammlung von Wörtern wird in einem Array gespeichert und die Anwendung verwendet das Rand-Objekt, um jedes Mal, wenn der Benutzer ein neues Spiel startet, ein Wort aus dem Array auszuwählen.  Wir behalten einen Verweis auf das aktuelle Wort (currWord), das von uns erstellte Layout für den Antwortbereich (wordLayout) und eine Reihe von Textansichten für die Buchstaben (charViews).  Zurück in onCreate, nachdem Sie die Inhaltsansicht festgelegt haben, fordern Sie die Ressourcen der Anwendung an, lesen Sie die Wortgruppe und speichern Sie sie in der Variablen für die Wörterinstanz. 

Beachten Sie, dass wir den Namen verwenden, den wir dem Wortarray in XML gegeben haben.  Initialisieren Sie das rand-Objekt und die currWord-Zeichenfolge.

Erhalten Sie einen Verweis auf den Layoutbereich, den wir für die Antwortbuchstaben erstellt haben. 

Schritt 4

Eine Reihe von Aufgaben müssen jedes Mal ausgeführt werden, wenn ein neues Spiel vom Spieler gestartet wird.  Lassen Sie uns eine Hilfsmethode erstellen, um alles organisiert zu halten.  Fügen Sie nach der onCreate-Methode die folgende Methodengliederung hinzu. 

Beginnen Sie mit der Methode playGame, indem Sie ein zufälliges Wort aus dem Array auswählen. 

Da die playGame-Methode aufgerufen wird, wenn der Benutzer nach dem Gewinnen oder Verlieren eines Spiels erneut spielen möchte, ist es wichtig, dass wir sicherstellen, dass wir nicht zweimal hintereinander dasselbe Wort auswählen. 

Aktualisieren Sie die Instanzvariable currWord mit dem neuen Zielwort. 

Schritt 5

Der nächste Schritt besteht darin, für jeden Buchstaben des Zielworts eine Textansicht zu erstellen.  Erstellen Sie in unserer Hilfsmethode ein neues Array zum Speichern der Textansichten für die Buchstaben des Zielworts. 

Als Nächstes entfernen Sie alle Textansichten aus dem WordLayout-Layout.   

Verwenden Sie eine einfache for-Schleife, um über jeden Buchstaben der Antwort zu iterieren, eine Textansicht für jeden Buchstaben zu erstellen und den Text der Textansicht auf den aktuellen Buchstaben zu setzen. 

Die Zeichenfolge wird als ein Array von Zeichen gespeichert.  Mit der charAt-Methode können wir auf die Zeichen eines bestimmten Index zugreifen.  Innerhalb der for-Schleife legen Sie die Anzeigeeigenschaften in der Textansicht fest und fügen sie dem Layout hinzu.

Wir setzen die Textfarbe auf Weiß, damit der Benutzer sie nicht vor dem weißen Hintergrund sehen kann.  Wenn sie den Buchstaben richtig erraten, ist die Eigenschaft der Textfarbe zu schwarz, um sie dem Spieler zu zeigen.  Rufen Sie in der onCreate-Methode die soeben erstellte Hilfsmethode auf.

Wir werden die Methode onCreate und die Hilfsmethode etwas später erweitern. 


4. Erstellen Sie die Briefschaltflächen 

Schritt 1 

Der nächste Schritt besteht darin, einen Bereich zu erstellen, in dem der Spieler die zu erratenen Buchstaben auswählen kann.  Besuche das Aktivitätslayout des Spiels erneut und füge die folgende Gitteransicht hinzu, um die Buchstabentasten zu halten.  Fügen Sie die Rasteransicht unmittelbar nach dem linearen Layout ein, das wir für das Antwortwort hinzugefügt haben.

Wir verwenden einen Adapter, um die Buchstaben des Alphabets den Schaltflächen in der Rasteransicht zuzuordnen.  Wir legen sieben Schaltflächen pro Zeile an, wie Sie dem Attribut numColumns entnehmen können. 

Schritt 2

Jeder Buchstabe wird eine Schaltfläche sein, die mit einem Adapter zum Layout hinzugefügt wird.  Fügen Sie in Ihrem Projektlayoutordner eine neue Datei hinzu, nennen Sie sie "letter.xml", und füllen Sie sie mit dem folgenden Code-Snippet auf. 

Wir verwenden eine der Zeichenformen, die wir letztes Mal erstellt haben, als Hintergrund und legen eine onClick-Methode fest, die wir beim nächsten Mal implementieren werden.  Wenn Sie die Anwendung so erweitern, dass sie auf unterschiedliche Bildschirmdichten abzielt, können Sie das Höhenattribut entsprechend anpassen. 

Schritt 3

Fügen Sie dem src-Paket Ihres Projekts eine neue Klasse hinzu, nennen Sie es LetterAdapter und wählen Sie android.widget.BaseAdapter als Oberklasse.

Android Hangman Game Adapter Class

Wie Sie sehen werden, enthält eine Adapterklasse eine Reihe von Standardmethoden, die wir implementieren werden.  Fügen Sie der neuen Klasse die folgenden Importanweisungen hinzu. 

Fügen Sie in der Klassendeklaration zwei Instanzvariablen wie unten gezeigt hinzu. 

Das Buchstaben-Array speichert die Buchstaben des Alphabets, und der Layout-Inflator wendet das Tastenlayout an, das wir für jede vom Adapter gehandhabte Ansicht definiert haben.  Fügen Sie nach den Instanzvariablen eine Konstruktormethode für den Adapter hinzu.

Konstruieren Sie im Konstruktor das alphabetische Array und weisen Sie jeder Position die Buchstaben A bis Z zu. 

Jedes Zeichen wird als eine Zahl dargestellt, so dass wir die Buchstaben A bis Z in einer Schleife beginnend bei Null setzen können, indem wir den Wert des Zeichens A zu jedem Array-Index hinzufügen.  Geben Sie innerhalb der Konstruktormethode den Kontext an, in dem das Layout aufgebläht werden soll, das später von der Hauptaktivität übergeben wird. 

Eclipse sollte einen getCount-Methodenentwurf erstellt haben.  Aktualisieren Sie die Implementierung wie folgt. 

Dies entspricht der Anzahl der Ansichten, eine für jeden Buchstaben.  Wir rufen die Methoden in der Adapterklasse nicht explizit in der Anwendung auf.  Es ist das Betriebssystem, das sie verwendet, um das Benutzeroberflächenelement zu erstellen, auf das wir den Adapter anwenden, in diesem Fall die Rasteransicht. 

Aktualisieren Sie die Implementierung von getView wie im folgenden Codefragment gezeigt. 

Nehmen Sie sich einen Moment Zeit, um alles in sich aufzunehmen.  Im Wesentlichen baut diese Methode jede Ansicht, die dem Benutzeroberflächenelement zugeordnet ist, über den Adapter auf.  Wir füllen das von uns erstellte Tastenlayout auf und stellen den Buchstaben entsprechend der Position im Alphabet ein, die die Ansicht darstellt.  Wir haben angegeben, dass 26 Ansichten zugeordnet werden, wobei die Position der Positionen jeweils ihre Position in der alphabetischen Anordnung widerspiegelt.  Sie können die anderen Methoden in der Adapterklasse so belassen, wie sie sind.

Schritt 4 

Besuche die Aktivitätsklasse des Spiels erneut und füge eine Instanzvariable für die Gitteransicht und den Adapter hinzu. 

Sie müssen außerdem eine weitere Importanweisung hinzufügen. 

Rufen Sie in der onCreate-Methode vor der Zeile, in der Sie die playGame-Hilfsmethode aufrufen, einen Verweis auf die Rasteransicht ab. 

Hängen Sie die aktuelle Implementierung von playGame an das folgende Snippet an.  In diesem Snippet instanziieren wir den Adapter und legen ihn in der Rasteransicht fest. 

Führen Sie die Anwendung im Emulator aus und Sie sollten die Benutzeroberfläche sehen.  Sie können jedoch noch nicht mit den Schaltflächen interagieren.  Darauf werden wir uns in der dritten und letzten Folge dieser Serie konzentrieren. 

Android Hangman Game

Fazit 

Wenn Sie Ihre Anwendung zu diesem Zeitpunkt ausführen, wird Ihnen die Benutzeroberfläche des Spiels angezeigt, sie reagiert jedoch noch nicht auf die Benutzerinteraktion.  Wir werden die verbleibenden Funktionen im letzten Teil dieser Serie implementieren. 

Wenn ein Spieler auf die Buchstabentasten klickt, muss die Anwendung überprüfen, ob der ausgewählte Buchstabe im Zielwort enthalten ist, und die Antwort und den Galgen entsprechend aktualisieren.  Wir werden dem Spieler auch einen Dialog anbieten, wenn er gewinnt oder verliert, und wir werden auch einen Hilfe-Button hinzufügen.  Schließlich fügen wir die grundlegende Navigation über eine Aktionsleiste hinzu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.