Android User Interface

Android User Interface Eine Einführung Jürg Luthiger University of Applied Sciences Northwestern Switzerland Institute for Mobile and Distributed Systems Ziele heute Arbeitsblatt 2 besprechen (inkl. Repetition) Die Fallstudie (Quellcode) ist als Eclipse Projekt installieren Die Kernkonzepte der UI Gestaltung in Android vermitteln und anwenden Die bewertete Übung 5 "GUI Optimierung" austeilen 2 1

Arbeitsblatt 2 Intent nutzen Intent intent = new Intent("edu.intro.HELLOWORLD"); startactivity(intent); 3 Activity Recall Eine Applikation besteht aus einer oder mehreren Activities. Jede Activity muss im AndroidManifest.xml File deklariert werden. Eine Activity wird über Intents gestartet startactivity(intent intent) Der Einstieg in eine Applikation geht über die Activity mit dem Intent Filter: action: android.intent.action.main category: android.intent.category.launcher Eine Activity kann auch aus einer anderen Applikation aufgerufen werden, falls die Eine Activity hat eine Lebenszyklus, der vom Activity Manager verwaltet wird. Der Activity Manager legt die Activities auf einem Stack ab. 4 2

Intent Recall Intent ist eine passive Datenstruktur (Message), um eine Operation zu beschreiben "Late Runtime Binding" von Komponenten in der gleichen oder in einer anderen Applikation Intent können zusätzliche Daten transportieren putextra(string key, <data>) Explicit Intent vs. Implicit Intent Intent(String action); Intent(Context package, Class clazz); // Implicit // Explicit 5 Fallstudie installieren Installieren sie das Android FlashCard Projekt AndroidFlashCard.zip von der Modul Website als Eclipse Projekt. Testen sie die Applikation! 6 3

Designing by Declaration UI können in Android auf 2 Arten gestaltet werden: Prozedural => Codierung analog Swing Deklarativ => Beschreibung in XML Vorteil der deklarativen Methode XML Code ist oft kürzer XML Code ist leserlicher GUI Designers können XML Code einfacher manipulieren 7 XML und Effizienz? Android ist optimiert für den Einsatz auf mobilen Geräten, warum dann XML? Android übersetzt die XML Dateien zur Kompilationszeit in ein komprimiertes binäres Format Android Asset Packaging Tool (aapt) Kompiliert Resourcen in ein binäres Format Normalerweise in die Entwicklungsumgebung integriert, z.b. Eclipse Plugin Das übersetzte, binäre Format wird auf das mobile Geräte geladen => kein aufwändiges XML Verarbeitung ist zur Runtime notwendig. 8 4

Class R Die Klasse R wird automatisch vom Eclipse Plugin und aapt generiert und synchron gehalten. Die Klasse umfasst alle Resourcen, die in den XML Files unter der Folder res abgelegt sind. Die Hex-Zahlen sind Handles auf die eigentliche Resource. Der Resource Manager nutzt die Handles, um die entsprechende Resource bei bedarf zu laden. 9 Beispiel: overview.xml (1) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="fill_parent"> <TextView android:id="@+id/status" android:layout_height="wrap_content" android:textsize="10sp" android:gravity="right" android:textcolor="#ffff00" />... 10 5

Beispiel: overview.xml (2)... <TextView android:id="@+id/list_questionnaires" android:paddingtop="5px" android:layout_height="wrap_content" android:textsize="20sp" android:text="@string/questionnaires" android:textcolor="#ffffff" /> <View android:layout_height="1dip" android:background="#ffffffff" /> <ListView android:id="@+id/android:list" android:layout_height="wrap_content" /> </LinearLayout> 11 Layout Ein Layout ist ein Container für ein oder mehrere Child Objekte und erlaubt die Positionierung dieser Objekte innerhalb des Containers. Typische Beispiele FrameLayout: Positioniert alle Child Objekte oben links. Anwendung in Tabbed Views oder Image Switcher LinearLayout: Positioniert die Child Objekte in einer Reihe oder Kolonne. Das meist verwendete Layout. RelativeLayout: Positioniert die Child Objekte relativ zueinander, vor allem in Formularen eingesetzt. TableLayout: Positioniert die Child Objekte in Reihe und Kolonne, analog HTML table. 12 6

Wichtige Layout Parameter xmlns:android= "http://schemas.android.com/apk/res/android" Definiert den XML Namespace für Android. Sollte einmal im File definiert, beim ersten Element definiert werden. Gibt an wie der Platz innerhalb des Parent Objektes belegt werden soll. Mögliche Werte: fill_parent und wrap_content 13 Widget In android.widget Package findet man eine grosse Anzahl von Widgets: RelativeLayout, Button, TextView, TimePicker, ViewFlipper,... Es ist ebenfalls möglich, eigene Widgets zu erzeugen. 14 7

Widget deklarativ <TextView android:id="@+id/status" android:layout_height="wrap_content" android:textsize="10sp" android:gravity="right" android:textcolor="#ffff00" /> android:id="@+id/status" Die neue Resoure ID "status" wird erzeugt. Diese ID kann später im Programm genutzt werden, um auf due TextView zu verweisen. android:gravity="right" Das Objekt wird innerhalb des Parent Objekt ganz rechts platziert. 15 Masse in Android: sp, dip, px,... Um eine hohe Portierbarkeit der Applikation zu ermöglichen, kommen in Android neben der Pixelbezeichnung auch andere Masse zum Einsatz: in (inches) mm (millimeters) pt (points): 1/72 of an inch dp (density-independant pixels) dip (= dp) sp (scale-independant pixels): Default wie "dp", jedoch wird mit der Font-Grösse skaliert Für die Portierbarkeit empfiehlt sich der Einsatz von "sp" für Textgrösse und "dp" für den Rest. 16 8

Widget programmatisch: TimePicker (1) // grab the time button picktime = (Button) findviewbyid(r.id.picktime); picktime.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { showdialog(time_dialog_id); } }); Bindet den Dialog an der Button picktime showdialog() ist eine Methode der Activity. Die Methode wird oncreatedialog() aufrufen und den Wert TIME_DIALOG_ID übergeben. 17 Widget programmatisch: TimePicker (2) protected Dialog oncreatedialog(int id) { switch (id) { case TIME_DIALOG_ID: return new TimePickerDialog(this, mtimesetlistener, mhour, mminute, false);... In oncreatedialog() wird der TimePickerDialog mit den entsprechenden Werten instantiert. Der Listener mtimesetlistener ist ein Callback Methode und wird aufgerufen, wenn der Benutzer die Zeit ändert. 18 9

Widget programmatisch: TimePicker (3) private TimePickerDialog.OnTimeSetListener mtimesetlistener = new TimePickerDialog.OnTimeSetListener() { public void ontimeset(timepicker v, int hour, int min) { mhour = hour; mminute = min; updatedisplay(); } }; In der Callback Methode werden die Werte z.b. Instanzvariablen zugewiesen, die dann andersweitig verwendet werden können. 19 Arbeitsblatt 3 Ziel Sie können die Android Klasse für das Erkennen von Touch Events und das Starten von Animation korrket einsetzen. 20 10

Beispiel Listen: ListActivity Die Klasse ListActivity ist eine Activity, die speziell für die Darstellung von Listen eingesetzt wird. ListActivity besitzt die Klasse ListView, der man verschiedene Datenquellen zuordnen kann. Zur Nutzung der ListActivity braucht es folgendes: Screen Layout Row Layout Data Binding, z.b. an eine Array oder Cursor (SQL Query) 21 Beispiel Listen: Screen Layout <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="fill_parent">... <ListView android:id="@+id/android:list" android:layout_height="wrap_content" /> Wichtig! ListView Element mit ID android:list 22 11

Beispiel Listen: Row Layout Die einzelnen Reihen einer Liste können individuell gestaltet werden. Vordefinierte Layouts wie simple_list_item_1, simple_list_item_2, two_line_list_item Eigenes Layout wie Fallbeispiel list_element.xml 23 Beispiel Listen: Data Binding DEMO (siehe Overview.java) Eigene Klasse ArrayAdapter() ListElementAdapter ListElement individuell gestaltet getview(int pos, View convertview, ViewGroup par) Daten (Questionnaire) in Liste abfüllen adapter.add(questionnaire q) 24 12

Übung 5: Splash Screen Diese Übung wird bewertet! WICHTIG: SVN Tag UEB5 setzen Abgabe Montag KW18 (Start Projektwoche!) 25 13