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.

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.

Beispiele

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.