Android event handling

layout01

Intro:

Diese Seite beschreibt in Grundzügen wie ein einfaches Event-Handling im Android-Framework funkioniert. Ziel ist es, möglichst schnell ein brauchbares Ergebnis zu erzielen und ein Erfolgserlebnis zu haben. Diese Anleitung stellt keinen Anspruch auf Vollständigkeit sondern ist der Quick-way für Ungeduldige, die gerne auf die Schnelle etwas sehen möchten.

Voraussetzungen:

  • Eine funktionierende Entwicklungsumgebung (in meinem Fall ist das Eclipse)
  • Basis-Know-How in Java und XML

Basis für jedes Android User-GUI ist eine XML-Layout-Datei. In dieser Datei werden Layout, Controls, deren Vorgaben etc. definiert. Beim Aufruf eines GUIs (einer Android-Activity mit User-Interface) wird diese XML-Datei vom Android-Framework ausgelesen und verarbeitet (inflated). Sie ist verantwortlich für die Anordnung und teilweise auch das Erscheinungsbild des GUI. Sie ist daher ein wesentlicher Bestandteil einer Activity. Hier sollte man wissen, was man zu tut hat.

Werkzeuge:

Ein hervorragendes Werkzeug um schnell und und ohne viel Aufwand korrekte XML-Layout-Dateien für Android zu erzeugen ist DroidDraw. Es mag nicht das ultimative Profi-Werkzeug sein, für unsere Zwecke ist es aber allemal gut geeignet. Also, nach DroidDraw googlen, runterladen und installieren!

Basisprojekt anlegen:

Bevor wir loslegen, starten wir Eclipse und legen mit Hilfe des Wizzards das einfachste aller möglichen Android-Projekte an. Wir nennen es ButtonTest. Wir sagen dem Wizzard noch wie unsere Activity, die Packages und alles andere heißen und sagen “Mach fertig”. Er legt uns ein Mini-Projekt mit der Android-Grundstruktur an, ganz easy. Ein solches Projekt hat alles was wir brauchen.

AndroidProject

  • Eine Activity
  • Eine Layout-Datei (res/layout/main.xml)
  • Eine String-Value Datei (res/values/strings.xml – hier speichern wir Strings die wir im Programm verwenden)
  • Ein Icon (res/drawable/icon.png)

Damit haben wir alles was wir brauchen um eine lauffähige Oberfläche zu schaffen.

Projekt starten:

Als erstes werfen werfen wir das Projekt einmal an, um zu prüfen, ob auch alles korrekt laüft. Also, rechte Maus in Eclipse und “Debug als Android Anwendung” klicken. Jetzt sollte der Emulator anspringen und unser “Hallo Welt” starten.

Die Projekt Layout-Datei:

Die projekterzeugte Layout-Datei ist wirklich sehr einfach. Hier wird einfach ein “Hallo Welt” auf die View geworfen und fertig. Wir wollen aber ein wenig mehr. Wir wollen ein kleines Programm, das uns den Wert, den wir in ein Textfeld eingeben auf Knopfdruck in ein anders Textfeld (eine Textview) überträgt. Damit haben wir schon ein wenig mehr als in unserem Hallo-Welt-Projekt. Schließlich müssen wir den Klick-Event auf unseren Button auswerten, daraufhin etwas aus einem anderen Control auslesen (aus dem EditText) und anschließend diesen Wert einem weiteren Control (dem TextView) übergeben. Das ist für den Anfang ja schon mal nicht schlecht.

Eine eigene Layout-Datei:

Im folgenden werden wir eine ganz einfache Layout-Datei erzeugen, diese vom Framework laden lassen und uns das Ergebnis im Android-Emulator ansehen. Dazu starten wir DroidDraw, wählen ein TableLayout und ziehen nacheinander drei Controls auf das Fenster links.

1) Einen Button, 2) einen EditText und 3) als letztes eine TextView. Das ganze sollte dann folgendermaßen aussehen.

DroidDraw_01

Der generierte Code sieht folgendermaßen aus:

android:id="@+id/widget31"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">

android:id=”@+id/widget32
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”EditText”
android:textSize=”18sp”>

android:id=”@+id/widget33
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”TextView”>

Erwähnenswert und wichtig an diesem Code ist folgendes:

  • Es wurde ein TableLayout gewählt. Diese Form des Layouts und die “fill_parent” Anweisungen sorgen dafür, dass die Controls “gedehnt” werden und den gesamten horizontalen Bereich der View einnehmen.
  • Die ‘android:id=”@+id/widget32″‘ Anweisung wird vom Framework speziell behandelt. Das “@” weist den Framework-Parser an, diesen Ausdruck zu expandieren und für eine eindeutige Nummerierung des Controls zu sorgen. Dieser Vorgang erfolgt zur Kompilierzeit, so dass das Control mit der zugewiesenen ID innerhalb der Entwicklungsumgebung programmatisch ansprechbar ist. Das hört sich kompliziert an, ist aber superpraktisch und einfach zu handhaben.

Wir kopieren diesen Code und speichern ihn in einer Datei mit dem Namen mylayout.xml unter res/layout/mylayout.xml

Einbinden des neuen Layouts:

Das Einbinden des neuen Layouts erfolgt gleich zu Beginn des Programmablaufes in der Methode onCreate. Diese Methode wird vom Android-Framework immer zu Beginn einer Activity aufgerufen. Hier setzen wir unser neues Layout über die Methode setContentView.

Zuerst holen wir uns Instanzen der Controls. Aus Performancegründen sollten nach Google-API wenn möglich statische Variablen verwendet werden. Die Tatsache, dass wir die Controls schon an der Oberfläche sehen besagt nicht, dass wir schon Instanzen davon besitzen. Die Arbeit des Anzeigens hat uns das Framework komplett abgenommen. Alles was dazu nötig war, ist ja in unserer mylayout.xml definiert.

Einmal alles durchbauen und starten. Unser Emulator sollte nun mit der neuen Oberfläche hochkommen, geschafft. Ein Klick auf den Knopf überzeugt uns aber davon, dass unsere neue Anwendung noch nichts kann. Geplant war, den Text aus dem Eingabefeld auf Knopfdruck in das Textfeld zu übergeben. Um den Knopf dazu zu bringen, auf einen Klick zu reagieren, müssen wir ihm noch einen Listener anhängen, der das Ereignis für uns “abfängt” und uns die Möglichkeit gibt, darauf zu reagieren.

Hier der gesamte Code.

package p1.p2;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class ButtonTest extends Activity {

private static Button mybutton;
private static EditText myedittext;
private static TextView mytextview;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.mylayout);
initControls();
}

public void initControls() {
mybutton = (Button) findViewById(R.id.thebutton);
mytextview = (TextView) findViewById(R.id.thetextview);
myedittext = (EditText) findViewById(R.id.theedittext);

mybutton.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
mytextview.setText(myedittext.getText().toString());
}
});
}
}