2. GUI-Programmierung für mobile Geräte

Transkript

1 2. GUI-Programmierung für mobile Geräte Lernziele 2. GUI-Programmierung für mobile Geräte Themen/Lernziele: Einführung Lebenszyklus einer Android-Anwendung Beispiele GUI-Elemente Einbindung externer Ressourcen Activity und Manifest Entwicklung eigener GUI-Klassen Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

2 Aus was besteht eine Android-Anwendung? Vgl. Folie 35: Activity: Jede Anwendung besteht aus mindestens einer Activity: Vordergrundprozess, zuständig für die Anzeige Service: Hintergrundkomponente Content Provider: Datenbereich, der für verschiedene Anwendungen zur Verfügung steht. Intent: Message-Passing-Framework für den lose gekoppelten Nachrichtenaustausch zwischen Activities und/oder Services. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

3 Broadcast Receiver: Empfänger von Intents, Angabe von Bedingungen möglich, für ereignis-gesteuerte Anwendungen Notification: Benachrichtigungen an den Benutzer ohne Wechsel der Activity im Vordergrund. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

4 Android-Projekt in Eclipse Im Wurzelverzeichnis eines Projektes: AndroidManifest.xml XML-Datei zur Beschreibung der Anwendung, z. B. aus welchen Komponenten (Activities, Services, etc.) die Anwendung besteht. project.properties Meta-Information, automatisch erzeugt, z.b. Zielplattform (API Level) Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

5 bin/ Enthält die compilierte und gebundene Applikation inklusive der apk- Datei src/ Java-Quelltexte gen/ Automatisch generierte Quelltext-Dateien, hier insbesondere die Klasse R.java res/ Non-Code Ressourcen, z.b. Grafiken, Layouts, Stringdefinitionen etc., werden eingebunden in das Anwendungspaket (.apk). Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

6 assets/ Weitere statische Dateien, die in die Anwendung eingebunden werden sollen. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

7 Ressourcen res/drawable-.../ für Grafiken/Bilder (PNG, JPEG, etc.) in verschiedenen Display-Auflösungen res/layout/ für XML-basierte Layout-Definitionen res/menu/ für Definitionen von Menüs res/values/ für Strings und Definitionen, z.b. für Lokalisation res/xml/ für sonstige XML-Dateien res/raw/ für sonstige Dateien Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

8 Dateien der Android-Anwendung Das Ergebnis der Compilierung/Erzeugung einer Anwendung liegt in bin/. bin/classes/ enthält die compilierten Java-Klassen im üblichen JVM- Bytecode. bin/classes.dex die ausführbare Anwendung erzeugt aus den compilierten Java-Klassen bin/deineapp.apk ist die Android-Anwendung fertig zur Installation. Die.apk-Datei ist ein ZIP-Archiv bestehend aus der.dex-datei, den Ressourcen, der Manifest-Datei und weiteren Dateien. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

9 Activity ganz simpel (1) Mit dem Anlegen eines Android-Projekts über Eclipse werden automatisch u.a. die folgenden Java-Klassen generiert: MeineActivity.java: Einfachster Rahmen für eine Activity-Klasse, abgeleitet von android.app.activity. R.java: Definiert symbolische Konstanten für die Ressourcen der Anwendung. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

10 Aufbau der erzeugten Activity-Klasse: package meineanwendung; import android.app.activity; import android.os.bundle; import android.view.menu; public class MyActivity extends Activity public void oncreate(bundle bundle) { super.oncreate(bundle);... Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

11 } public boolean oncreateoptionsmenu(menu menu) {... } Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

12 Schematischer Aufbau der erzeugten Klasse R: /* AUTO-GENERATED FILE. DO NOT MODIFY. */ package mobis1.b1; public final class R { public static final class attr { } public static final class drawable { public static final int icon=0x7f020000; } public static final class id { public static final int mybutton=0x7f050001; public static final int mytextview=0x7f050000; } Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

13 } 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; } Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

14 Anzeige von Inhalten für eine Activity Damit die Activity etwas anzeigt, muss ihr mit Hilfe der Methode setcontentview() ein View-Objekt zugeordnet werden. Hierzu gibt es zwei Möglichkeiten: Wir erzeugen passende View-Instanzen und weisen diese der Activity zu: public void oncreate(bundle bundle) { super.oncreate(bundle); } MyView myview = new MyView(this); this.setcontentview(myview); Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

15 Wir nutzen eine vordefinierte Layout-Definition aus den Ressourcen: public void oncreate(bundle bundle) { super.oncreate(bundle); } this.setcontentview(r.layout.mylayout); Meistens wird der zweite Weg der bevorzugte Weg sein. Bemerkung: Anders ist dies bei der Entwicklung von View-Bibliotheken. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

16 Activity ganz simpel (2) Eine Activity ermöglicht das Anzeigen einer UI-Komponente mittels der Methode setcontentview(). Die UI-Komponenten selbst sind von der Klasse android.view.view abgeleitet. Für das Anzeigen verschiedener UI-Komponenten benötigen wir entweder verschiedene Activities oder eine saubere Logik um mittels setcontentview() zwischen den UI- Komponenten zu wechseln. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

17 Wir bevorzugen die erste Möglichkeit. Damit sind wir aber bis zum Thema Komponententechnologie auf eine Activity in einer Anwendung beschränkt. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

18 Activity ganz simpel (3) Activities sind Komponenten! Um eine Komponente/Activity in einer Anwendung nutzen zu können, muss sie im Manifest definiert werden: <activity android:name=".myactivity" <intent-filter> <action android:name="android.intent.action.main"/> <category android:name="android.intent.category.launcher"/> </intent-filter> </activity> Nur für die mit Projektdefinition erzeugte Activity geschieht dies automa- Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

19 tisch. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

20 Activity Stack Android verwaltet die Activities auf einem Stack. Wenn eine neue Activity startet, wird die zuletzt aktive Activity auf den Stack gelegt. Wird die sich im Vordergrund befindliche Activity geschlossen oder der Benutzer benutzt den Back-Button, dann wird die oberste Activity des Stacks aktiv. Tief im Stack befindliche Activities können von der Android- Laufzeitumgebung gelöscht werden, um ausreichend Ressourcen bereit zu stellen. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

21 Zustände einer Activity active: Sichtbare Activity, bereit Eingaben zu empfangen (Focus), liegt oben auf dem Stack. Android versucht dieser Activity alle notwendigen Ressourcen bereit zu stellen, eventuell durch kill anderer nicht aktiver Activities. Wird eine andere Activity active, geht diese Activity in den Zustand paused oder stopped über. paused: Die Activity ist sichtbar, hat aber nicht den Focus. Entsteht wenn eine andere Activity, die transparent ist oder nicht den ganzen Schirm abdeckt, sich überhalb der Activity befindet (Beispiel: Dialog). Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

22 Wird wie eine aktive Activity behandelt, empfängt einer keine Benutzereingaben. Wird eine Activity vollständig verdeckt, geht sie in den Zustand stopped über. stopped: Die Activity ist nicht mehr sichtbar. Sie verbleibt zunächst im Speicher, kann aber jederzeit von Android Laufzeitumgebung entfernt werden. Dann ist sie inactive. inactive: Eine inaktive Activity muss neu gestartet werden, damit sie wieder angezeigt und benutzt werden können. Die Zustandsübergänge werden vollständig von der Android- Laufzeitumgebung initiiert. Eine Anwendung hat aber die Möglichkeit, auf die Zustandsübergänge zu reagieren. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

23 Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

24 Methoden für Zustandsübergänge Damit eine Activity auf die Zustandsübergänge reagieren kann, bietet sie entsprechende Methoden an: void oncreate(bundle bundle) void onstart() void onrestart() void onresume() void onpause() Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

25 void onstop() void ondestroy() Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

26 Activity Lifetimes Entire Lifetime: zwischen oncreate() und ondestroy() Legen Sie in oncreate() alles an, was Sie auf jeden Fall brauchen und sorgen Sie in ondestroy() dafür, dass alle noch belegten Ressourcen freigegeben werden. Visible Lifetime: zwischen onstart() und onstop() Behandlung von Ressourcen die für die Anzeige benötigt werden. Foreground Lifetime: Zwischen onresume() und onpause() Mehrfacher Wechsel des Zustands möglich, tritt z.b. auf, wenn das Telefon in den Ruhezustand übergeht. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

27 2. GUI-Programmierung für mobile Geräte Views und Layouts Views und Layouts View: Basisklassen für visuelle Komponenten. Alle UI-Komponenten sind von der Klasse View abgeleitet. ViewGroup: Klassen, die mehrere Views bündeln. Hierzu gehören z.b. die Layout-Klassen wie LinearLayout. Eine ViewGroup ist eine spezielle View. Widget: View, die zur Interaktion mit dem Benutzer verwendet wird. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

28 2. GUI-Programmierung für mobile Geräte Views und Layouts View-Hierarchie Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

29 2. GUI-Programmierung für mobile Geräte Views und Layouts Grundlegende Widgets TextView: Read-Only Text, unterstützt Formatierung EditText: Editierbare TextView ListView: ViewGroup zum Anzeigen einer Liste von textuellen Einträgen, jeder Eintrag wird dargestellt durch eine einzelne View (üblicherweise TextView) Spinner: Komposition von TextView und ListView. Der über die ListView ausgewählte Eintrag wird in der TextView angezeigt. Button: gewöhnlicher Push-Button Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

30 2. GUI-Programmierung für mobile Geräte Views und Layouts CheckBox: Button mit zwei Zuständen (selektiert bzw. nicht selektiert) RadioButton: Gruppierte Buttons mit zwei Zuständen und wechselseitigem Ausschluss Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

31 2. GUI-Programmierung für mobile Geräte Views und Layouts Layout-Klassen LinearLayout: Horizontale oder vertikale Ausrichtung der enthaltenen Views. Verschachtelung möglich! FrameLayout: Jede View wird in der linken oberen Ecke plaziert. RelativeLayout: Positionierung von Views relativ zu den anderen Views und den Bildschirmgrenzen TableLayout: Aufteilung in Zeilen und Spalten. Bildschirmelemente können mehrere Zeilen/Spalten umfassen, Zeilen können schrumpfen und wachsen. AbsoluteLayout: Positionierung auf der Basis von absoluten Koordinaten. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

32 2. GUI-Programmierung für mobile Geräte Views und Layouts XML-basierte Layout-Definitionen Gerüst, z.b. für LinearLayout: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">... </LinearLayout> Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

33 2. GUI-Programmierung für mobile Geräte Views und Layouts Layout-Attribute Wichtige Attribute (nicht nur für LinearLayout): android:orientation: Ausrichtung beim Layout, vertical oder horizontal android:layout width: Art des horizontalen Füllens, fill parent oder wrap content android:layout height: analog für vertikales Füllen Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

34 2. GUI-Programmierung für mobile Geräte Views und Layouts Kopplung der Komponenten Die Hierarchie der Views spiegelt sich in der XML-Definition wider: <LinearLayout...> <Button.../> <TextView.../> <LinearLayout...> <TextView.../> <EditText.../> </LinearLayout> </LinearLayout> Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

35 2. GUI-Programmierung für mobile Geräte Views und Layouts Entwurfsmuster Beobachter (1) Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

36 2. GUI-Programmierung für mobile Geräte Views und Layouts Entwurfsmuster Beobachter (2) engl.: Observer Pattern bzw. Listener Subject ist eine Klasse, deren Instanzen durch andere Objekte beobachtet werden können. Observer sind die Objekte, die Subject beobachten. Bei Observer handelt es sich i.d.r. um eine abstrakte Klasse bzw. Schnittstelle. Die Beobachtung erfolgt mit Hilfe einer (abstrakten) Methode notify(). Diese wird von Subject aufgerufen, wenn ein bestimmtes Ereignis eingetreten ist (z.b. der Zustand von Subject hat sich geändert). Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

37 2. GUI-Programmierung für mobile Geräte Views und Layouts Da Observer in der Regel abstrakt ist, muss in spezialisierten Unterklassen eine konkrete Implementierung von notify() stattfinden. Damit ein Subject weiß, welche Observer benachrichtigt werden sollen, muss sich ein Observer beim Subject mittels der Methode register() registrieren. Ein Subject verwaltet alle registrierten Observer. Wenn jetzt das bestimmte Ereignis eintritt, ruft das Subject auf allen registrierten Observern die Methode notify() auf. Hierdurch werden die Observer über das Ereignis informiert. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

38 2. GUI-Programmierung für mobile Geräte Views und Layouts Entwurfsmuster Beobachter in Java Subject ist eine Klasse, deren Instanzen beobachtet werden können. class Subject {... } Observer ist als Interface definiert. interface Observer { void notify(subject subject); } Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

39 2. GUI-Programmierung für mobile Geräte Views und Layouts Konkrete Observer implementieren das Interface Observer. class ConcreteObserver implements Observer {... public void notify(subject subject) {... }... } Nach der Registrierung kann der konkrete Observer benachrichtigt werden. Subject s = new Subject(); Observer o = new ConcreteObserver(); s.register(o); Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

40 2. GUI-Programmierung für mobile Geräte Views und Layouts Implementierung eines Observers kann auch über eine anonyme Klasse üblicherweise bei der Registrierung erfolgen. Subject s = new Subject(); s.register(new Observer() { public void notify(subject subject) {... } }); Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

41 2. GUI-Programmierung für mobile Geräte Views und Layouts Entwurfsmuster Beobachter in Android für GUI-Komponenten Subject sind Views oder ViewGroups. Der Name der Registrierungsmethode nimmt Bezug auf den Observer, z.b. setonclicklistener(). Der Name der Benachrichtigungsmethode nimmt Bezug auf das Ereignis, z.b. onclick(). Es kann typischerweise nur ein Beobachter bzw. Listener registriert werden! Will man mehr als einen Beobachter über ein Ereignis informieren, muss man selbst einen Multiplexer realisieren. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

42 2. GUI-Programmierung für mobile Geräte Views und Layouts Entwurfsmuster Beobachter: Beispiel Button Die Klasse Button realisiert einfache Push-Buttons mit Text als Button- Label. Button entspricht Subject im Muster Beobachter. Für die Beobachtung von Button-Clicks steht die Schnittstelle View.OnClickListener zur Verfügung. public interface View.OnClickListener { public void onclick(view view); } Im einfachsten Fall fungiert unsere Activity als Observer. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

43 2. GUI-Programmierung für mobile Geräte Views und Layouts public class MyActivity extends Activity implements View.OnClickListener {... public void onclick(view view) { // behandle den Button-Click... }... } Problem: Wie kommt man an die Button-Instanz, um die Activity als Beobachter registrieren zu können? Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

44 2. GUI-Programmierung für mobile Geräte Views und Layouts Identifikation von Objekten Jede View kann durch android:id mit einer ID versehen werden. Aufbau der z.b. Mit Hilfe der Methode findviewbyid erhält man innerhalb der Applikation das zugehörige Objekt: Button button = (Button)findViewById(R.id.mybutton); Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal

45 2. GUI-Programmierung für mobile Geräte Views und Layouts Beispiel: Identifikation von Objekten Beispiel 2.1. Aktuelle Uhrzeit auf Knopfdruck Siehe Homepage Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl/Neuss, 3. Quartal