fbpx Drücke „Enter”, um zum Inhalt zu springen.

Android: TicTacToe Layout erstellen – Part 01

Tobbe erklärt

Tic Tac Toe ist ein Klassiker unter den Spielen. Nahezu jeder sollte dieses Spiel kennen. Doch hast du schonmal darüber nachgedacht das Spiel als Android App zu programmieren? Nein? Ist doch eigentlich ganz simpel! Ich zeige dir wie das geht.

Wir starten im ersten Schritt mit dem Layout. Im zweiten Teil werden wir die Implementierung in Java durchführen. Im dritten Teil werden wir noch die Erkennung eines Unentschiedens einbauen und letzte Fehler beheben.

Für das Layout brauchen wir insgesamt neun Buttons. Und zusätzlich zu dem Grundlayout drei weitere lineare Layouts mit vertikaler Ausrichtung. Das horizontale lineare Layout sollte als äußeres, beziehungsweise erstes Layout im Component Tree ausgewählt sein. Ein Tipp: Erstell erst ein Layout und einen Button inklusive Farbe und Schrifteinstellungen um diesen dann einfach zu kopieren.

Der Code des vertikalen Layouts:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="10"
android:orientation="horizontal"
>
* HIER KANNST DU DEINE BUTTONS EINFÜGEN *
</LinearLayout>

Jetzt erstellen wir einen Button. Nur mal nebenbei bemerkt, du kannst natürlich auch alle Layout Elemente per Drag and Drop editieren. Um dir aber etwas Arbeit abzunehmen, gehe ich hier auf die XML Seite ein. Dann kannst du dir den Code einfach kopieren. Im Video kannst du außerdem Schritt für Schritt verfolgen wie ich das Layout aufbaue.

Der Code eines Buttons:

<Button
android:id="@+id/field_1_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/colorAccent"
android:text=""
android:textColor="@android:color/white"
android:textSize="36sp"
/>

Diesen Button kopieren wir und fügen ihn zwei weitere Male in das lineare Layout mit der vertikalen Ausrichtung ein. Jetzt haben wir schon drei Buttons. Im nächsten Schritt sparen wir uns wieder etwas Coding und kopieren das ganze lineare Layout mit den drei Buttons in dem Layout und fügen dieses zwei mal darunter ein. Jetzt haben wir als Grundlayout ein horizontales lineares Layout und darin drei lineare Layouts mit vertikaler Ausrichtung und außerdem jeweils drei Buttons.

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>

<Button
android:id="@+id/field_3_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/colorAccent"
android:text=""
android:textColor="@android:color/white"
android:textSize="36sp"
/>

<Button
android:id="@+id/field_3_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/colorAccent"
android:text=""
android:textColor="@android:color/white"
android:textSize="36sp"
/>

<Button
android:id="@+id/field_3_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:text=""
android:textColor="@android:color/white"
android:textSize="36sp"
/>
</LinearLayout>

Das Layout ist fast fertig. Jetzt fehlen nur noch die Ränder der Buttons. Diese kannst du ganz einfach einfügen, indem du unter dem Punkt Layout_Margin die Ränder einträgst. Natürlich kannst du das auch über XML Code machen. Wir wollen jedoch nur den Seiten einen Rand geben, die an andere Buttons angrenzen. Am Beispiel von dem Button links oben in der Ecke, also die Koordinate 1,1 wird also nur ein Rand rechts und unten eingefügt.

Der Code des Buttons an der Koordinate 1,1

<Button
android:id="@+id/field_1_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="1dp"
android:layout_marginBottom="1dp"
android:layout_weight="1"
android:background="@color/colorAccent"
android:textColor="@android:color/white"
android:textSize="36sp"
/>

Nachdem du die Ränder an allen Buttons eingefügt hast, ist das Layout fertig!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.