EINFÜHRUNG IN DIE PROGRAMMIERUNG MOBILER ANDROID APPS

Transkript

1 EINFÜHRUNG IN DIE PROGRAMMIERUNG MOBILER ANDROID APPS März 2014 Kurs an der Juniorakademie Heidenheim Heinke Hihn

2 Inhaltsverzeichnis Einführung in die Programmierung mobiler Android Apps EINFÜHRUNG IN DIE PROGRAMMIERUNG... 3 Was ist Programmierung?... 3 Wie gehe ich beim Programmieren vor?... 4 Definiere das Problem klar... 4 Zerlege das Problem in viele kleine Einzelprobleme... 4 Recherchiere ausreichend... 4 Papier und Stift helfen... 4 Denke nicht zu kompliziert... 4 EINFÜHRUNG IN JAVA... 5 Was ist Java?... 5 Benötigte Software... 5 Workflow... 5 DIE ERSTE EINFACHE APP... 6 Einrichtung des Systems... 6 EINFÜHRUNG IN DAS PROGRAMMIEREN MIT JAVA Grundgerüst der App Daten innerhalb der App speichern und darstellen Bedingte Anweisungen Methoden und Funktionen GRUNDLAGEN DER APP ENTWICKLUNG Elemente einfügen Eingabe Ausgabe ENTWURF UND PROGRAMMIERUNG DER TIC TAC TOE APP Design Programmierung

3 Einführung in die Programmierung mobiler Android Apps K U R S A N D E R J U N I O R A K A D E M I E H E I D E N H E I M Heinke Hihn, JTC Heidenheim 2

4 EINFÜHRUNG IN DIE PROGRAMMIERUNG Was ist Programmierung? Einführung in die Programmierung mobiler Android Apps Unter Programmierung versteht man den Entwurf von Handlungsanweisungen, die so präzise sind, dass ein Computer sie eindeutig ausführen kann. Diese Anweisungen werden Code gennant und formen das eigentliche Programm, oft auch Anwendung oder Software genannt. Wichtig ist zu unterscheiden, dass der Code nicht das Programm selbst ist. Es wird erst so genannt, wenn es ausführbar ist, d.h. der Benutzer kann es starten und damit arbeiten. Diese Anweisungen werden in so gennanten Programmiersprachen formuliert. Eine davon ist Java, welche wir in diesem Kurs näher betrachten werden. Innerhalb der Anwedung wird zwischen der Eingabe, dem sog. Input, und der Ausgabe, dem sog. Output, unterschieden. Ein Programm kann also Informationen ausgeben und Informationen und Befehle vom Benutzer erhalten. Ein arbeitendes Programm lässt sich folgendermaßen grafisch darstellen: Betrachten wir hier beispielsweise das Programm Windows Word. Es ist ein Textprogramm, mit welchem der Benutzer Text schreiben und formatieren kann. Die Eingabe sind hier also die Tastendrücke auf der Tastatur und Befehle ( Buttons ) zur Formatierung. Die Ausgabe ist dann der formatierte Text. Jedes Programm hat also eine Menge an Anweisungen, die dem Computer sagen, was er tun soll. Diese Menge nennt man Algorithmus. Ein Algorithmus muss die folgenden vier Eigenschaften erfüllen, damit wir als Programmierer, und vorallem der Computer, damit arbeiten können: 1. Das Verfahren muss in einem endlichen Text eindeutig beschreibbar sein (Finitheit) 2. Jeder Schritt muss tatsächlich ausführbar sein (Ausführbarkeit) 3. Jeder Schritt darf zu jedem Zeitpunkt nur endlich viel Speicherplatz verbrauchen (Dynamische Finitheit) 4. Das Verfahren darf nur endlich viele Schritte benötigen (Terminierung) Ist eine diese Eigenschaft nicht erfüllt, so spricht man nicht mehr von einem Algorithmus. Schauen wir uns dazu beispielsweise die erste Eigenschaft an. Man stelle sich vor, dass man gar nicht erst in der Lage sei, das Problem in einfachen Sätzen zu beschreiben. Dann ist es natürlich auch nicht möglich, dieses Verfahren zu programmieren. Ebenso ist es natürlich nicht möglich, falls es unendlich lange dauert. 3

5 Wie gehe ich beim Programmieren vor? Programmieren ist ein kreativer Prozess, d.h. man braucht gute Ideen im richtigen Moment und einen tollen Einfall. Man kann also nur schwer sagen Wenn du Problem A hast, dann man einfach dies und jenes. Hier erreicht man die besten Ergebnisse mit viel Übung. Unabhängig von der Programmiersprache gibt es für Entwickler einige Hinweise und Hilfestellungen, die beim Lösen von Problemen helfen sollen. Hiervon gibt es sehr viele, es hat sich um diese Thematik eine ganze Wissenschaft gebildet. Die wichtigsten sollen hier vorgestellt werden. Definiere das Problem klar Dieser Schritt ist eigentlich selbstverständlich. Bevor man programmiert, überlegt man sich ganz klar, welches Ziel man verfolgt. Warum soll dieses Problem gelöst werden? Wie gehe ich dabei vor? Habe ich schon soetwas ähnliches gemacht? Zerlege das Problem in viele kleine Einzelprobleme Diese kleinen Einzelprobleme sind dann viel einfacher zu lösen. Am Ende, wenn alles funktioniert, werden die einzelnen Lösungen zusammengefügt und getestet. Recherchiere ausreichend Sicherlich gibt es schon jemanden, der dieses Problem bereits gelöst hat. Es ist keine Schande sich zu informieren, wie es gelöst wurde. Papier und Stift helfen Im Computerzeitalter kommen diese beiden Helfer zu kurz. Notizen und Beispiele auf einem Blatt Papier können einen großen Unterschied machen. Denke nicht zu kompliziert Dies gilt nicht nur beim Programmieren. Oft denken wir zu kompliziert, weil wir es gleich möglichst elegant und effizient lösen wollen. Dabei ist es besser, erst mal überhaupt eine Lösung zu finden, bevor man diese verbessert. Heinke Hihn, JTC Heidenheim 4

6 EINFÜHRUNG IN JAVA Einführung in die Programmierung mobiler Android Apps Was ist Java? Dabei handelt es sich um eine sog. Hohe Programmiersprache, die 1995 von Sun Microsystems veröffentlich wurde. Sie gehört zu den objektorientierten Sprachen und ist die am meisten verwendete. Java läuft auf über 3 Mrd. Smartphones (Android), Blu-Ray Playern und über 125 Mio. Fernsehern. Da Java plattformübergreifend ist, können beispielsweise unter Windows geschriebene Programme auf einem Mac ausgeführt werden. Dies ist mit anderen Sprachen nicht so einfach möglich. Benötigte Software Man benötigt einen Editor, einen Compiler und eine Virtuelle Maschine. Was diese genau sind, wird im nächsten Abschnitt erklärt. Als Editor nutzen wir Eclipse. Damit können wir den Code schreiben und darstellen. Als Compiler dient der Eclipse Compiler for Java (ECJ) und als Virtuelle Maschinen Java Runtime. Diese lassen sich unter herunterladen. Für die Entwicklung von Android Apps benötigen wir das ADT Bundle, welches unter verfügbar ist. Achte darauf, dass alles in der neuesten Version installiert ist. Workflow Unter Workflow versteht man den Prozess vom Code zum Programm. Dieser ist bei Java besonders, da es plattformübergreifend sein soll. Wir haben also zu Beginn den Code, aus dem wir, wie bereits besprochen, das Programm machen möchten. Im ersten Schritt wird der Code zum Byte Code kompiliert. Dieser ist dann einfach eine Folge von 1 und 0, die der Prozessor interpretieren kann. Soweit läuft es wie bei allen Programmiersprachen. Üblicherweise ist hier dann Schluss, der Byte Code ist das Programm. Bei Java jedoch gibt es noch die Virtuelle Maschine, die den Byte Code dann ausführt. Diese kann man sich vorstellen wie einen Prozessor, den es jedoch nicht wirklich gibt. Er wird simuliert. Dieser führt den Byte Code dann aus. So kann auf jedem Betriebssystem, auf dem die Virtuelle Maschine installiert ist, der Byte Code ausgeführt werden. 5

7 DIE ERSTE EINFACHE APP Einrichtung des Systems Nach dem alles installiert ist, findest du in dem Installationsordner eine ausführbare Datei namens eclipse. Wenn du sie mit Doppelklick startest, siehst du diese Meldung: Wähle hier den Ordner aus, in dem deine Projekte gespeichert werden sollen. Danach wird alles geladen und Eclipse gestartet, was so aussehen sollte: Heinke Hihn, JTC Heidenheim 6

8 Gehe nun auf File > New > New Android Application, um ein neues Android App Projekt anzulegen. Es erscheint einn eues Fenster, das so aussehen sollte: Trage hier den Namen deiner neuen App ein. Den Rest brauchst du nicht zu änderen. Klicke dann mehrmals auf Next, bis du zu diesem Fenster kommst: 7

9 Eine Activity ist eines der Bildschirme, die deine App nachher anzeigen wird. Du kannst hier einen passenden Namen eintragen und die Art, mit der du navigieren möchtest, angeben. Klicke dann auf Finish und dein erstes Android Projekt ist erfolgreich angelegt. Die siehst jetzt zwei Reiter namens activity_main.xml und MainActivity.java. Wenn du den ersten anklickst, kannst du sehen, wie deine App momentan aussieht. Hier kannst Knöpfe und ähnliches hinzufügen. Der zweite Reiter zeigt deinen Code an. Heinke Hihn, JTC Heidenheim 8

10 Als Nächstes können wir unsere App bereits probeweise starten. Dazu benötigen wir kein reales Gerät, denn wir haben einen sog. Emulator, der Smartphones simulieren kann. Um einen neuen Emulator zu erzeugen, klickst du in der oberen Leiste auf das kleine Smartphone Icon Android Virtual Device Manager und dann auf New.... Trage anschließend einen passenden Namen ein und wähle das Gerät, das du simulieren möchtest, aus der Device Liste. Achte beim Eintrag Memory Options darauf, dass du nicht zu viel Speicherplatz zur Verfügung stellst. 512 MB reichen aus. Klicke dann uf OK und anschließend auf Refresh. Nun hast du deinen ersten Emulator erzeugt. Dieser sollte nun in der Liste erscheinen. Wähle ihn in der List aus und klicke auf Start. Es dauert einen moment und der Emulator startet. Klicke in der Leiste oben auf das Run Symbol. Jetzt wird deine App auf dem Emulator installiert und gestartet. 9

11 EINFÜHRUNG IN DAS PROGRAMMIEREN MIT JAVA Grundgerüst der App Dieses sind wie folgt aus: public class MainActivity extends Activity Heinke Hihn, JTC Heidenheim 10 // Wird aufgerufen, wenn ein Button geklickt wird public void onclick(view v) ImageButton ibutton = (ImageButton) findviewbyid(v.getid()); protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); public boolean oncreateoptionsmenu(menu menu) // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); return true; Die Zeile public class MainActivity extends Activity gibt den Namen unserer aktuellen Activitiy (das Fenster in der App) an und welchen Zugriff es haben soll. Dieser ist hier auf public gestellt, das heißt vereinfacht ausgedrückt, dass der Zugriff von einer anderen Stelle innerhalb der App möglich ist. Dies soll ja auch so sein, dann wir möchten, dass unsere Fenster miteinander kommunizieren könnnen. Die Beiden Methoden oncreate und oncreateoptionsmenu werden aufgerufen, wenn das Fenster bzw. das Menü erzeugt wird. Hier muss also der Code rein, der beim Start der App ausgeführt werden woll, da wir uns in der MainActivity befinden. Diese ist unser Hauptfenster. Die anderen Begriffe werden hier nicht weiter erklärt. Daten innerhalb der App speichern und darstellen Hierzu stellt Java verschieden Datentypen bereit. Diese Datentypen nutzen wir, um Informationen wie Zahlen und Text zu speichern. Für Zahlen haben wir zwei Arten: int und float. int nutzen wir für ganzzahlige Zahlen wie 5 oder 1923 und float nutzen wir für Kommazahlen wie 3,1415 oder 234,0. Dann aben wir noch String, womit wir Text abspeichern könnnen. Innerhalb unseres Programmes werden diese sog. Variablen folgendermaßen angelegt: int einezahl = 4; Hier wird beispielsweise ein int mit dem Namen einezahl erzeugt und diesem den Wert 4 durch das = zugewiesen. Im Verlauf des Codes können wir immer wieder auf diese Variable zugreifen und mit ihr rechnen. Dasselbe gilt auf für float:

12 float einekommazahl = 3.14; Einführung in die Programmierung mobiler Android Apps Achte darauf, dass du statt, das. Benutzt und deine Zeilen immer mit einem ; abschließt. Für einen String sieht es dann so aus: String eintext = Mein Beispielt Text ; Innerhalb der kann alles stehen, was ein Zeichen ist. Also auch Zahlen. Den Variablennamen kannst du dir wie eine Adresse vorstellen, in der dann ein Wert liegt. Deswegen darf es auch keine Variablen mit gleichem Namen geben. Dann wüsste der Computer nicht mehr, welche du meinst. So ist es auch bei der Post: jede Adresse ist einmalig. Veränderst du den Wert der Variablen, ist er ab der Zeile, in der du ihn veränderst gültig. In den Zeilen davor hat die Variable noch den alten Wert. Denke daran, falls du mal nicht das richtige Ergebnis bekommst. In deinem Code sieht es dann so aus: public class MainActivity extends protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); int anzahlfenster = 1; String fenstername = Hauptfenster ; float laenge = ; float breite = public boolean oncreateoptionsmenu(menu menu) // Inflate the menu; this adds items to the action bar if it // is present. getmenuinflater().inflate(r.menu.main, menu); return true; Mit diesen Variablen kannst du dann rechnen. In folgendem Beispiel legen wir zwei Variablen an und rechnen dann mit diesen Werten. int anzahlfenster = 1; float laenge = ; float breite = ; anzahlfenster = anzahlfenster + 8; laenge = 4.66; breite = laenge * 2; Was ist hier nun passiert? In den ersten drei Zeilen legen wir die Variablen an, deswegen geben wir auch ihren Datentypen an. Gleichzeitig weisen wir ihnen Werte zu. Denke immer daran, Werte zu setzen, damit du nachher nicht falsche Ergebnisse bekommst. In den nächsten drei Zeilen rechnen wir dann ein bisschen. Zu erst erhöhen wir den Wert von AnzahlFenster um 8. Dazu sagen wir umgangsprachlich der neue Wert (links vom = ) ist der alte Wert (rechts vom = ) plus 8. Danach weisen wir laenge einen ganz neuen Wert zu. 11

13 Anschließend setzen wir breite auf die doppelte Länge. Dazu sagen wir die neue Breite ist die Länge mal zwei. Achte beim Rechnen immer darauf, dass auf beiden Seiten vom = der gleiche Datentyp steht. Du kannst also einer Zahl keinen Text zuweisen. Bedingte Anweisungen Oft möchten wir etwas nur tun, wenn eine Bedingung erfüllt ist. Beispielsweise möchte man einen Text anpassen, wenn das Ergebnis einer Rechnung einen bestimmten Wert erfüllt hat. Dazu stellt uns Java das if/else bereit. Als Code sieht es folgendermaßen aus: if(<hier die Bedinung>) <hier die Anweisung> else <hier die Alternative> Schauen wir uns das mal an einem Beispiel an. Wir möchten, dass der Text sich verändert, wenn eine Zahl größer als Zehn ist. Unser Spieler hat dann gewonnen. Wir nehmen an, dass vorher schon gespielt wurde und testen jetzt unsere Punktzahl: if (punkte > 10) Nachricht = Sie haben gewonnen! ; else Nachricht = Sie haben leider nicht gewonnen. ; Die Bedingung kannst du nahezu beliebig formulieren. Du kannst die dir bekannten Vergleiche benutzen: x < y: x kleiner als y x <= y: x kleiner oder gleich y x > y: x größer als y x >= y: x größer oder gleich y Zudem kannst du auch mehrere Bedingungen verknüpfen, wenn du beispielsweise willst, dass beides gilt oder mindestens eins davon, kannst du folgendes tun: x < y x < z: x kleiner als y ODER x kleiner z x < y x < z: x kleiner als y UND x kleiner z Heinke Hihn, JTC Heidenheim 12

14 Methoden und Funktionen Einführung in die Programmierung mobiler Android Apps Als wir uns das Grundgerüst unserer App angeschaut haben, ist das Wort Methoden gefallen. Was ist eine Methode eigentlich? Methoden sind gebündelte Anweisungen an den Computer, die mit einem bestimmten Namen angesprochen werden. Immer wenn du möchtest, dass deine Methode ausgeführt wird, brauchst du nur den Namen angeben und der Computer erledigt den Rest für dich. Der Vorteil dabei ist, dass du den Code für deine Methode nur einmal schreiben musst. Sonst müsstest du immer den ganzen Code nochmal schreiben. Diese Arbeit kannst du dir ganz elegant sparen. Das alles klingt sehr abstrakt und das folgende Beispiel soll dir den Bezug erleichtern: Angenommen, du möchtest an verschiedenen Stellen in deinem Code überprüfen, ob der Spieler gewonnen hat. Beispielsweise nach jedem Spielzug oder wenn ein bestimmter Button klickt wird. Du willst aber nicht jedes mal den (möglicherweise) langen Code neu schreiben und entschließt dich, eine Methode dafür zu schreiben. Wie machst du das? Zu erst musst du dich entscheiden, welche Zugriffsebene deine Methode haben soll. Wenn du dir nicht sicher bist, mache sie am besten private, um möglichen Schaden zu verhindern. Du beginnst also mit folgendem Codestück: private void siegtest(int punktzahl) So gibst du den Namen deiner Methode (siegtest), den Zugriff (private) und die Parameter (punktzahl) an. Parameter nennt man die Variablen, mit denen deine Methode arbeiten will. Da wir in unserem Beispiel testen wollen, ob der Spieler gewonnen hat, benötigen wir die Punktzahl. Diese ist deswegen der Parameter. Wenn du einen Parameter angibst, musst du auch gleich sagen, welche Datentyp er haben soll. In unserem Fall ist er int, weil wir nur ganzzahlige Punktzahlen haben. Nach dem du den Kopf der Methode definiert hast, musst du noch angeben, wie die eigentliche Methode aussehen soll. Was soll also geschehen, wenn die Methode aufgerufen wird? Das gibtst du folgendermaßen an: private void siegtest(int punktzahl) Die beiden geschweiften Klammern zeigen an, was zur Methode gehört. Alles, was innerhalb dieser beiden Klammern steht, wird ausgeführt, wenn die Methode aufgerufen wird. 13

15 Füllen wir unsere Methode nun mit Leben: private void siegtest(view view) if (punkte > 10) Nachricht = Sie haben gewonnen! ; else Nachricht = Sie haben leider nicht gewonnen. ; Jetzt kannst du die Methode beliebig aufrufen. Achte nur darauf, dass du dir die korrekten Parameter übergibst. Ein Aufruft sieht folgendermaßen aus: siegtest(punkte); Du gibst also den Namen an und in runden Klammern die Variable, die du als Parameter nutzen möchtest. Achte darauf, dass die diese Variable bereits gibt und dass sie den geforderten Datentyp hat. Heinke Hihn, JTC Heidenheim 14

16 GRUNDLAGEN DER APP ENTWICKLUNG Elemente einfügen Einführung in die Programmierung mobiler Android Apps Eine benutzerfreundliche App zeichnet sich unter anderem dadurch aus, dass der Benutzt durchgehend über den aktuellen Status der App informiert ist. Es soll ihm also beispielsweise angezeigt werden, dass er gerade noch warten muss oder sein Punktestand. Um dies zu gewährleisten, braucht die App Elemente, die dies ermöglichen. Davon gibt es im Grunde zwei Arten: Elemente zur Eingabe und Elemente zur Ausgabe. Eingabe Hier kennt jeder die Buttons. Sie sind Knöpfe, die der Benutzer klicken kann, um bestimmte Ereignisse auszulösen. Buttons gibt es in unter Form Widgets im Graphical Layout Reiter: Ein Button hat mehrere Einstellungen, die geändert werden können. Dazu gehören ein Name, die Position und die Länge und Breite. Wie jedes Form Element, hat auch der Button eine eindeutige Nummer, mit der identifiziert und gefunden werden kann. Diese wird ID genannt. 15

17 Damit etwas passiert, wenn der Benutzer den Button anklickt, muss noch eine Methode an ihn gebunden werden. Diese wird dann aufgerufen, wenn der Button geklickt wird. Dazu gehst du wie folgt vor: Öffne activity_main.xml und gehe anschließend in der unteren Leiste wieder auf activity_main.xml. Jetzt siehst du ein paar Zeilen Code. Irgendwo hier verbirgt sich dein Button. Du findest ihn, wenn du im rechten Menü auf den Namen des Button klickst: Folgender Code beschreibt deinen Button: <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="25dp" android:text="button"/> Bedenke, dass es bei dir eventuell leicht anders aussehen kann, falls du etwas anders bennant hast. Die einzelenen Einträge (sog. XML Tags) beschrieben hier die jeweilige Eigenschaft des Buttons. Wir möchten eine Methode hinzufügen, also müssen wir einen neuen Eintrag machen. Heinke Hihn, JTC Heidenheim 16

18 Ändere den Code dazu folgendermaßen: <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="25dp" android:text="button" android:onclick= siegtest /> Der neue Tag sagt jetzt folgendes aus: Wenn der Button geklickt wird, führe die Methode SiegTest aus. Du kannst hier verschiedene Ereignisse abfragen, wie beispielsweise einen Doppelklick oder einen Klickt mit der linken Maustaste. Ausgabe Oft möchte man dem Benutzer etwas mitteilen. Dazu ist ein Button aber nicht geeignet. Hierfür gibt es die sog. TextView Elemente. Diese Findest du hier: Wenn du TextViews einfügst, werden die entsprechende Einträge auch aktualiert. Schaue dazu mal in deine activitiy_main.xml und die Layout Liste rein. Den Text kannst du durch die jeweilige Eigenschaft des TextViews bearbeiten. Klicke dazu im Graphical Layout den Text an und wähle dann in den Einträge rechts unten die Zeile Text. Hier kannst du nun deinen gewünschten Text eintragen. 17

19 Heinke Hihn, JTC Heidenheim 18

20 ENTWURF UND PROGRAMMIERUNG DER TIC TAC TOE APP Design Fangen wir also mit der erten App an. Lege dazu ein neues Projekt an und geben diesem einen passenden Namen. Wähle dazu das einfache Activity Main Layout aus. Ziehe anschließend die folgenden Elemente auf deine Activity: Weil wir X und O anzeigen möchten, benötigen wir keine normalen Buttons sondern die ImageButtons. Diese verhalten sich wie normale Buttons, können aber zusätzlich ein Bild anzeigen. Wechsle dazu in den Reiter activity_main.xml und suche folgenden Code: <ImageButton android:id="@+id/imagebutton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginleft="60dp" android:layout_margintop="76dp" /> 19

21 Dieser kann bei dir etwas anderes aussehen. Um einem ImageButton ein Bild zuzuweisen, muss der Tag android:src gesetzt werden. Damit du aber das Bild überhaupt benutzen kannst, muss es im res Ordner sein. Diesen findest du unter Workspace\<AppName>\res\drawable-hdpi Lege die Bilder hier ab. Du benötigst ein leeres Bild, eins mit einem X und eins mit einem O. Anschließend musst du für jeden ImageButton das Tag setzen: <ImageButton android:id="@+id/imagebutton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginleft="60dp" android:layout_margintop="76dp" android:src="@drawable/icon_empty" /> Hier wurde standardmäßig das leere Bild eingesetzt. Diese soll sich jetzt je nach Spieler verändern. Wenn Spieler 1 an der Reihe ist, soll ein X erscheinen, bei Spieler 2 ein O. Programmierung Was soll passieren, wenn der Spieler den Button klickt? Allgemein gesprochen ist dies der Spielzug. Zu diesem gehört natürlich zu wissen, welcher Spieler überhaupt an der Reihe ist. Dies können wir ganz einfach in einer Variable speichern. Diese nennen wir spieleranderreihe und setzen sie zu Beginn auf 1: int spieleranderreihe = 1; Dieses Prinzip kennen wir ja bereits. Was jetzt neu dazu kommt ist, dass diese Variable global sein soll. Wir möchten also von überall in unserem Programm auf sie zugreifen können. Wie setzen wir das um? Es kommt hierbei auf den Codeblock an, in dem sie deklariert wird. Dieser muss dazu der äußerste Block sein: public class MainActivity extends Activity static int spieleranderreihe = protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); public boolean oncreateoptionsmenu(menu menu) // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); return true; Heinke Hihn, JTC Heidenheim 20

22 Jetzt fehlt noch die Methode, die den Spielzug repräsentieren soll. Machen wir uns dazu nochmal klar, was genau passieren soll: Es darf sich immer nur der geklickte Button ändern Das Konzept von Methoden und Parameter haben wir bereits kennengelernt und wir benutzen es hier. Dabei ist der geklickte Button der Parameter unserer Spielzug Methode: public static void Spielzug(ImageButton ibutton) Abhängig vom Spieler, soll das Bild geändert werden. Dies können wir sehr einfach umsetzen: mit dem if/else Konstrukt. Dieses ist gerade für die Fallunterscheidung gedacht. Der Code siehst folgendermaßen aus: // Wenn Spieler 1 an der Reihe if (spieleranderreihe == 1) // Ändere das Bild und ibutton.setimageresource(r.drawable.icon_x); else // Dasselbe für Spieler 2 ibutton.setimageresource(r.drawable.icon_o); Danach soll der andere Spieler an der Reihe sein. Die Fallunterscheidung, welcher Spieler gerade dran war, haben wir schon gemacht. Jetzt müssen wir nur noch die Variable ändern: // Wenn Spieler 1 an der Reihe if (spieleranderreihe == 1) // Ändere das Bild und ibutton.setimageresource(r.drawable.icon_x); // Setzte die Spielerreihenfolge um spieleranderreihe = 2; else // Dasselbe für Spieler 2 ibutton.setimageresource(r.drawable.icon_o); spieleranderreihe = 1; Zusammengefügt sieht das Ganze nun folgendermaßen aus: // Spielzug eines Spielers public static void Spielzug(ImageButton ibutton) // Wenn Spieler 1 an der Reihe if (spieleranderreihe == 1) // Ändere das Bild und ibutton.setimageresource(r.drawable.icon_x); // Setzte die Spielerreihenfolge um spieleranderreihe = 2; else // Dasselbe für Spieler 2 ibutton.setimageresource(r.drawable.icon_o); spieleranderreihe = 1; 21

23 Achte darauf, dass du die Methode an die richtige Stelle schreibst, d.h. außerhalb anderer Methoden aber noch innerhalb der MainActivity. Woher wissen wir aber nun, welcher Button geklickt wurde? Dies können wir mithilfe der View Klasse einfach herausfinden. Diese stellt die ID des Buttons zur Verfügung. Dazu definieren wir uns eine weitere Methode, der wir als Parameter die View Klasse geben. Innerhalb der Methode suchen wir dann nach dem geklickten Button: // Wird aufgerufen, wenn ein Button geklickt wird public void onclick(view v) ImageButton ibutton = (ImageButton) findviewbyid(v.getid()); Spielzug(iButton); Als nächstes wollen wir die onclick Methode an die Buttons binden. Dazu haben wir das onclick Event kennengelernt, welches wir auch hier wieder benutzen wollen. Gehe dazu in die activity_main.xml und ändere die Tags der Buttons entsprechend ab: <ImageButton android:id="@+id/imagebutton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_aligntop="@+id/imagebutton1" android:layout_centerhorizontal="true" android:src="@drawable/icon_empty" android:onclick= onclick"/> Denke daran, dass du dies für jeden Button einzeln machen musst. Starte deine App und teste die Funktion. Es sollte jetzt das jeweilige Zeichen geladen werden. Es fehlt noch, dass die Anzeige aktualierst wird und die Sieg- und Niederlagebedinungen. Für die korrekte Anzeige musst du einfach nur in der if/else Struktur den angezeigten Text ändern: TextView tview = (TextView) findviewbyid(r.id.textview1); // Wenn Spieler 1 an der Reihe if (spieleranderreihe == 1) // Ändere das Bild und ibutton.setimageresource(r.drawable.icon_x); // Setzte die Spielerreihenfolge um spieleranderreihe = 2; tview.settext("spieler 2 ist an der Reihe!"); else // Dasselbe für Spieler 2 ibutton.setimageresource(r.drawable.icon_o); spieleranderreihe = 1; tview.settext("spieler 1 ist an der Reihe!"); Heinke Hihn, JTC Heidenheim 22

24 Vielleicht ist dir aufgefallen, dass ein Bild nochmals verändert werden kann, wenn der nächste Spieler wieder darauf klickt. Um das zu verhindern, merken wir uns, wo wir welches Zeichen gesetzt haben. Dies brauchen wir auch um zu testen, welcher Spieler gewonnen hat. Dazu benutzen wire in mehrdimensionales Feld, das unser Spielfeld repräsentieren soll. Es hat die Dimension 3x3, genau wie das Spielfeld selbst: static int[][] spielfeld = 0, 0, 0,0, 0, 0; Es wird an derselben Stelle wie spieleranderreihe definiert. Die 0 soll angeben, dass an dieser Stelle noch kein Spieler sein Zeichen gesetzt hat. Für den nächsten Schritt ist es wichtig, dass du weißt, welcher Button welche ID hat. Diese brauchen wir, um das Feld zu finden, dass er repäsentiert. Schau dir dazu die IDs in der Anzeige rechts an, wenn du einen Button ausgewählt hast. Wir gehen davon aus, dass der erste (oben links) die ID imagebutton1, der nächste imagebutton2 etc hat. Dann können wir folgendermaßen das Feld bestimmen: // Gegeben dem Button, finde das dazugehörige Feld public boolean maptofield(imagebutton ibutton) switch(ibutton.getid()) case R.id.imageButton1: if (spielfeld[0][0]!= 0) return false; spielfeld[0][0] = spieleranderreihe; case R.id.imageButton2: if (spielfeld[0][1]!= 0) return false; spielfeld[0][1] = spieleranderreihe; case R.id.imageButton3: if (spielfeld[0][2]!= 0) return false; spielfeld[0][2] = spieleranderreihe; case R.id.imageButton4: if (spielfeld[1][0]!= 0) return false; spielfeld[1][0] = spieleranderreihe; case R.id.imageButton5: if (spielfeld[1][1]!= 0) return false; spielfeld[1][1] = spieleranderreihe; case R.id.imageButton6: if (spielfeld[1][2]!= 0) return false; spielfeld[1][2] = spieleranderreihe; case R.id.imageButton7: if (spielfeld[2][0]!= 0) return false; spielfeld[2][0] = spieleranderreihe; 23

25 case R.id.imageButton8: if (spielfeld[2][1]!= 0) return false; spielfeld[2][1] = spieleranderreihe; case R.id.imageButton9: if (spielfeld[2][2]!= 0) return false; spielfeld[2][2] = spieleranderreihe; return true; Die Zahlen in den eckigen Klammen geben das Feld an. Du kannst es dir wie eine Tabelle vorstellen: spielfeld[1][2] bedeutet beispielsweise Zeile zwei, Spalte 3, da die Nummerierung bei 0 beginnt. Wir testen hier auch gleichzeitig, ob der Spielzug korrekt ist. Dazu fragen wir, ob in dem aktuellen Feld ein anderer Wert als 0 steht (d.h. hier wurde schon etwas eingetragen). Falls dem so ist, brechen wir ab. Nun müssen wir diesen Test noch in unserern Spielzug einbauen: // Spielzug eines Spielers public void Spielzug(ImageButton ibutton) TextView tview = (TextView) findviewbyid(r.id.textview1); // Wenn Spieler 1 an der Reihe if (spieleranderreihe == 1 && maptofield(ibutton)) // Ändere das Bild und ibutton.setimageresource(r.drawable.icon_x); // setze die Spielerreihenfolge um spieleranderreihe = 2; tview.settext("spieler 2 ist an der Reihe!"); else if(!maptofield(ibutton)) return; // Dasselbe für Spieler 2 ibutton.setimageresource(r.drawable.icon_o); spieleranderreihe = 1; tview.settext("spieler 1 ist an der Reihe!"); Wir arbeiten also nur weiter, wenn die maptofield Methode grünes Licht gibt. Heinke Hihn, JTC Heidenheim 24

26 Als letztes fehlt uns noch der Test auf Sieg und Niederlage. Hier nutzen wir aus, dass es nicht so viele mögliche Kombinationen gibt. Diese sind: Es gibt also neun mögliche Kombinationen. Drücken wir sie über unser Spielfeld aus, heißt dies: Für die Diagonalen spielfeld[0][0], spielfeld[1][1], spielfeld[2][2] sind gleich spielfeld[2][0], spielfeld[1][1], spielfeld[0][2] sind gleich Für die Horizontalen spielfeld[0][0], spielfeld[0][1], spielfeld[0][2] sind gleich spielfeld[1][0], spielfeld[1][1], spielfeld[1][2] sind gleich spielfeld[2][0], spielfeld[2][1], spielfeld[2][2] sind gleich Für die Vertikalen spielfeld[0][0], spielfeld[1][0], spielfeld[2][0] sind gleich spielfeld[0][1], spielfeld[1][1], spielfeld[2][1] sind gleich spielfeld[0][2], spielfeld[1][2], spielfeld[2][2] sind gleich 25

27 Diese Bedingungen gilt es nun in Code zu formulieren. Da es keine Möglichkeit für a = b = c gibt, müssen wir etwas anders vorgehen. Wir fragen a = b && b = c, wodurch wir dasselbe Ziel erreichen. In einer Methode sieht das es folgendermaßen aus: public static int siegtest() // Teste nach Diagonalen: if (spielfeld[0][0] == spielfeld[1][1] && spielfeld[1][1] == spielfeld[2][2]) return spielfeld[0][0]; Wir geben im Fall eines Sieges den Eintrag im Feld zurück, welcher auch gleichzeitig der Spielernummer entspricht. Null gben wir zurück, wenn keiner gewonnen hat. Heinke Hihn, JTC Heidenheim 26 if (spielfeld[2][0] == spielfeld[1][1] && spielfeld[1][1] == spielfeld[0][2]) return spielfeld[2][0]; // Teste die Horizontalen if (spielfeld[0][0] == spielfeld[0][1] && spielfeld[0][1] == spielfeld[0][2]) return spielfeld[0][0]; if (spielfeld[1][0] == spielfeld[1][1] && spielfeld[1][1] == spielfeld[1][2]) return spielfeld[1][0]; if (spielfeld[2][0] == spielfeld[2][1] && spielfeld[2][1] == spielfeld[2][2]) return spielfeld[2][0]; // Test die Vertikalen if (spielfeld[0][0] == spielfeld[1][0] && spielfeld[1][0] == spielfeld[2][0]) return spielfeld[0][0]; if (spielfeld[0][1] == spielfeld[1][1] && spielfeld[1][1] == spielfeld[2][1]) return spielfeld[0][1]; if (spielfeld[0][2] == spielfeld[1][2] && spielfeld[1][2] == spielfeld[2][2]) return spielfeld[0][2]; // Gebe 0 zurück, falls keiner gewonnen hat return 0;

28 Man könnte die Bedingungen auch verknüpfen, aber der Code wäre dann sehr kompliziert. Wir belassen es der Einfachheit halber bei der langen Version. Wann soll nun auf einen Sieg getestet werden? Am besten nach jedem Spielzug. Also rufen wir diese Funktion auch dort auf: // Spielzug eines Spielers public void Spielzug(ImageButton ibutton) TextView tview = (TextView) findviewbyid(r.id.textview1); // Wenn Spieler 1 an der Reihe if (spieleranderreihe == 1 && maptofield(ibutton)) // Ändere das Bild und ibutton.setimageresource(r.drawable.icon_x); // setze die Spielerreihenfolge um spieleranderreihe = 2; tview.settext("spieler 2 ist an der Reihe!"); else if(!maptofield(ibutton)) return; // Dasselbe für Spieler 2 ibutton.setimageresource(r.drawable.icon_o); spieleranderreihe = 1; tview.settext("spieler 1 ist an der Reihe!"); // Teste, ob jemand gewonnen hat int sieger = siegtest(); switch(sieger) // Sieger == 0, keiner hat gewonnen case 0: // Sieger == 1, Spieler 1 hat gewonnen case 1: punktespieler1++; tview.settext("spieler 1 hat gewonnen!"); neuesspiel(); // Sieger == 2, Spieler 2 hat gewonnen case 2: punktespieler2++; tview.settext("spieler 2 hat gewonnen!"); neuesspiel(); Wenn das Spiel vorbei ist, muss ein neues gestartet warden. Dies soll in der neuesspiel Methode passieren. Überlegen wir uns dazu, was alles bei einem neuen Spiel geschehen muss. Eigentlich nicht viel, es müssen nur alle Kreuze und Kreise entfernt werden und das spielfeld wieder auf 0 gesetzt werden. 27

29 Als Methode sieht das Ganze folgendermaßen aus: // Starte ein neues Spiel public void neuesspiel() // Es soll wieder Spieler 1 an der Reihe sein spieleranderreihe = 1; // Laufe durch das Spielfeld und setze jeden Eintrag auf 0 for (int i = 0; i < 3; i++) for (int j = 0; j < 3; j++) spielfeld[i][j] = 0; // Setze bei allen ImageButtons das leere Bild ein ImageButton ibutton = (ImageButton) findviewbyid(r.id.imagebutton1); ibutton.setimageresource(r.drawable.icon_empty); ibutton = (ImageButton) findviewbyid(r.id.imagebutton2); ibutton.setimageresource(r.drawable.icon_empty); ibutton = (ImageButton) findviewbyid(r.id.imagebutton3); ibutton.setimageresource(r.drawable.icon_empty); ibutton = (ImageButton) findviewbyid(r.id.imagebutton4); ibutton.setimageresource(r.drawable.icon_empty); ibutton = (ImageButton) findviewbyid(r.id.imagebutton5); ibutton.setimageresource(r.drawable.icon_empty); ibutton = (ImageButton) findviewbyid(r.id.imagebutton6); ibutton.setimageresource(r.drawable.icon_empty); ibutton = (ImageButton) findviewbyid(r.id.imagebutton7); ibutton.setimageresource(r.drawable.icon_empty); ibutton = (ImageButton) findviewbyid(r.id.imagebutton8); ibutton.setimageresource(r.drawable.icon_empty); ibutton = (ImageButton) findviewbyid(r.id.imagebutton9); ibutton.setimageresource(r.drawable.icon_empty); Heinke Hihn, JTC Heidenheim 28

30 Als Letztes lassen wir uns noch die Punktzahl der Spieler anzeigen. Dazu holen wir uns die TextViews und schreiben den Punktestand hinein: TextView punkte1view = (TextView) findviewbyid(r.id.textview2); TextView punkte2view = (TextView) findviewbyid(r.id.textview3); switch(sieger) // Sieger == 0, keiner hat gewonnen case 0: // Sieger == 1, Spieler 1 hat gewonnen case 1: punktespieler1++; tview.settext("spieler 1 hat gewonnen!"); punkte1view.settext("punktzahl Spieler 1: " + punktespieler1); neuesspiel(); // Sieger == 2, Spieler 2 hat gewonnen case 2: punktespieler2++; tview.settext("spieler 2 hat gewonnen!"); punkte2view.settext("punktzahl Spieler 2: " + punktespieler2); neuesspiel(); Als letztes gibt es noch den Fall eines Unentschiedens, d.h. alle Felder sind belegt, aber es gibt keinen Sieger. Diesen Fall behandeln wir nun. Im Grunde genommen ist es sehr einfach. Sobald wir von unserer siegtest Methode mitgeteilt bekommen, dass es keinen Sieger gab, schauen wir nach, ob in jedem Feld ein Eintrag verschieden von 0 steht. Wir benötigen also eine weiter Methode: // Teste, ob es ein Unentschieden gibt public boolean unentschiedentest() // gehe dazu durch das feld, und schaue nach, ob // überall ein Eintrag verschieden von 0 ist for (int i = 0; i < 3; i++) for (int j = 0; j < 3; j++) // Wenn ein Eintrag 0 ist, kann es noch // kein Unentschieden geben if (spielfeld[i][j] == 0) return false; return true; 29

31 Diesen Test rufen wir auf, wenn siegtest eine 0 zurückgibt, d.h. es hat keiner gewonnen: switch(sieger) // Sieger == 0, keiner hat gewonnen case 0: if (unentschiedentest()) tview.settext("unentschieden!"); neuesspiel(); // Sieger == 1, Spieler 1 hat gewonnen case 1: punktespieler1++; tview.settext("spieler 1 hat gewonnen!"); punkte1view.settext("punktzahl Spieler 1: " + punktespieler1); neuesspiel(); // Sieger == 2, Spieler 2 hat gewonnen case 2: punktespieler2++; tview.settext("spieler 2 hat gewonnen!"); punkte2view.settext("punktzahl Spieler 2: " + punktespieler2); neuesspiel(); Damit ist deine erste Android App fertig! Du hast alle Komponenten programmiert und eingestellt. Mit dem gesammelten Wissen kannst du nun viele weitere Apps programmieren. Viel Spaß! Heinke Hihn, JTC Heidenheim 30