Android Development - User Interface programmieren

Links

http://developer.android.com/guide/topics/ui/declaring-layout.html

Einleitung

Ein grafisches Frontend besteht in Android aus einer Hierarchischen Struktur von View und ViewGroup Objekten. Diese werden in einer XML-Datei angelegt. Man kann aber auch welche dynamisch zur Laufzeit vom Programm erzeugen lassen.

View und ViewGroups

View Objekte sind in der Regel UI widgets wie:

buttons
text fields

ViewGroups sind unsichtbare Container mit denen man eine Gruppe von Objekten Anordnen kann.

Die ganze Layout-Struktur wird in einer XML-Datei definiert. In Eclipse gibt es dafür einen praktischen grafischen Editor.

Layout Beispiel

Das Default Beispiel

Wenn man in Eclipse die Default Anwendung erstellt und Blank Activity gewählt hat erhält man so etwas:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />

</RelativeLayout>

Wir haben also ein Relatives Layout, das sich über die ganze Fläche des Screens erstreckt und ein TextView Objekt enthält. Dieses wird zentriert und enthält einen String mit dem Bezeichner hello_world (also nicht den String selbst sondern einen Verweis darauf.)

Ändern wir es mal ab wie es das Google Tutorial vorsieht:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity" >
</LinearLayout>

Wir haben das TextView Element gelöscht und die das Element RelativeLayout in ein LinearLayout verändert. LinearLayout ist übrigens eine ViewGroup oder vielmehr eine Unterklasse davon.

Wir haben außerdem das Attribut android:orientation="horizontal" hinzugefügt. Der Name spricht für sich.

Elemente hinzufügen

Als nächstes fügen wir ein View Objekt hinzu. Nämlich ein Editierbares Textfeld. Das View Objekt dazu sieht so aus:

<EditText />

Für jedes View Objekt muß man einige Attribute definieren. Dann sieht es so aus: <EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message"/>

Das Attribut id vergibt einen Namen mit dem man aus der App referenzieren kann. Das at Zeichen wird benötigt, wenn man dabei auf eine Ressource in einer xml-Datei Referenzieren will. Danach kommt die Ressourcen Art (es geht also um eine id und dann ein Slash gefolgt vom Ressourcen Name (edit_message). Das + braucht man nur wenn man ids zum ersten mal nutzt. Es führt dann beim Kompilieren dazu, daß die Ressourcen ID in gen/R.java generiert wird. Auch für konkrete Dinge wie Strings oder Layouts braucht man es nicht.

Die Höhe und Breite werden wieder wie im Linearlayout mit layout_width und layout_height angegeben. Diesmal wollen wir das das Textfeld nur so groß ist, wie es sein muß.

hint ist der Standardwert im Feld. Es ist wieder eine Referenz auf eine String Ressource. Da es ein String ist brauchen wir dieses mal kein Pluszeichen. Es ist kein Problem das wir den gleichen Namen wie für die ID benutzen, weil es sich um einen anderen Typ handelt (ein String statt eine ID). Allerdings meckert Eclipse, daß der String auf den sich die Referenz bezieht nicht existiert. Das müssen wir noch nachholen.

Eine String Ressource hinzufügen

Strings sollten immer separat gepflegt, und nicht hartgecoded werden. Standardmäßig sind die Strings in

res/values/strings.xml 

zu finden. Wir ergänzen diese und nehmen gleich noch einen Label für einen Button dazu.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Beat Tools</string>
    <string name="menu_settings">Settings</string>
    <string name="button_send">Absenden</string>
    <string name="edit_message">Gib was ein</string>

</resources>

Einen Button hinzufügen

Das Label für den Button haben wir schon also zurück ins Layout (activity_main.xml). Beim Tippen hilft einem Eclipse mit Vorschlägen. Man muß also nicht alle Attribute auswendig kennen. Die Hilfe bekommt man mit Steuerung+Leertaste (Mac Apfel+Leertaste).

Das Textfeld ist jetzt links und der Button klebt am Ende. Schöner wäre es wenn das Textfeld den ganzen verfügbaren Platz (exklusive Button) nutzen würde. Dabei hilft das layout_weight Attribut.

Weight steht für den Anteil in einer View Group. Wenn ein Element 1 und eines 3 hat teilen sie sich den Platz im Verhältnis 1:3 auf. Standard Weight ist 0. Wenn ein Element einen höheren Wert bekommt z.B. 1. Nimmt es den ganzen verfügbaren Platz für sich in Anspruch (abzüglich dem Platz den die anderen Elemente sowieso benötigen.

Wir können also dem Textfeld den Wert 1 geben und er nutzt alles aus was er kriegen kann. Zusätzlich geben wir ihme die Breite zero (0dp) - dadurch spart sich das Handy die Berechnung des wrap_content, das ja ohnehin nicht mehr benötigt wird.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity" >

	<EditText android:id="@+id/edit_message"
	    android:layout_weight="1"
	    android:layout_width="0dp"
	    android:layout_height="wrap_content"
	    android:hint="@string/edit_message" />
	
	<Button 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="@string/button_send" />
	
</LinearLayout>