Einleitung
Ausgehend vom vorherigen Tutorial haben wir ein leeres Android Projekt vor uns und können nun beginnen das erste Fenster zu erstellen. Eclipse ist hierbei ein mächtiges Werkzeug mit dem wir sehr einfach und schnell die Benutzeroberfläche für unser Projekt erstellen können. Bevor wir jetzt aber einfach drauf los basteln hier noch schnell ein kurzer Umriss wie Fenster, die sogenannten Activitys, funktionieren.
Fenster in Android
Fenster, Bildschirme oder Screens, also die Benutzeroberfläche in Android nennt man "Activity". Eine Anwendung kann aus einer oder beliebig vieler Activitys bestehen.
Eine Activity besteht immer aus 2 Teilen: Einem Layout und der dazugehörigen Quellcode Datei. Das Layout kann etweder in einer XML Datei mit dem Eclipse Editor erstellt werden oder aber auch programmiertechnisch. Oft kommt auch eine kombination aus XML und programmiertem Design zum Einsatz.
Activitys haben einen Lebenszyklus: Sie werden erstellt, angehalten, fortgesetzt und beendet. Für jeden dieser Momente stellt uns Android eine Funktion bereit mit der wir entprechend darauf reagieren können.
Um eine Activity später aufrufen zu können oder zu bestimmen welche die "Main" Activity ist (die mit der die App starten soll) muss sie entsprechend in die Manifest.xml Datei eingetragen werden.
Erstellen eines Layouts
Wir erstellen zunächst ein Datei die unser Layout für das Hauptmenü erhält. Dazu öffnen wir in unserem Projekt den Order "
res" und klicken mit der rechten Maustaste auf den Ordner "
layout". Dann wählen wir "
New" -> "
File". Dort tragen wir unter "File name" den entsprechenden Namen ein den unser Layout erhalten soll. Ich habe hier "
activity_main.xml" gewählt. Im Grunde spielt es keine rolle wie man die Datei bennent solange keine Sonderzeichen oder Großbuchstaben darin auftauchen und man das ".xml" nicht vergisst. Der Übersicht halber setzte bei Layouts die zu einer Activity gehören immer ein "activity_" davor. Das "main" soll mich immer daran erinner das dies das Layout ist mit dem die Anwendung startet. Wenn der Name eingegeben ist klicken wir auf "Finish" und wir finden sogleich eine neue Datei im Ordner "layout".
Eclipse sollte jetzt automatisch das Layout öffnen. Falls nicht reicht ein einfacher doppel Klick auf unsere eben erstellte Datei und der Layout Designer öffnet sich.
Vermutlich werden wir hier noch nicht viel sehen da unsere Datei noch keinen Inhalt hat. Wir können am unteren Rand des Designers zwei Reiter sehen einmal "Graphical Layout" und einmal "activity_main.xml". Wir klicken auf den 2. Reiter und öffnen damit die Textansicht des Layouts.
Um Eclipse jetzt mitzuteilen das es sich hierbei um eine XML Datei handelt die auch als solche interpretiert werden soll müssen wir jetzt die folgende Zeile einfügen:
<?xml version="1.0" encoding="utf-8"?>
Damit ein Layout auch dargestellt werden kann brauchen wir eine Art äußeren Container der bestimmt wie wir unsere späteren Steuerelemente anordnen wollen. Hierzu gibt es verschiedene Möglichkeiten:
- LinearLayout
- RelativeLayout
- AbsolutLayout
Jedes dieser Layout Typen hat seine Vor- und Nachteile. Es gibt auch noch einige weitere wie Tabellen, Grids, Tabs etc. Aber diese hier sind die am meisten verwendeten. Layout Typen sind auch kombinier und verschachtelbar. Es ist also durchaus möglich als äußeren Container ein LinearLayout zu verwenden und darin mehrere RelativLayouts.
Bei einem LinearLayout werden alle Steuerelemente nacheinander in der Reihnfolge wie sie in unserer xml Datei stehen angezeigt während sie bei einem RelativLayout relativ zueinander Positioniert werden. Das AbsolutLayout ermöglicht dagegen freies Positionieren der Steuerelemente, ist aber aufgrund der verschiedenen Bildschirmgrößen und Auflösungen zu vermeiden. Wir wollen ja schließlich das unsere Anwendung überall gleich aussieht. Wir verwenden hier das RelativeLayout.
Um jetzt ein Layout mit entpsrechendem Typen einzufügen ergänzen wir unsere Datei um folgende Zeilen:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</RelativeLayout>
Wie wir sehen können ist der Syntax für das Layout recht simpel. Mit
<RelativeLayout> leiten wir das Layout ein und mit
</RelativeLayout> beenden wir. Alles was zwischen diesen beiden Zeilen liegt wird dann Element des Layouts und damit sichtbar sein. Auch weitere Layouts können eingefügt werden. Auf diese Weise sind selbst komplexeste Designs realisierbar.
Wichtig sind die Attribute die wir unserem Layout mit auf dem Weg geben. In unserem Fall xmlns:android, layout_width, layout_height. Wichtig ist das die Attribute in den eröffnungs Tag kommen.
Das erste Attribut das wir setzen "xmlns:android" ist äußerst wichtig und muss bei jedem Layout vorhanden sein das als äußerer Container dient.
Jedes Steuerelement besitzt eigene Attribute denen wir Werte zuweisen können. Sie müssen immer mit android: eingeleitet werden (außer wir schreiben eigene Steuerelemente aber dazu kommen wir erst viel später). Eclipse listet uns alle vorhanden Eigenschaften eines Elements auf wenn wir nur android: eingeben und kurz warten.
layout_width
Beschreibt wie breit unser Steuerlement sein soll. Mögliche Werte sind hier
"FILL_PARENT" was nix anderes bedeutet als so breit wie das umschließende Element (hier der Bildschirm). Möglich ist aber auch
"WRAP_CONTENT" was das Element veranlasst sich der Größe des Inhalts anzupassen. Nummerische Werte sind ebenfalls möglich wenn darauf die entsprechende Einheit folgt (layout_width="10px" z.b. bedeutet 10 Pixel breit).
layout_height
Funktioniert genauso nur eben mit der Höhe.
Haben wir unser Layout eingefügt und klicken nun wieder auf den Reiter
"Graphical Layout" sehen wir eine Vorschau unseres Layouts. Je nach Eclipse, SDK Version sieht es nun bei jedem ein wenig unterschiedlich aus. Im Grunde sehen wir aber einfach nur einen leeren Bildschirm. Bei mir sieht es wie folgt aus:
Wirklich schön ist das nicht und wir wollen später möglichst keine Titelleiste sehen und um besten das Querformat (Landscape) benutzen. Um das zu bewerkstelligen müssen wir jetzt die Manifest.xml öffnen und dort ein paar änderungen vornehmen. Wir ersetzen den Application Tag mit folgendem:
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >
</application>
Die entscheidende Änderung ist im android:theme Attribut passiert. Indem wir das Theme auf diesen Wert setzen startet unsere Anwendung und alle ihre Activitys im Vollbildmodus ohne Titelleiste. Nach dem speichern kehren wir zurück zu unserer "activity_main.xml" Jetzt sieht das ganze schon so aus:
Um jetzt in das Querformat zu kommen klicken wir einfach auf das kleine Symbol mit dem Gerät und dem runden Pfeil. Das dreht im Grunde nur unsere Anzeige hier. Auf dem tatsächlichen Gerät passt sich die Ausrichtung der Position des Geräts an. Wir werden das später noch deaktivieren. Ich möchte an dieser Stelle nocheinmal darauf hinweisen das es hier auch möglich ist ein Gerät auszuwählen in dem das Layout dargestellt werden soll. Das ist sehr nützlich um kleine Smartphones mit großen Tablets zu vergleichen und gegebenenfals das Design anzupassen.
Jetzt aber wieder zurück zu unserem Design. Wir wollen hier das Hauptmenü für unser Pong Projekt erstellen. Für den Moment werden wir es noch so simpel wie möglich halten. Wir werden folgendes benutzen: eine TextView um den Titel unseres Spiels anzuzeigen und 2 Buttons. Einen mit dem wir das Spiel starten und einen um eine Highscore Liste aufzurufen. Wie machen wir das am besten? Wir erstellen ein weiteres Layout nur diesmal ein LinearLayout. Dieses enthält dann unsere 2 Buttons und das gesamte Layout zentrieren wir dann auf dem Bildschirm. Der Text kommt dann an den oberen Bildschirmrand. Folgendermaßen sieht der Code in unserer activity_main.xml Datei jetzt aus:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true"
android:gravity="center">
<Button
android:id="@+id/main_button_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"/>
<Button
android:id="@+id/main_button_highscore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Highscore"/>
</LinearLayout>
<TextView
android:id="@+id/main_text_headline"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Pong Deluxe"
android:textColor="#FFFFFF"
android:textSize="25sp"
android:gravity="center_horizontal"/>
</RelativeLayout>
Speichert man die Datei ab und schaut sich die Grafische Darstellung an sieht es jetzt folgendermaßen aus:
Sicherlich gewinnen wir damit keinen Design Preis aber es bietet uns die Möglichkeit uns einmal anzuschauen wie Steuerelemente angeordnet werden bevor es zu komplex und verwirrend wird.
Zunächst einmal die neuen Steuerelemente:
Button
Erstellt eine Schaltfläche die vom Benutzer später angeklickt werden kann. Neu hier ist das "id" Attribut. Dieses ist sehr sehr wichtig weil wir darüber später alle Benutzer Interaktionen abfragen werden. Wie man die id vergibt ist eigentlich egal aber um die Übersicht zu wahren sollte man sein eigenes System zum benennen verwenden. Wichtig ist nur das @+id/ vor der eigentlichen Id. Wieder schön zu sehen ist auch die layout_height und width Eigenschaft. Auf wrap_content gesetzt passt sich die Größe des Button dem Inhalt (hier der Text an).
TextView
Eine TextView ist für die Textausgabe verantwortlich. Wann immer wir dem Benutzer einen Text anzeigen wollen benutzen wir dieses Element. Es hat die selben Attribute id, layout_heigh und layout_width wie alle anderen Steuerelemente. Die letzten beiden müssen übrigens immer gesetzt sein! Um den Text zu formatieren verwenden wir textColor und textSize. Die Textfarbe wird Hexadezimal angegeben und die Größe mit einem Zahlenwert und der Einheit. Die Einheit des Textes sollte "sp" sein. Das steht für ScaledPixels und sorgt für eine gleichmäßige Größe bei verschiedenen Auflösungen. Um den Text an sich darzustellen verwendet man das Attribut "text". Ich habe hier direkt den Text dahinter geschrieben. Das ist aber so eigentlich nicht üblich. Normalerweise würde man den Text in die Strings.xml Datei schreiben und dann nur noch eine Referenz dazu verwenden. Das würde jetzt aber nur verwirren und kommt in einem späteren Tutorial. Das Attribut alignParentTop kommt vom Umgebenden RelativLayout und bedeutet das dieses Element an der oberen Kante des Umgebenden Elements ausgerichtet wird.
LinearLayout
Wie schon beschrieben können wir die Steuerelemente einfach nacheinander in die Datei schreiben und sie werden auch nacheinander angeordnet. Hierbei ist das "orientation" Attribut sehr wichtig da wir darüber bestimmen ob die Elemente nebeneinander oder übereinander angeordnet werden. mögliche Werte sind hier demnach "vertical" und "horizontal". Gleichzeitig sei hier das Attribut "gravity" erwähnt. Es bezieht sich immer auf den Inhalt eines Elements. Daher werden mit "center" alle Elemente des LinearLayouts zentriert und in der TextView z.b. der Text mit "center_horizontal" horizontal zentriert. Gleichzeitig sehen wir hier auch das Attribut centerInParent. Dieses Attribut kommt vom umgebenden RelativLayout und wird es auf true gesetzt wird dieses Element im Umgebenden zentriert.
Um zu verstehen was jedes der möglichen Attribute bewirkt empfiehlt es sich die Tooltips von Eclipse anzusehen. Ein Blick in die Android Dokumentation kann auch sehr hilfreich sein.
Die Programmierung
Bis hierher haben wirs geschafft ein Projekt zu erstellen und unser erstes Layout zu basteln. Das alleine nützt uns aber gänzlich wenig. Wir müssen jetzt den ersten Java Code schreiben um unsere Anwendung überhaupt zum laufen zu bringen.
Als erstes erstellen wir ein neues Package im src ordner. Dazu klicken wir mit der rechten Maustaste auf
"src" -> "New" -> "Package". Als nächstes tragen wir in dem erscheinendem Fenster als Package Name den Package Namen unserer Anwendung ein (in meinem Fall "com.harbrannt.pong"). Danach klicken wir auf Finish.
Jetzt brauchen wir nur noch eine Quellcode Datei. Dazu klicken wir wieder rechts auf unser frisch erstelltes Package und wählen
"New"->"File". Wir tragen den Namen ein den unsere Quellcode Datei bekommen soll. Ich habe "activity_main.java" gewählt. Für mich persönlich entsteht die beste Übersicht wenn das Layout und die Qullcode Datei den selben Namen haben. Aber auch hier kann man alles verwenden solange die Dateiendung ".java" ist. Hat man alles richtig gemacht sieht unsere Arbeitsfläche jetzt so aus.
Jetzt wird es Zeit ein bisschen Java Code in unsere activity_main.java zu schreiben. Grundkenntnisse in Java wären durchaus von Vorteil. Da Java aber relativ einfach zu lernen ist kommt man schnell dahinter wie es funktioniert wenn man eine Weile damit gearbeitet hat.
Als ersten geben wir das Package an in dem unsere Datei liegt und dann beginnt auch schon der Android Code. Zunächst machen wir nicht mehr als das Layout zu zuweisen nachdem unsere Activity gestartet wurde.
package com.hartbrannt.pong;
import android.app.Activity;
import android.os.Bundle;
public class activity_main extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Da Java Objektorientiert ist, ist jede Activity in Android eine Klasse vom Typ Activity. Eine der Funktionen die uns diese Klasse zur verfügung stellt ist "onCreate" diese Funktion wird jedesmal dann aufgerufen wenn unsere Activity neu erstellt wird. Wir benutzen diese Funktion um unser Layout zu laden und das machen wir mit der Funktion "setContentView". Als Parameter übergeben wir einen Integer Wert. Diesen Wert erhalten wir über "R". R steht hier für alle Resourcen auf die wird in unserem Projekt zugreifen können. Das layout steht für unseren layout Ordner und activity_main für unsere XML Datei. Wichtig hier wird ohne Dateiendungen gearbeitet! Über unsere Resourcen "R" können wir auch auf alle weiteren Resourcen zugreifen wie z.b. Bilder im Drawable Ordner oder Strings aus unserer String.xml im values Ordner. Dazu aber an geeigneter Stelle mehr.
Wichtig hier ist auf jeden Fall das wir als allererstes in der Funktion onCreate "super.OnCreate" aufrufen. Damit teilen wir dem System mit das wir jetzt unseren eigenen Code zusätzlich ausführen wollen und alle benötigten Daten abgerufen werden. Lassen wir diese Zeile weg kommt es zu einem Fehler und es würde nur unser Code ausgeführt werden ohne alles das was Android noch im Hintergrund tut um die Activity zu starten.
Wenn es nur darum geht unser Layout anzuzeigen sind wir an diesem Punkt bereits fertig. Und mehr wollen wir in diesem Tutorial auch nicht behandeln. Im nächsten gehen wir dann einen Schritt weiter und behandeln wie man Benutzer Eingaben abfragt.
Bevor wir unsere App jetzt starten können müssen wir nur noch eine kleine Änderung in der Manifest.xml vornehmen damit Android weiß welche Activity es starten muss und überhaupt auf unsere Activity zugreifen kann.
Wir ergänzen unsere Manifest.xml Datei um folgende Zeilen im Application Tag:
<activity
android:name=".activity_main"
android:label="@string/app_name"
android:screenOrientation="landscape">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Der Activity Tag beschreibt eine Activity die wir in unserer Anwendung benutzen wollen. Für jede Activity die wir irgendwie starten wollen muss dieser Tag vorhanden sein. Wir geben als Namens Attribut den Namen unserer Quellcode Datei (oder genauer unserer Klasse die wir darin definiert haben) an mit einem vorrausgehenden Punk. Das Label Attribute representiert den Text der normalerweise in der Titelleiste erscheinen würde. Da wir keine haben geben wir hier einfach den App Namen an. Die screenOrientation ist ein optionaler Parameter der darüber entscheided wie unsere Activity ausgerichtet wird. Da wir gerne das Querformat benutzen möchten wählen wir hier "landdscape" das Gegenteil dazu wäre "portrai". Lässt man diesen Parameter weg entscheided der Benutzer darüber wie unsere Activity ausgerichtet wird.
Für jeden andere Activity bräuchten wir gar nicht mal mehr Code. Da wir allerdings mit dieser Activity starten wollen müssen wir noch einen sogenanntent Intent Filter angeben. Was genau das ist behandeln wir später. Für den Moment sollte reichen das dieser Filter hier dafür sorgt das unsere "activity_main" diejenige Activity ist mit der unsere Anwendung startet.
Jetzt sind wir soweit um unsere Anwendung zum ersten mal zu starten. Dazu klicken wir einfach auf den grünen Pfeil der aussieht wie ein "Play" Symbol. Dann wählen wir Android Application aus der Liste aus und schon kanns los gehen. Sollte keine Gerät über USB angeschlossen sein bei dem USB Debuggin aktiviert ist versucht Eclipse den Emulator zu starten. Sollte auch hier keiner vorhanden sein werden wir dazu aufgefordert einen neuen einzurichten. Das tun wir dann einfach und schon können wir unsere Anwendung starten.
Weiter gehts dann im nächsten Tutorial.
