Software rules the world Wir bauen die Welt, in der ihr lebt

24. Oktober 2010

Android Layouts

Filed under: Android,Tutorial — Schlagwörter: , — admin @ 14:31


Android Anwendungen mit einer grafischen Oberfläche (GUI) bestehen aus Views und ViewGroups. Views sind grafische Elemente (Buttons, Text, Label, etc.) und ViewGroups sind Container, die Views zu einer Oberfläche zusammenfassen. Wie diese Views dargestellt werden, wird durch Lauyouts bestimmt. Die Layouts werden dabei in speziellen Layout-Resourcen definiert.

Wenn man eine neue Android Anwendung mit Hilfe des ADK erstellt und dabei eine Activity erzeugen lässt, erstellt der Wizard zwei Dateien:

  • Die Java Quelle (Beispiel: /src/net.blochberger.tutorial.android.layout/Main.java) für die Activity
  • Die Layout-Resource (Beispiel: /res/layout/main.xml) für die Activity

Struktur einer neuen Android Anwendung

Struktur einer neuen Android Anwendung

Im nebenestehenden Screenshot ist die Struktur der generierten Android Anwendung zu erkennen. Die erezugte Layout-Datei für die Haupt-Avitvity (1) befindet sich im Verzeichnsi /res/layout.

Für den Zugriff aus den Java Quelltexten generiert das ADK eine Klasse mit dem Namen R (2), mit deren Hilfe man die Layout Ressource in der Klasse der Haupt-Activity ansprechen kann:


package net.blochberger.tutorial.android.layout;

import android.app.Activity;
import android.os.Bundle;

public class Main extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Die Klasse R spiegelt dabei das res-Verzeichnis 1:1 wieder:


/* AUTO-GENERATED FILE.  DO NOT MODIFY.
 *
 * This class was automatically generated by the
 * aapt tool from the resource data it found.  It
 * should not be modified by hand.
 */


package net.blochberger.tutorial.android.layout;

public final class R {
    public static final class attr {
    }
    public static final class drawable {
        public static final int icon=0x7f020000;
    }
    public static final class layout {
        public static final int main=0x7f030000;
    }
    public static final class string {
        public static final int app_name=0x7f040001;
        public static final int hello=0x7f040000;
    }
}

Die neu erstellte Layout Datei sieht wie folgt aus:


1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
    <TextView
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:text="@string/hello"
   />
</LinearLayout>

In Zeile 4 und 5 wird festgelegt, dass das HauptLayout (hier ein LinearLayout) in der Breite und in der Höhe die gesamte Fläche des Parents einnimmt. Mit dem Attribut android:layout_width wird angegeben, wie viel Platz das Control innerhalb der X-Achse des Parents einnehmen soll. Entsprechendes gilt auch für das Attribut android:layout_height. Mit dem Wert „fill_parent“ wird festgelegt, dass das Control den gesamten verfügbaren Platz verwenden soll.

Das einzige Control in diesem Beispiel belegt in der Breite den gesamten verfügbaren Platz (Zeile 7: android:layout_width=“fill_parent“), während es in der Höhe seine Größe an den Inhalt des Controls anpasst (Zeile 8: android:layout_height=“wrap_content“). Da es sich beim Parent um ein LinearLayout mit vertikaler Ausrichtung handelt (Zeile 3: android:orientation=“vertical“), werden die Controls untereinander dargestellt. Das so erstellte Layout hat folgendes Aussehen:

Die Anwendung

Die Anwendung

Achtung! Da der Layouter die Elemente in der Reihenfolge abarbeitet, in der sie im Layout angegeben sind, führt ein Wert von „fill_parent“ dazu, dass alle nachfolgenden Controls nicht mehr dargestellt werden, da bereits jeder vorhandene Platz durch ein Element vorher vollständig belegt wurde.

Vertikales LinearLayout mit mehreren Elementen

Um die Auswirkungen der Attribute zu verdeutlichen, betrachten wir die unterschiedlichen Kombinationen nebeneinander:




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="fill_parent"
 android:layout_height="fill_parent">
  <Button android:text="@+id/Button01" android:id="@+id/Button01"
   android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
    <Button android:text="@+id/Button02" android:id="@+id/Button02"
   android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
</LinearLayout>

Zwei Buttons mit "wrap_content"

Zwei Buttons mit "wrap_content"


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="fill_parent"
 android:layout_height="fill_parent">
  <Button android:text="@+id/Button01" android:id="@+id/Button01"
   android:layout_width="fill_parent" android:layout_height="wrap_content"></Button>
    <Button android:text="@+id/Button02" android:id="@+id/Button02"
   android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
</LinearLayout>

Erster Button mit layout_width="fill_parent"

Erster Button mit layout_width="fill_parent"


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="fill_parent"
 android:layout_height="fill_parent">
  <Button android:text="@+id/Button01" android:id="@+id/Button01"
   android:layout_width="fill_parent" android:layout_height="wrap_content"></Button>
    <Button android:text="@+id/Button02" android:id="@+id/Button02"
   android:layout_width="wrap_content" android:layout_height="fill_parent"></Button>
</LinearLayout>

Zweiter Button mit layout_height="fill_parent"

Zweiter Button mit layout_height="fill_parent"

In der obigen Tabelle kann man sehr gut die Auswirkungen des Wertes „fill_parent“ erkennen. Würde man nun nach dem zweiten Button noch ein weiteres Element zu diesem Layout hinzufügen, dann wäre dieses nicht sichtbar, weil der zweite Button bereits den gesamten vertikalen Platz des vertikalen LinearLayouts belegt. Der Attribut-Wert „fill_parent“ ist also nur für das letzte Element einer ViewGroup sinnvoll!

Post to Twitter

27. März 2010

Hello Android!

Filed under: Android,Tutorial — admin @ 14:41


Schritt 1: Installation des Android SDK

Um Android Anwendungen entwickeln zu können ist es nötig ein Android SDK zu installieren. Auf der Web-Site des Android Projekts gibt es die Auswahl, für welches Betriebssystem man das SDK herunterladen möchte. Leider gibt es keine Version für 64 Bit Linux, daher muss man das 32 Bit SDK herunterladen.

Glücklicherweise wird auf der Installationsseite genau beschrieben, welche Software man auf einem Ubuntu-System installieren muss, damit das Android SDK verwendet werden kann. Vor allem muss man die 32 Bit Unterstützung, Sun-Java und Eclipse installieren:

apt-get install ia32-libs

apt-get install sun-java6-bin

Da leider in den Ubuntu-Repositories keine aktuelle Eclipse Version angeboten wird, sollte man Eclipse direkt von der Eclipse-Download Seite herunterladen, denn für die Android Development Tools (ADT) wird mindestens Eclipse 3.4 vorausgesetzt.

Nachdem nun alle Voraussetzungen erfüllt sind, kann das Android Starter Package für Linux heruntergeladen werden und anschließend in einem beliebigen Verzeichnis entpackt werden:

tar xvzf android-sdk_r05-linux_86.tgz

Das Basis Verzeichnis des SDK befindet sich dann unter android-sdk-linux_86

Mit dem Starter Package hat man allerdings noch kein vollständiges SDK. Um die Installation zu vervollständigen muss der Android SDK and AVD Manager aufgerufen werden:

<sdk-verzeichnis>/tools/android

Android SDK Manager mit ausgewählten Paketen für das Android SDK 2.1

Unter den Available Packages finden sich alle Versionen des Android SDK. Für die Zwecke dieses kleinen Einführungsbeispiels dürfte die Version nicht relevant sein, daher kann man ruhig die aktuellste Version, hier die Version 2.1 installieren. Nach einem Klick auf Install Selected lädt der SDK Manager die benötigten Dateien herunter und installiert sie. Vorher muss man noch den Lizenzbestimmungen für die einzelnen Komponenten zustimmen.

Schritt 2: Installation der Android Developer Tools

Für die Entwicklung von Android bietet sich Eclipse an, da es sich bei Android Anwendungen um Java Programme handelt. Um Android Anwendungen mit Eclipse zu entwickeln, müssen die Android Developer Tools (ADT) installiert werden. Hierfür gibt es die Update-Site des Android-Projekts: https://dl-ssl.google.com/android/eclipse/

Dazu öffnet man in Eclipse den Update-Manager unter Help/Install New Software. Dort fügt man dann die oben genannte Update-Site hinzu:

Eintragen der Update-Site des ADT in Eclipse

Anschließend kann man dann die Developer Tools auswählen und installieren:

Installation der Developer Tools

Schritt 3: Ein erstes Programm

Bevor wir ein erstes Programm entwickeln, müssen wir noch die Testumgebung einrichten. Wir benötigen ein virtuelles Gerät (Android Virtual Device (AVD)), auf dem wir die Software laufen lassen können, doch zuvor müssen wir Eclipse noch mitteilen, wo sich das Android SDK befindet.

  1. In den Android Preferences (Window > Preferences > Android) muss das SDK-Basis-Verzeichnis eingetragen werden:

    Einstellung des SDK Pfades

  2. Starten des Android SDK and AVD Managers (in Eclipse unter Window > Android SDK and AVD Manager)
  3. Anlegen eines neuen Virtual Device
  4. Wir geben dem Gerät den Namen TestDevice, und als Target wählen wir Android 2.1 – API Level 7 aus:

    

    Erstellen eines neuen Virtual Device

  5. Nachdem das virtuelle Gerät angelegt ist, können wir ein erstes Projekt erstellen

Erstellen eines Android Projekts

In Eclipse kann nun mit dem Android Projekt Assistenten ein neues Projekt erstellt werden (File > New > Android Project):

Android Projekt Assistent

  1. Als Name wählen wir android.hello (dabei handelt es sich um den Eclipse-Projektnamen)
  2. Als Application name stellen wir Hello Android ein
  3. Der Package Name muss aus mindestens zwei Identifiern bestehen, warum das so gefordert wird, ist mir jedoch unklar. Aber es ist sowieso gute Praxis, einen Pacakge Namen wie hier anzugeben: com.wordpress.argeleb.android.hello
  4. Wir erzeugen eine Activity, da diese in den allermeisten Fällen erstellt wird, auch wenn sie optional ist. Der Assistent generiert eine Klasse, die von der Android Klasse Activity abgeleitet ist.

Der Assistent ist so freundlich und hat bereits eine GUI-Datei angelegt, in der der Text Hello World, HelloActivity zu lesen ist:

Jetzt kann man bereits diese rudimentäre Anwendung ausführen, indem man im Kontextmenü des Projekts den Punkt Run As > Android Application auswählt. Nach eine gewissen Ladezeit des Emulators erscheint dann folgendes Bild:

Android Emulator mit geladener Hello World Anwendung

Das war’s im Prinzip. Viel Spaß beim herum experimentieren!

Weiterführende Literatur findet sich auf den Entwickler-Seiten des Android Projekts.

Post to Twitter

19. Februar 2010

KDE Tutorial: Teil 3, Qt Exkurs

Filed under: KDE,Qt,Tutorial — admin @ 17:56


In diesem dritten Teil möchte ich ein wenig auf die Details des Qt-Framworks eingehen. Das Qt-Programm, das ich entwickelt habe ist ein GUI für einen sehr speziellen Aufruf des Kommondozeilen-Programms mencoder. Dieses erste Program hat keine KDE Bestandteile, sondern ist ein pures Qt-Program, das mit Hilfe der IDE QtCreator entwickelt wurde.

Ich habe auf der Projektseite alle Dateien, auch die generierten Dateien eingecheckt.

Leider ist es nicht so leicht möglich, hier mit WordPress Quelltexte vernünftig zu formatieren, daher habe ich diesen Teil wieder in ein PDF auf der Projektseite (oder auch als OpenDocument) zu dieser Tutorial-Reihe abgelegt. Viel Spass beim Lesen…

Post to Twitter

Older Posts »

Powered by WordPress