Beruflich Dokumente
Kultur Dokumente
Android:
Grafische Benutzeroberflächen
Prof. Dr. Carsten Vogt
2019
4. Android: Grafische Benutzeroberflächen Fragestellungen dieses
Kapitels:
4.3. Auswahlangebote
4.4. Benachrichtigungen und Popup-Fenster
4.5. Berührungen und Gesten
4.6. Grafiken, Animationen und Multimedia
4.7. Spezielle GUI-Elemente und -Techniken
4.8. Fragments
4.9. Navigation
3
© Prof. C. Vogt, 2019
Software-Struktur: Activity, GUI, Ressourcen Die Screenshot-Collage
illustriert, was bei der
GUI-Programmierung
Activity: von Bedeutung ist:
> wie das Layout der GUIs der beiden Activities definiert wird,
5
© Prof. C. Vogt, 2019
Software-Struktur: Activity, GUI, Ressourcen Die Grafik skizziert die
Organisation und das
Zusammenspiel der
Applikations-Bestand-
teile, die für grafische
Grafische Oberfläche Oberflächen relevant
(GUI) sind:
8
© Prof. C. Vogt, 2019
1.) Definition der GUI: Layouts und ViewGroups
Ein Layout
• definiert die Anordnung der Views auf der GUI
Ein Layout wird also
• z.B.: lineare vertikale Liste, zweidimensionale Tabelle durch ein Objekt einer
Unterklasse von View-
Group festgelegt.
• ist ein ViewGroup-Objekt
LinearLayout: lineare
Anordnung der Ele-
• ViewGroup: Unterklasse von View mente nebeneinander
(horizontal) oder unter-
• Unterklassen von ViewGroup z.B.: einander (vertikal).
GridLayout: Anordnung
LinearLayout, GridLayout der Elemente in einer
zweidimensionalen
• enthält einfache Views oder weitere ViewGroups Struktur.
weitere Layouts: siehe
weiter unten.
• also: Layout-Schachtelung möglich einfache Views: But-
tons, Textfelder, Bilder,
• damit: hierarchische GUI-Struktur ...
Layout-Schachtelung:
• wird meist als XML-Ressource definiert z.B. ein vertikales linea-
res Layout, das mehrere
horizontale lineare Lay-
• einschließlich der enthaltenen Views outs enthält.
XML-Ressource: im
Unterverzeichnis res/
layout (siehe Folie 4).
9
© Prof. C. Vogt, 2019
> Öffnen Sie (in Android Studio mit der Beispielapplikation
„ActivitiesAndroid“) die Layout-Datei „activity_main.xml“,
indem Sie den Dateinamen im links angezeigten Dateibaum
doppelklicken.
Betrachten Sie den Inhalt der Layout-Datei und schalten Sie
zwischen der textuellen und der grafischen Darstellung hin
und her („Text“ bzw. „Design“ unterhalb des Teilfensters mit
der Dateianzeige anklicken).
Sie können die Layout-Datei in beiden Darstellungsformen
editieren – experimentieren Sie hier jeweils ein wenig.
10
© Prof. C. Vogt, 2019
1.) Definition der GUI: Java-Klassen und XML-Elemente
12
© Prof. C. Vogt, 2019
1.) Definition der GUI: XML vs. Java
> Hinweis: Bei den anderen Elementen, die dort definiert sind,
wurden keine Namen festgelegt, da auf sie aus dem Java-
Code nicht zugegriffen wird.
> Betrachten Sie die Namen der dort definierten Klassen und
der Konstanten, die in ihnen enthalten sind. Stellen Sie so
fest, dass sie den Verzeichnis- und Dateinamen des Android-
Studio-Projekts sowie Namen der dort definierten Elemente
(Button, Stringkonstanten, ...) entsprechen. 16
© Prof. C. Vogt, 2019
> Betrachten Sie schließlich den Code einer Activity von
„ActivitiesAndroid“ und suchen Sie dort nach dem Aufruf von
findViewById().
17
© Prof. C. Vogt, 2019
2.) Anzeige der GUI: Bezug zu Activities
Eine GUI ist einer Activity zugeordnet Die „GUI einer Activity”
ist also ihre Bildschirm-
anzeige, über die der
• entweder als gesamte Bildschirmseite Benutzer mit der Acti-
vity kommuniziert.
• oder als „Fragment“
Fragments: Auf großen
• Teil einer Bildschirmseite Bildschirmen können
mehrere Fragments
gleichzeitig angezeigt
Activity kann sein: werden – siehe Unter-
kapitel 4.8.
• Activity allgemeiner Art
• Activity für Spezialzweck
• z.B. android.app.ListActivity für Listendarstellung
ListActivity: siehe
Activity zeigt GUI an Unterkapitel 4.3.
18
© Prof. C. Vogt, 2019
> Suchen Sie in „ActivitiesAndroid“ nach den beiden Aufrufen
von setContentView(). Warum stehen sie ausgerechnet an
diesen Stellen?
19
© Prof. C. Vogt, 2019
3.) Kommunikation mit der GUI:
Eingaben, Ereignisse, Ausgaben
22
© Prof. C. Vogt, 2019
3.) Kommunikation mit der GUI: Listener für Views
23
© Prof. C. Vogt, 2019
3.) Kommunikation mit der GUI: Listener für Views Die Tabelle zeigt einige
Interfaces und ihre
Methoden, die in der
Namen von Listener-Interface und -Methode wird aktiv bei ... Android-Java-Klasse
View definiert sind. Ein
View.OnClickListener Anklicken Programmierer kann
diese Interfaces imple-
→ onClick() mentieren, d.h. ihre
Methoden ausprogram-
View.OnLongClickListener längerem Anklicken mieren, und entspre-
chende Objekte bei
→ onLongClick() Views registrieren.
View.OnKeyListener Tastaturereignis
→ onKey()
View.OnTouchListener Touchscreen-Ereignis
→ onTouch()
View.OnDragListener() „Drag“-Ereignis
→ onDrag()
... und weitere ...
24
© Prof. C. Vogt, 2019
3.) Kommunikation mit der GUI: Ausführung der Listener Standardmäßig wird
eine Applikation durch
einen Prozess (Task)
Ausführung der Listener: durch den Haupt-Thread der App mit einem einzigen
Thread ausgeführt. Die-
ser Thread muss insbe-
• „UI Thread“, „Main Thread“ sondere auf GUI-Ereig-
nisse (z.B. Clicks) rea-
gieren, indem er die ent-
Problem: App muss reaktionsfähig bleiben sprechenden Listener
und/oder Callback-
• UI-Tread muss Listener-Ausführung rasch abschließen Methoden ausführt. Er
wird daher auch „UI
Thread” genannt. Wird
• Gefahr bei zeitintensiven Listenern: der Thread überlastet
(z.B. durch zeitinten-
Fehler „ANR“ = „Application Not Responding“ sive Berechnungen in
einem Listener / einer
Callback-Methode), so
Lösung: dedizierte Threads zur Listener-Ausführung kann er auf das nächste
Ereignis nicht zeitge-
→ Details siehe Kap. 6.6 recht reagieren. Die
Oberfläche friert ein,
und es erscheint
schließlich eine ANR-
Fehlermeldung. Um
dies zu vermeiden,
sollte der Programmie-
rer lang andauernde
oder gar blockierende
Operationen in einen
gesonderten Thread
auslagern. Details dazu
werden in Kap. 6
besprochen.
25
© Prof. C. Vogt, 2019
> Die Programmierung von Java-Code zum Umgang mit GUI-
Elementen, die in einer XML-Datei definiert sind, ist recht
ermüdend, da viele Code-Muster immer und immer wieder
erstellt werden müssen (“Boilerplate Code”). Unterstützung
bieten hier Code-Generatoren, die solchen Code automatisch
erzeugen.
> Wenn Sie Lust und Zeit haben, können Sie einen dieser
Generatoren als Android-Studio-Plugin installieren und im
Laufe dieses Kapitels ausprobieren. Nähere Informationen
finden Sie unter
http://tmorcinek.github.io/
android-codegenerator-plugin-intellij/
26
© Prof. C. Vogt, 2019
4. Android: Grafische Benutzeroberflächen Unterkapitel 4.2. zeigt,
aus welchen Basiskom-
ponenten GUIs beste-
4.1. Struktur der Software hen und wie man sie in
einem Layout anordnet.
4.2. Basiskomponenten und Layouts
4.3. Auswahlangebote
4.4. Benachrichtigungen und Popup-Fenster
4.5. Berührungen und Gesten
4.6. Grafiken, Animationen und Multimedia
4.7. Spezielle GUI-Elemente und -Techniken
4.8. Fragments
4.9. Navigation
Detailinformationen zu Views:
https://developer.android.com/reference/android/view/View
Detailinformationen zu Layouts:
https://developer.android.com/guide/topics/ui/declaring-layout
27
© Prof. C. Vogt, 2019
Arten von Views Bei Views unterschei-
det man zwischen Wid-
gets und ViewGroups.
Widgets: zur Interaktion mit dem Benutzer
• TextView, EditText: Anzeige und Eingabe von Texten
• ImageView: Anzeige von Bildern
Button, ImageButton:
Ein Button zeigt nur
• Button, ImageButton, ...: Schaltflächen einen Text oder ein Icon
mit Text an, ein Image-
• und viele weitere: siehe folgende Abschnitte Button zeigt ein Icon
oder ein Bild an.
Organisation von
ViewGroups: zur Organisation von Views Views:
Anordnung in ihrer GUI-
• LinearLayout, GridLayout, ...: Layouts Darstellung.
28
© Prof. C. Vogt, 2019
Views: Anzeige und Eingabe von Werten Der Screenshot zeigt
oben einen TextView
und darunter einen Edit-
Einfache Views zur Textein-/ausgabe Text, die mit „TextView”
bzw. „EditText”
beschriftet sind.
• Klassen TextView, EditText In einen EditText kann
der Benutzer Zeichen-
• Methoden setText(), getText() etc. ketten eingeben. Dies
wird im Screenshot
• TextView ist nicht durch Benutzer editierbar durch die waagerechte
Linie angedeutet.
• also: Textausgabe durch die Applikation Die Textausgabe in
einem TextView ist im
Wesentlichen statisch.
• EditText ist editierbar Allerdings kann das
Programm sie mit set-
• Texteingabe mit zahlreichen Möglichkeiten: Text() ändern. get-
Formatvorgaben, Autocomplete, Eingabelistener, ... Text() liefert den aktu-
ell angezeigten Text.
• auch: Textausgabe Einem EditText kann ein
TextChangedListener
• Details: .../training/keyboard-input/style zugeordnet werden, der
bei einer Eingabe in den
Einfache Views zur Anzeige von Bildern: EditText aktiv wird.
• Klasse ImageView
• Methode setImageResource() etc.
29
© Prof. C. Vogt, 2019
> Öffnen Sie die Beispielapplikation „ServicesAndroid“.
Ermitteln Sie, wo die angezeigten Textfelder (TextView und
EditTexts) definiert werden, und finden Sie die Anweisungen,
die die Eingabewerte von den EditTexts einlesen bzw. das
Resultat der Berechnung ausgeben.
30
© Prof. C. Vogt, 2019
Views: Anzeige und Eingabe von Werten (Forts.)
AdapterViews: „Datenträger-Views“
• Klasse AdapterView Die hier gezeigten Texte
und Bilder sind nicht
mit Unterklassen ListView, Gallery, Spinner u.a. statisch in einer Layout-
Datei o.ä. vorgegeben,
sondern werden dyna-
misch aus einer Daten-
quelle (z.B. Array,
Datenbank, Datei-
listings) geholt. Dies ist
charakteristisch für
AdapterViews.
Die Klassen ListView
(linkes Bild), Gallery
(Mitte) und Spinner
(rechts) werden weiter
unten im Detail bespro-
chen.
31
© Prof. C. Vogt, 2019
ViewGroups
32
© Prof. C. Vogt, 2019
> Schauen Sie sich in der Beispielapplikation „ServicesAndroid“
an, wie ein geschachteltes Layout definiert wird.
33
© Prof. C. Vogt, 2019
Layout-ViewGroups Diese Folie listet einige
Unterklassen von
ViewGroup auf, mit
Layout-Unterklassen von ViewGroup: denen Layouts spezifi-
ziert werden können.
> Wenn Sie Zeit und Lust haben, dann informieren Sie sich unter
https://developer.android.com/
reference/android/support/constraint/ConstraintLayout 36
© Prof. C. Vogt, 2019
sowie
https://developer.android.com/training/constraint-layout/
im Detail über die Möglichkeiten des ConstraintLayouts.
37
© Prof. C. Vogt, 2019
Layout mit Styles und Themes
Alternativ: „Themes”-Festlegungen für alle Views einer Activity durch Referenzen auf
Style-Definitionen:
oder sogar einer ganzen App siehe Beispiel unten
Details hierzu:
• https://developer.android.com
/guide/topics/ui/look-and-feel/themes
• https://developer.android.com
/guide/topics/resources/style-resource
• https://developer.android.com/reference/android/R.style
38
© Prof. C. Vogt, 2019
Einige vordefinierte Themes Es gibt eine Reihe vor-
definierter Styles und
Themes, um Applikatio-
nen ein einheitliches
Erscheinungsbild zu
geben – insbesondere
das Holo Theme seiner-
zeit in Android 4.0 und
das Material Theme
aktuell seit Android 5.0
in verschiedenen Varia-
tionen. Das Translucent
Theme realisiert trans-
parente Layouts, bei
denen das darunter lie-
gende Layout durch-
Holo Holo Light Translucent Dialog scheint. Beim Dialog
Theme füllt das Layout
nur einen Teil des Dis-
plays.
Näheres zum Material
Design findet man unter
https://devel-
oper.android.com/
guide/topics/ui/look-
and-feel/ und https://
material.io/develop/
android/. Zudem gibt es
ausführlichste Style
Guidelines mit Empfeh-
lungen zur GUI-Gestal-
tung – siehe https://
Material Material Light Material Light developer.android.com/
design/.
Dark Action Bar 39
© Prof. C. Vogt, 2019
> Öffnen Sie mit Android Studio die Beispielapplikation
„StylesThemesAndroid“
> Stellen Sie fest, wie Styles definiert werden und wie man
darauf Bezug nimmt.
40
© Prof. C. Vogt, 2019
Layout für unterschiedliche Displays
41
© Prof. C. Vogt, 2019
Layout für unterschiedliche Displays
42
© Prof. C. Vogt, 2019
> Betrachten Sie in der Beispielapplikation „CounterAndroid“
das Unterverzeichnis res/drawable. Sie werden feststellen,
dass dort das Applikations-Icon in vier Versionen (d.h. für
Bildschirme mit vier unterschiedlichen Auflösungsgraden)
definiert ist.
43
© Prof. C. Vogt, 2019
Layout für unterschiedliche Displays
Empfehlung: Größen in „dp” statt „px” festlegen Gibt man die Länge und
Breite eines View in
Pixeln an (z.B. 300px
• px: absolute Pixelzahl breit, 200px hoch), so
wird es auf Displays
• dp: „density-independent pixel” unterschiedlicher Pixel-
dichten unterschiedlich
groß angezeigt – je
• zur Laufzeit: Umrechnung in Pixel des realen Geräts höher die Pixeldichte,
desto kleiner die Dar-
• somit: auch bei unterschiedlichen Pixeldichten stellung (die oberen drei
Screenshots).
dieselbe absolute Größe Es wird daher empfoh-
len, Größen in dp zu
definieren. dp-Werte
werden bei der Darstel-
lung in reale px-Werte
bei px-Angabe: umgerechnet, abhängig
von der realen Pixel-
dichte des Displays.
Damit wird erreicht,
dass der View auf allen
bei dp-Angabe: Bildschirmen mit der-
selben Größe angezeigt
wird (die unteren drei
Screenshots).
Quelle: https://developer.android.com Die Umrechnungsfor-
mel lautet
Weitere Details: px = dp*(dpi/160),
https://developer.android.com/guide/practices/screens_support wobei dpi die Pixel-
dichte des realen Dis-
plays angibt.
44
© Prof. C. Vogt, 2019
4. Android: Grafische Benutzeroberflächen Unterkapitel 4.3. listet
Techniken auf, mit
denen man Auswahlan-
4.1. Struktur der Software gebote realisieren kann:
Dem Benutzer wird eine
4.2. Basiskomponenten und Layouts Reihe von Wahlmöglich-
keiten (z.B. in der Art
eines Auswahlmenus)
4.3. Auswahlangebote angeboten, und das
Programm reagiert
4.4. Benachrichtigungen und Popup-Fenster dann auf seine Aus-
wahl.
45
© Prof. C. Vogt, 2019
Auswahlangebote – Übersicht
> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Buttons“).
> Stellen Sie dabei insbesondere fest, auf welche zwei Arten
man eine Listener-Methode (also eine Methode, die auf einen
Click reagiert), an einen Button binden kann.
> Stellen Sie auch fest, wie ein Button mit Icon und Text
definiert wird.
48
© Prof. C. Vogt, 2019
> Welcher Parameter wird an die Listener-Methode übergeben,
und wie wird er ausgewertet und genutzt?
Auf welchen zwei Wegen stellt das Beispielprogramm fest,
welcher Button geklickt wurde?
49
© Prof. C. Vogt, 2019
Buttons
Checkboxen:
• Auswahl beliebig vieler Elemente möglich
• Klasse CheckBox: für einzelne Checkbox
51
© Prof. C. Vogt, 2019
Togglebuttons und Switches
Togglebutton:
• kann „On“ oder „Off“ sein
• zeigt jeweils unterschiedlichen Text an
• Klasse ToggleButton
Switch:
• seit Android 4.0 / API-Level 14
• anderes Layout als Togglebutton,
aber dieselbe Funktionalität
• Klasse Switch
52
© Prof. C. Vogt, 2019
> Beispielapplikation „SelectionsAndroid“,
Activity „CheckboxRadioToggleDemo“:
> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Checkbox/
Radio/Toggle/Switch“).
53
© Prof. C. Vogt, 2019
Seekbar
Seekbar:
• Schieberegler zur Auswahl von Werten
• Werte sind ganzzahlig:
• Minimum und Maximum können beliebig festgelegt werden
• Default-Werte: 0 und 100 Das Minimum (= der
kleinstmögliche Wert,
der gewählt werden
• Klasse SeekBar kann) ist erst seit
Android 8.0 / API-Level
26 frei festsetzbar. In
Listener für Änderungen: OnSeekBarChangeListener der vorherigen Android-
Versionen ist das Mini-
mum stets 0.
→ Beispielprogramm Android: Seekbar Man kann Minimum und
Maximum entweder in
der XML-Layout-Datei
durch die Attribute
android:min und
android:max setzen
oder im Java-Pro-
grammcode durch die
Methoden setMin()
und setMax().
54
© Prof. C. Vogt, 2019
> Beispielapplikation „SelectionsAndroid“,
Activity „SeekbarDemo“:
> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „SeekBar“).
55
© Prof. C. Vogt, 2019
Menus
> Sie sehen zunächst die Ausgabe „Alpha“. Wechseln Sie zur
Ausgabe „Beta“, indem Sie den entsprechenden Menu-
Auswahlpunkt anklicken (über den Menubutton des Geräts
oder die Action Bar oben im Display).
57
© Prof. C. Vogt, 2019
Definition von Menus
58
© Prof. C. Vogt, 2019
Optionsmenus / Action Bar onCreateOptions-
Menu() füllt das Menu
bzw. die Action Bar mit
Erzeugung und Anzeige eines Optionsmenus: den Items, die in der
Menu-Ressource defi-
niert sind. Das Laufzeit-
• durch Drücken der Menutaste des Geräts system ruft diese
Methode auf, wenn der
• oder ständige Anzeige in der Action Bar Benutzer in dieser Acti-
vity den Menubutton
• beim ersten Anzeigen des Menus (oder bei Start der Activity): erstmals drückt bzw. die
Activity gestartet wird
Ausführung von onCreateOptionsMenu() und die Action Bar
gefüllt werden muss.
• zur Initialisierung des Menus In onPrepareOptions-
Menu(), das bei jeder
Anzeige des Menus auf-
• bei jedem (erneuten) Anzeigen des Menus: gerufen wird, können
die Menu-Einträge
Ausführung von onPrepareOptionsMenu() aktualisiert werden.
• durch registerForContextMenu(view)
registerForContext-
Menu() dafür angemel-
det werden. Hier wird
• damit Festlegung, dass bei Drücken allerdings noch nicht
festgelegt, welches
des Views view ein Menu erscheinen soll Menu das ist!
Wird dann ein so ange-
meldeter View gedrückt,
Anzeige eines Kontextmenus: so wird onCreateCon-
textMenu() aufgeru-
• durch „Long Click“ auf einen View fen. Diese Methode ist
Activity-spezifisch – sie
bezieht sich nicht auf
• dabei automatischer Aufruf von einen bestimmten View,
und für eine Activity mit
onCreateContextMenu(...,view,...) allen ihren Views gibt es
nur eine solche
• dort Auswahl eines Menus in Abhängigkeit von view Methode. Über ihren
View-Parameter kann
• und Anzeige nahe beim View oder als „Contextual Action Bar” dann festgestellt wer-
den, welcher View
gedrückt wurde, und ein
Bei Auswahl eines Menupunkts menuitem: entsprechendes Menu
angezeigt werden.
https://developer.android.com/
guide/topics/ui/menus.html#PopupMenu
62
© Prof. C. Vogt, 2019
Webseiten mit weiteren Informationen zu Menus und Action Bar
„Menus“:
https://developer.android.com/guide/topics/ui/menus
„Menu Resource“:
https://developer.android.com/guide/topics/
resources/menu-resource
63
© Prof. C. Vogt, 2019
Floating Action Button Ergänzend zu den
Menus oder anstelle
von ihnen kann ein
• Klasse FloatingActionButton „FloatingActionButton”
eingesetzt werden, um
• zur Hervorhebung einer Auswahlmöglichkeit eine Auswahlmöglich-
keit besonders hervor-
zuheben.
• Details und Beispiel siehe
http://www.journaldev.com/10318/
android-floating-action-
button-example-tutorial
64
© Prof. C. Vogt, 2019
AdapterViews: Allgemeines Bild
Ein AdapterView ist ein
GUI-Element, das die
angezeigten Daten über
einen Adapter aus einer
AdapterView Adapter Datenquelle Datenquelle bezieht.
Der Adapter ist also
Darstellung Lieferung Bereitstellung gewissermaßen die
von Daten der Daten von Daten Brücke zwischen der
Datenquelle und der
Anzeige.
Die Daten sind nicht
unbedingt statische
Ressourcen (wie z.B.
Arrays String-Konstanten aus
mit Strings res/values/
string.xml), sondern
Dateien sie können sich dyna-
misch ändern (Arrayin-
mit Bildern halte, Dateiverzeich-
nisse, Datenbankein-
Directories träge, ...). Details siehe
mit Dateinamen folgende Folien.
...
65
© Prof. C. Vogt, 2019
AdapterViews: Details Diese Folie stellt in Wor-
ten (und mit etwas mehr
Details) dar, was auf der
AdapterViews: „Datenträger-Views“ vorigen Folie in grafi-
scher Form gezeigt
wurde.
• abstrakte Oberklasse android.widget.AdapterView
• Unterklassen ListView, Spinner, Gallery, GridView, ... Details zu den Unter-
klassen: siehe Folie 68
• Interface android.widget.Adapter
• füllt AdapterView mit Daten aus der Datenquelle
• kann Anzeige aktualisieren Ein AdapterView defi-
nert die Methode
notifyDataSetChan-
• bei Änderungen in der Datenquelle ged(). Ruft man diese
Methode auf, so wer-
den alle Änderungen
der Daten in der Daten-
quelle in die Anzeige
übernommen.
66
© Prof. C. Vogt, 2019
AdapterViews: Listener Die Klasse Adapter-
View definiert Inter-
faces für Listener, die
Item-Listener: auf Drücken von Items
reagieren.
67
© Prof. C. Vogt, 2019
AdapterViews: Die wichtigsten AdapterView-Unterklassen In einer ListActivity
ist insbesondere das
Layout vordefiniert (als
ListView: vertikale Liste Liste von Items, die
untereinander angezeigt
werden). Der Program-
• statt dessen oft: ListActivity mierer muss also keine
entsprechende Layout-
• spezielle Activity zur Nutzung von ListViews Datei schreiben, und
auch der explizite Auf-
ruf von setContent-
→ Beispielprogramm Android: ListActivity View() entfällt.
Eine Alternative zu
→ Beispielprogramm Android: Activity mit Resultat (Kap. 6.) ListViews sind
RecyclerViews (siehe
https://devel-
Spinner: Dropdown-Liste oper.android.com/
guide/topics/ui/layout/
→ Beispielprogramm Android: Spinner recyclerview).
Der Name „Spinner”
erklärt sich dadurch,
Gallery: horizontale Anordnung dass in frühen Android-
Versionen die Auswahl-
→ Beispielprogramm Android: Gallery Items in einem Aus-
wahlkarussell darge-
stellt wurden. Dieses
StackView: schräg wurde später durch eine
Dropdown-Liste ersetzt.
hintereinanderliegende Anordnung Die Klasse Gallery ist
seit API-Level 16
GridView: zweidimensionale Anordnung „deprecated”, kann
aber weiterhin benutzt
werden und ist recht
→ Beispielprogramm Android: GridView 68 bequem in der Nutzung.
> Führen Sie die Activities aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkte „ListActivity“,
„ListView“, „Spinner“, „Gallery“, „StackView“, „GridView“).
70
© Prof. C. Vogt, 2019
ListView und Navigation Drawer
> Exkurs: Sehen Sie sich das entsprechende Lehrvideo und den
zugehörigen Programmcode an.
71
© Prof. C. Vogt, 2019
4. Android: Grafische Benutzeroberflächen Unterkapitel 4.4. zeigt,
wie eine Applikation
dem Benutzer Benach-
4.1. Struktur der Software richtigungen und Dia-
logfenster anzeigen
4.2. Basiskomponenten und Layouts kann.
4.3. Auswahlangebote
4.4. Benachrichtigungen und Popup-Fenster
4.5. Berührungen und Gesten
4.6. Grafiken, Animationen und Multimedia
4.7. Spezielle GUI-Elemente und -Techniken
4.8. Fragments
4.9. Navigation
72
© Prof. C. Vogt, 2019
Benachrichtigungen und Popup-Fenster
Details, insbesondere
auch zu Alert-Dialogen
etc., folgen auf den
nächsten Folien.
73
© Prof. C. Vogt, 2019
Toasts
Klasse android.widget.Toast
74
© Prof. C. Vogt, 2019
> Beispielapplikation „NotifDialogsAndroid“,
Activity „ToastDemo“:
> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Toasts“).
75
© Prof. C. Vogt, 2019
Notification
Die Status Bar wird
ständig angezeigt. Das
Anzeige in Status Bar / Notifications Window
kann vom Benutzer
Notification Area (Icon) nach unten aufgezogen
und Notifications Window (Expanded Message) werden.
> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Status Bar
Notification“).
77
© Prof. C. Vogt, 2019
Dialog Die Screenshots zeigen
Beispiele für die vier
Arten von Dialogen
Anzeige in eigenem Fenster (Alert Dialog, Progress
Dialog, Date und Time
Picker).
• Aufruf aus Activity heraus
• Activity verliert den Fokus Activity verliert den
Fokus:
Der Fokus geht in das
• damit: Eingaben in das Dialog-Fenster möglich Dialog-Fenster über.
• nur beim ersten Mal; Dialog-Objekt wird dann gespeichert • showDialog() ist
eine vorgegebene
Methode, wird also
• Bundle zur Übergabe von Parametern nicht vom Program-
mierer erstellt. Sie
• ruft onPrepareDialog(dialogID,Dialog,Bundle) auf kann mit einer ID auf-
gerufen werden und
ruft ihrerseits mit die-
• bei jeder (Neu-)Anzeige des Dialogs ser ID eine oder beide
der obigen Methoden
• z.B. zur Aktualisierung übergebener Werte auf, wodurch der Dia-
log erscheint.
onCreateDialog(dialogID,Bundle):
Die typische Vorgehens-
• Programmierer legt hier das Aussehen der Dialoge fest weise von onCreate-
Dialog() wird aus der
Beispielapplikation klar
• in switch-case-Anweisung, abhängig von dialogID (siehe nächste Folie).
Zentral ist hier eine
• Vorgehensweise: switch-case-Anwei-
sung. Sie enthält für
jeden Dialog der Acti-
• Erzeugung eines AlertDialog.Builder-Objekts builder vity (identifiziert durch
eine ganzzahlige dia-
• Festlegung der Dialog-Eigenschaften logID) einen case-
Zweig, in dem sie das
Aussehen des Dialogs
• z.B. builder.setMessage(): Beschriftung des Dialogs festlegt.
• z.B. builder.setNegative/Positive/NeutralButton():
Beschriftung und Listener der Buttons
• Erzeugung des Dialogs: builder.create()
80
© Prof. C. Vogt, 2019
> Beispielapplikation „NotifDialogsAndroid“,
Activity „AlertDemo“:
> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Alert Dialog“).
81
© Prof. C. Vogt, 2019
Alert Dialog: Unterklassen Zur Klasse AlertDia-
log sind die hier
genannten Unterklas-
Progress Dialog: Fortschrittsanzeige sen vordefiniert, die
man für spezielle Aufga-
ben einsetzt.
• Klasse android.app.ProgressDialog
→ Beispielprogramm Android: Progress Dialog
82
© Prof. C. Vogt, 2019
> Beispielapplikation „NotifDialogsAndroid“,
Activities „ProgressDemo“ und „DateTimePickerDemo“:
> Führen Sie die Activities aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Progress
Dialog“ und „Date and Time Picker Dialog“).
83
© Prof. C. Vogt, 2019
PopupWindow PopupWindows kann
man alternativ zu Alert-
Dialogs einsetzen, um
Temporäres Fenster frei gestaltete tempo-
räre Fenster anzuzei-
oberhalb der aktuellen Oberfläche gen.
• Klasse android.widget.PopupWindow
• zur Anzeige beliebiger Views
• z.B. Layout-ViewGroup als Container für mehrere Views
Methoden u.a.:
• setContentView(): legt den anzuzeigenden View fest
• showAtLocation(): zeigt das Fenster an
• update(): aktualisiert die Anzeige
• setFocusable():
erlaubt, den Fokus auf das Fenster zu setzen
• dismiss(): löscht das Fenster
84
© Prof. C. Vogt, 2019
PopupWindow
85
© Prof. C. Vogt, 2019
> Beispielapplikation „NotifDialogsAndroid“,
Activity „PopupWindowDemo“:
> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt
„PopupWindow“).
86
© Prof. C. Vogt, 2019
Webseiten mit weiteren Informationen
87
© Prof. C. Vogt, 2019
4. Android: Grafische Benutzeroberflächen Unterkapitel 4.5. zeigt,
wie eine Applikation
Berührungen und
4.1. Struktur der Software Gesten erkennen und
wie sie auf sie reagieren
4.2. Basiskomponenten und Layouts kann.
4.3. Auswahlangebote
4.4. Benachrichtigungen und Popup-Fenster
4.5. Berührungen und Gesten
4.6. Grafiken, Animationen und Multimedia
4.7. Spezielle GUI-Elemente und -Techniken
4.8. Fragments
4.9. Navigation
88
© Prof. C. Vogt, 2019
Touchscreen-Ereignisse Der Benutzer intera-
giert mit einer Applika-
tion, indem er das Dis-
Ziel: Aktionen / Gesten des Benutzers erkennen play berührt und auf
ihm Gesten ausführt.
Wie eine Applikation auf
• Benutzer vollführt die Aktionen / Gesten Standardberührungen
(z.B. Click auf einen
mit seinen Fingern auf dem Touchscreen Button) reagiert, wurde
bereits besprochen.
• oder mit einem Stift Hier geht es nun um den
allgemeinen Ansatz
zum Umgang mit Berüh-
Zu unterscheiden: rungen und Gesten.
• Einzelereignisse:
• einzelne Berührungen mit einem Finger
• Gesten:
• Folgen von Berührungen
• möglicherweise mit mehreren Fingern
• „single-touch“ vs. „multi-touch“ single-touch:
ein Finger,
multi-touch:
mehrere Finger
(z.B. Auseinanderzie-
hen zum Zoomen)
89
© Prof. C. Vogt, 2019
> Starten Sie die Beispielapplikation „TouchGesturesAndroid“
auf einem realen Gerät und gehen Sie die einzelnen
Auswahlpunkte durch:
> „Einfache Gesten“: Ziehen Sie das Icon mit dem Finger über
den Bildschirm. Drücken Sie etwas länger auf das stehende
Icon.
90
© Prof. C. Vogt, 2019
> „Animation mit Wischgeste“: Machen Sie eine (nicht zu
starke) Wischbewegung auf dem Bildschirm. Tippen Sie
anschließend kurz auf den Bildschirm und/oder machen Sie
eine neue Wischbewegung.
[Dieser Teil der Applikation wird im nachfolgenden
Unterkapitel erläutert.]
91
© Prof. C. Vogt, 2019
MotionEvent-Objekte MotionEvent ist die
zentrale Klasse bei der
Arbeit mit Berührungen
Ein Objekt der Klasse android.view.MotionEvent: und Gesten. Ein
MotionEvent-Objekt
beschreibt ein einzelnes
• beschreibt eine Berührung des Bildschirms Berührungsereignis
und enthält dafür Infor-
• genauer: die Berührung eines Views mationen wie Position
und Zeitpunkt des
Ereignisses. Die Appli-
• enthält Daten, die einen „Pointer“ betreffen kation kann diese Infor-
mationen auslesen und
• Pointer = „active touch point on the screen“ auswerten.
Eine Geste (z.B. eine
• i.a. Finger oder Stift Wischbewegung) ent-
spricht einer Folge von
Berührungsereignissen
• X-Position, Y-Position, Zeitpunkt, Druckstärke, ... und somit einer Folge
von MotionEvent-
• abfragbar mit get-Methoden: getX(), getY(), ... Objekten. Wie solche
Gesten erkannt und
• Gesamtübersicht: https://developer.android.com/reference/ behandelt werden, wird
weiter unten dargestellt;
android/view/MotionEvent hier geht es zunächst
einmal hauptsächlich
• insbesondere: getAction() um den Umgang mit
einzelnen Berührungs-
• Rückgabewert beschreibt die Art des Ereignisses ereignissen.
92
© Prof. C. Vogt, 2019
MotionEvent-Objekte: Arten von Ereignissen Wie schon gesagt, setzt
sich eine Geste aus
mehreren Motion-
Rückgabewerte der MotionEvent-Methode getAction(): Event-Objekten zusam-
men. Das action-Attri-
but eines dieser
• ACTION_DOWN: eine Geste hat begonnen MotionEvent-Objekte
beschreibt dabei die
• das Objekt enthält die Anfangsposition dieser Geste Rolle, die die entspre-
chende Berührung in
dieser Geste spielt.
• ACTION_MOVE: die Geste wird fortgeführt
• das Objekt enthält die aktuell letzte Position dieser Geste
und Zwischenpositionen seit dem letzten ACTION_DOWN
oder ACTION_MOVE
• ACTION_UP: die Geste ist beendet
• das Objekt enthält die Endposition dieser Geste
und Zwischenpositionen seit dem letzten ACTION_DOWN
oder ACTION_MOVE
• ACTION_CANCEL: die Geste wurde abgebrochen ACTION_CANCEL:
Beispielsweise, wenn
der Finger einen vorge-
gebenen Bereich ver-
lässt.
93
© Prof. C. Vogt, 2019
Views: onTouchEvent() Jedes View-Objekt
besitzt eine Callback-
Methode onTouch-
Berührungsereignisse beziehen sich auf View-Objekte Event(). Das Laufzeit-
system ruft sie bei einer
Berührung des Views
Ein View-Objekt wird über ein Ereignis informiert: auf. Bei den vorgegebe-
nen View-Klassen
(Button, ListView, ...)
• durch automatischen Aufruf ist die Methode implizit
vorhanden.
seiner View-Methode onTouchEvent()
Der Programmierer
kann eigene Unterklas-
• also: einer Callback-Methode sen von View schrei-
ben und für sie
• Parameter dabei: MotionEvent-Objekt onTouchEvent() aus-
programmieren, also
explizit festlegen, was
• beschreibt das Ereignis (→ vorherige Folie) bei der Berührung eines
solchen Views gesche-
hen soll. In der Bei-
→ Die Reaktionen eines Views auf ein Ereignis spielapplikation, die auf
programmiert man in seiner Methode onTouchEvent() aus der nächsten Folie
angesprochen wird,
wird das so gemacht.
→ Beispielprogramm Android: Einfache Berührungen Alternativ dazu kann
man eine Klasse schrei-
ben, die das Interface
Alternativ: Listener beim View registrieren View.OnTouchListe-
ner mit der Methode
onTouch() implemen-
• Interface View.OnTouchListener mit Methode onTouch() tiert, und ein Objekt die-
ser Klasse beim View
per setOnTouchListe-
94 ner() registrieren.
© Prof. C. Vogt, 2019
> Vollziehen Sie anhand der Beispielapplikation
„TouchGesturesAndroid“ die Erklärungen der vorangehenden
Folien nach:
> Was macht hier die Methode onTouchEvent() und was macht
die Methode onDraw()?
95
© Prof. C. Vogt, 2019
Touchscreen-Ereignisse: Das Gesamtbild Das Gesamtbild zeigt
den Ablauf bei der
Reaktion auf ein Berüh-
Zusammengefasst: Reaktion auf ein Touchscreen-Ereignis rungsereignis:
• Pfeil von links:
Der Benutzer berührt
auf dem Display einen
View (hier z.B. das
grün-weiße Icon).
• grünes Rechteck:
Die Klasse, zu der die-
ser View gehört, defi-
niert eine Methode
MotionEvent- onTouchEvent() mit
einem Parameter der
Objekt: Klasse MotionEvent.
Ereignis
Info über das • Pfeil vom View zum
Methoden-Parameter:
Ereignis Das Laufzeitsystem
erzeugt ein Motion-
Event-Objekt, das das
Berührungsereignis
beschreibt. Es ruft
View { onTouchEvent() des
onTouchEvent(MotionEvent ev) { betroffenen Views auf
und übergibt dabei
ev.getXX(); das MotionEvent-
... Reaktion auf Ereignis ... Objekt.
} } • onTouchEvent() rea-
giert auf das Ereignis
und wertet dafür das
MotionEvent-Objekt
durch getXX()-Auf-
96 rufe aus.
© Prof. C. Vogt, 2019
Multi-Touch Events Android kann erken-
nen, ob ein weiterer
Pointer auf den Bild-
Ereignisse mit mehreren Pointern: schirm gesetzt wird. Im
Anschluss daran wird
erkannt, welcher dieser
• „Multi-Touch Events“ Pointer bewegt wurde
bzw. das Display wie-
• z.B. mehrere Finger auf dem Bildschirm der verlassen hat. Hier-
mit kann man Applika-
tionen programmieren,
• entsprechende Komponenten der Klasse MotionEvent: die durch mehrere Fin-
ger gesteuert werden.
• zusätzliche -Konstanten ACTION_XX: Ein MotionEvent-
Objekt enthält Informa-
• ACTION_POINTER_DOWN, ACTION_POINTER_UP tionen über alle aktiven
Pointer. Die Information
= ein weiterer Pointer geht runter / hoch über einen bestimmten
Pointer erhält man dann
• int-Parameter bei getX() und getY(): über dessen Indexnum-
mer.
Index des Pointers, dessen Position abgefragt wird
→ Beispielprogramm Android:
Berührungen mit mehreren Pointern
97
© Prof. C. Vogt, 2019
> Vollziehen Sie anhand der Beispielapplikation
„TouchGesturesAndroid“ die Erklärungen der vorangehenden
Folien nach (auf einem realen Gerät, da der Emulator im
Normalfall keine Multitouch-Events unterstützt):
98
© Prof. C. Vogt, 2019
Gesten Eine Geste ist, wie
schon gesagt, eine
Folge von Berührungs-
Beispiele für Gesten: ereignissen. Daran ist
entweder nur ein Poin-
ter / Finger („Single-
• Single-Touch-Gesten: Touch“) oder mehrere
Pointer / Finger betei-
• Long Press ligt („Multi-Touch“).
• Double Tap
• Scrolling Zum Erkennen einer
Skalierungsgeste stellt
• Swiping / Flinging (= Wischen) Android einen entspre-
chenden Gesture Detec-
• Dragging tor bereit (siehe weiter
unten), für Rotationsge-
sten jedoch nicht (siehe
• Multi-Touch-Gesten: z.B. http://stackover-
flow.com/questions/
8570900/2-finger-rota-
• Scaling / Pinch Zooming (= Skalierung mit zwei Fingern) tion-gesture-listener-in-
android).
• (Rotation = Drehbewegung mit zwei Fingern)
99
© Prof. C. Vogt, 2019
Gesture Detectors Aufwendige Program-
mierung, um ... Geste zu
erkennen:
Eine Geste ist eine Folge mehrerer Events Der Programmierer
müsste Code schreiben,
der die gemeldeten
• dargestellt durch Folge von MotionEvent-Objekten MotionEvent-Objekte
speichert und sie
anhand ihrer zeitlichen
Problem: Aufwendige Programmierung, und räumlichen Bezie-
hungen zueinander ana-
um aus MotionEvents eine komplexere Geste zu erkennen lysiert.
Um dem Programmie-
Lösung: GestureDetector rer eine solche Arbeit zu
ersparen, stellt Android
Gesture Detectors
• dient zur automatischen Erkennung komplexerer Gesten bereit, die diese Ana-
lyse übernehmen. Das
• arbeitet dazu als Filter: Programm meldet
einem Detector jeden
Event, und der Detector
• wird über alle MotionEvents informiert ruft eine Listener-
Methode (= Callback-
• durch expliziten Aufruf seiner Methode onTouchEvent() Methode) auf, sobald er
aus den gemeldeten
• löst „Higher-Level Gesture Event“ aus, Event eine Geste
erkannt hat. Dieser
wenn er aus den MotionEvents eine Geste erkannt hat Listener-Aufruf ist der
„Higher-Level Gesture
Event“, der in der Folie
• ruft dafür entsprechende Listener-Methode auf genannt ist.
102
© Prof. C. Vogt, 2019
> Vollziehen Sie anhand der Beispielapplikation
„TouchGesturesAndroid“ die Erklärungen der vorangehenden
Folien nach:
103
© Prof. C. Vogt, 2019
Vordefinierte Gesture Detectors (Forts.)
android.view.ScaleGestureDetector:
• für „Pinch Zooming“ (= Skalierung mit zwei Fingern)
• zugehörige Listener-Klasse:
ScaleGestureDetector.SimpleOnScaleGestureListener
• implementiert das Interface
ScaleGestureDetector.OnScaleGestureListener
• Methoden onScale(), onScaleBegin(), onScaleEnd()
104
© Prof. C. Vogt, 2019
> Vollziehen Sie anhand der Beispielapplikation
„TouchGesturesAndroid“ die Erklärungen der vorangehenden
Folien nach:
105
© Prof. C. Vogt, 2019
Selbstdefinierte Gesten
106
© Prof. C. Vogt, 2019
4. Android: Grafische Benutzeroberflächen Unterkapitel 4.6. befasst
sich mit der Integration
von einfachen Grafiken,
4.1. Struktur der Software Animationen und Multi-
media-Clips in Applika-
4.2. Basiskomponenten und Layouts tionen.
4.3. Auswahlangebote
4.4. Benachrichtigungen und Popup-Fenster
4.5. Berührungen und Gesten
4.6. Grafiken, Animationen und Multimedia
4.7. Spezielle GUI-Elemente und -Techniken
4.8. Fragments
4.9. Navigation
107
© Prof. C. Vogt, 2019
Grundprinzip der Grafikausgabe Die Grafik zeigt die
grundlegende Vorge-
hensweise beim Zeich-
nen von Views auf dem
onDraw()-Aufruf, wenn die Oberfläche neu
Android- gezeichnet werden soll.
Bildschirm (dem Dis-
play):
Laufzeit-
system Dabei Übergabe des aktuellen Bildschirms • Jeder View definiert
eine Methode
an den Canvas-Parameter. onDraw(), die fest-
legt, wie der View
gezeichnet werden
Applikation soll. onDraw()
View: bekommt dabei die
Oberfläche, auf der
onDraw(Canvas c) { gezeichnet werden
Zeichenoperationen soll, als Canvas-Para-
meter übergeben (can-
auf dem Canvas c vas = „Leinwand“). Im
} onDraw()-Körper wer-
den dann auf dem
Canvas Methoden wie
drawLine() oder
drawRect() aufgeru-
fen.
• Ein View definiert durch onDraw(Canvas c), • Entscheidet das Lauf-
zeit-System, dass ein
wie er zu zeichnen ist View gezeichnet wer-
den soll (z.B. wenn
• Das Laufzeitsystem ruft onDraw(aktueller Bildschirm) eine Activity gestartet
wird), so ruft es des-
bei Bedarf auf sen onDraw() auf und
übergibt als Canvas-
Parameter eine Refe-
renz auf das Geräte-
108 display.
© Prof. C. Vogt, 2019
Grafikausgabe auf Canvas
Klasse android.graphics.Canvas
Methoden zum Zeich-
• definiert Methoden zum Zeichnen nen: drawLine(),
drawOval(), dra-
wRect(), ... Die Grafik,
• geometrische Formen, Texte, Bilder, ... die der Screenshot
zeigt, wurde durch Auf-
• Details siehe https://developer.android.com/ rufe solcher Methoden
erzeugt (siehe Bei-
reference/android/graphics/Canvas spielapplikation weiter
unten).
Canvas-Objekt:
• dient u.a. als onDraw()-Parameter
• repräsentiert eine Bitmap
• realer Bildschirm
• siehe vorige Folie
• oder Bitmap innerhalb des Programms
• kann später auf realem Bildschirm angezeigt werden
• Canvas-Methoden zeichnen auf dieser Bitmap
109
© Prof. C. Vogt, 2019
Schritte der Programmierung von Grafiken Die Folie skizziert die
Schritte, mit denen man
Grafiken durch selbst-
1.) Unterklasse von View definieren geschriebene Views
definieren und anzei-
gen kann.
• insbesondere onDraw(Canvas c) ausprogrammieren
• dort: Aufruf der Zeichenfunktionen auf dem Canvas c
• Details siehe nächste Folie
110
© Prof. C. Vogt, 2019
Zeichnen in onDraw() Die Folie nennt zwei
Möglichkeiten, wie man
selbstgestaltete Grafi-
onDraw() erhält Canvas c als Parameter ken auf dem Display
anzeigen kann. Details
sieht man in den Bei-
oben gezeigt: Zeichnen mit Canvas-Zeichenoperationen spielapplikationen.
111
© Prof. C. Vogt, 2019
> Beispielapplikation „GrafAnimMMAndroid“,
Activities „GrafikMitCanvas“ und „GrafikMitDrawable“:
> Führen Sie die Activities aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkte „Grafik mit
Canvas-Methoden“ und „Grafik mit Drawables“).
112
© Prof. C. Vogt, 2019
Zeitpunkt des onDraw()-Aufrufs onDraw() ist eine Call-
back-Methode von
Views: Sie wird vom
Laufzeitsystem entscheidet über Aufruf von onDraw() Programmierer
geschrieben und vom
Laufzeitsystem aufgeru-
View-Methode invalidate() bittet um diesen Aufruf fen. Das Laufzeit-
system entscheidet
über den Zeitpunkt des
• aber keine Garantie, dass er umgehend erfolgt Aufrufs, also darüber,
wann der View neu
gezeichnet wird.
Ansatz ist nur für statische Grafiken Durch den Aufruf on
und langsame Animationen geeignet invalidate() kann
eine Applikation das
Laufzeitsystem zwar
darum „bitten”, die
Oberfläche neu zu
zeichnen. Es ist aber
nicht garantiert, dass
dies dann unmittelbar
geschieht.
Die zeitliche Kontrolle
liegt hier also im
Wesentlichen beim
Laufzeitsystem.
Schnelle Animationen,
bei denen die Applika-
tion die zeitliche Steue-
rung übernimmt, sind
damit nicht möglich.
113
© Prof. C. Vogt, 2019
Animationen Bei einer Animation
wird das Aussehen der
GUI kontinuierlich ver-
Realisierung einer Animation als: ändert. Diese Folie und
die folgenden zeigen
verschiedene Möglich-
• View Animation: keiten, solche Animatio-
nen zu programmieren.
• Frame Animation: Anzeige einer Folge von Bilddateien
• → Beispielprogramm Android: Frame Animation
• Tween Animation: Transformationen eines Einzel-Views
• Änderung von Größe, Position, Orientierung, Transparenz
• → Beispielprogramm Android: View Animation
114
© Prof. C. Vogt, 2019
Animationen (Forts.)
• Property Animation: Mit einer Property Ani-
mation kann nicht nur
• Transformationen der Eigenschaften von Objekten die Anzeige von Views
auf dem Display ani-
miert werden, sondern
• keine Beschränkung auf Views es können im Prinzip
beliebige Attributwerte
• mehr Änderungsmöglichkeiten als bei View Animation (= Eigenschaften) belie-
biger Objekte im Laufe
• → Beispielprogramm Android: Property Animation der Zeit geändert wer-
den.
• Lehrvideos, Details und Beispiel-App:
http://www.nt.th-koeln.de/vogt/vma/videos.html
• Layout Transitions: Bei einer Layout Transi-
tion verschwinden /
erscheinen GUI-Ele-
• Animation des Hinzufügens / Löschens / Änderns mente (= Views) nicht
von GUI-Elementen schlagartig, sondern in
einer sanften Bewe-
gung.
• Lehrvideos, Details und Beispiel-App:
http://www.nt.th-koeln.de/vogt/vma/videos.html Viele Details kann man
den Lehrvideos und den
zugehörigen Beispiel-
Weitere Infos zu Animationen: Applikationen entneh-
men.
https://developer.android.com/
guide/topics/resources/animation-resource 115
© Prof. C. Vogt, 2019
> Beispielapplikation „GrafAnimMMAndroid“:
> Exkurs: Wenn Sie Zeit und Lust haben, so sehen Sie sich die
entsprechenden Lehrvideos und die zugehörigen
Programmcodes an.
116
© Prof. C. Vogt, 2019
Animationen mit SurfaceView Die Klasse Surface-
View ermöglicht es, ani-
mierte GUI-Elemente zu
Weitere Möglichkeit: Animation mit Threads selbst erstellen programmieren, deren
Animation unter voller
Kontrolle der Applika-
Selbst programmierte Animationen durch Zusammenspiel tion abläuft.
Wie bei einem norma-
von Objekten verschiedener Klassen und Interfaces: len View ist für ein Sur-
faceView-Objekt eine
• SurfaceView: Methode onDraw() defi-
niert, die festlegt, wie
View, in dem die Animation abläuft der View auf der GUI
gezeichnet wird.
• SurfaceHolder: onDraw() wird hier
allerdings nicht vom
zum Zugriff auf den SurfaceView Laufzeitsystem aufgeru-
fen, sondern von einem
Thread der Applikation
• SurfaceHolder.Callback: selbst. Der Programmie-
rer schreibt diesen
zur Verarbeitung von Rückmeldungen des SurfaceViews Thread und kontrolliert
damit die Animation.
• Thread: Üblicherweise läuft ein
solcher Thread in einer
zur Steuerung der Animationsschritte Endlosschleife.
117
© Prof. C. Vogt, 2019
> Starten Sie die Beispielapplikation „GrafAnimMMAndroid“
möglichst auf einem realen Gerät und gehen Sie zum
Auswahlpunkt „Animation auf SurfaceView“. Tippen Sie auf
den Bildschirm, um das Icon anzuhalten, machen Sie dann
eine Wischbewegung usw.
118
© Prof. C. Vogt, 2019
Animationen mit SurfaceView
SurfaceHolder.Callback:
• wird bei einem SurfaceView registriert
• wird benachrichtigt
bei Änderungen des Zustands des SurfaceViews
Randbemerkung zur
• durch Aufruf einer seiner Callback-Methoden Programmierung: Ein
laufender Thread kann
den Akku merklich bela-
• surfaceCreated() sten. Man sollte ihn also
erst starten, wenn er tat-
• surfaceChanged() sächlich benötigt wird
(in der Methode sur-
• surfaceDestroyed() faceCreated()), und
ihn unbedingt wieder
• insbesondere: mit dem Zeichnen beginnen, stoppen, wenn er nicht
mehr benötigt wird –
wenn der SurfaceView bereit ist insbesondere, wenn der
SurfaceView nicht mehr
angezeigt wird (in der
• d.h. in surfaceCreated(): Methode surfaceDe-
120
© Prof. C. Vogt, 2019
Animationen mit SurfaceView
SurfaceView:
onDraw(Canvas c) {
Zeichenoperationen
auf dem Canvas c
}
122
© Prof. C. Vogt, 2019
> Vollziehen Sie anhand der Beispielapplikation
„GrafAnimMMAndroid“ die Erklärungen der vorangehenden
Folien nach:
123
© Prof. C. Vogt, 2019
Open GL ES
• Animationen auch mit OpenGL ES
• „Open Graphics Library for Embedded Systems”
• umfassendes Paket für 2D- und 3D-Animation
• leistungsstark, da hardwarenah
• aber komplexe Programmierung
• Details unter:
• http://www.learnopengles.com/
android-lesson-one-getting-started/
• sehr ausführliches Tutorium
• umfassendes Beispiel mit Quellcode:
https://github.com/learnopengles/Learn-OpenGLES-Tutorials
• https://developer.android.com/
guide/topics/graphics/opengl
• https://developer.android.com/
training/graphics/opengl/ 124
© Prof. C. Vogt, 2019
> Laden Sie, wenn Sie Zeit und Lust haben, das
Beispielprogramm
https://github.com/learnopengles/Learn-OpenGLES-Tutorials
herunter und gehen Sie es durch.
125
© Prof. C. Vogt, 2019
Android Multimedia Framework
> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Multimedia“).
127
© Prof. C. Vogt, 2019
Webseiten mit weiteren Informationen
„Drawables overview“:
https://developer.android.com/guide/topics/graphics/drawables
„Animation Resources“:
https://developer.android.com/
guide/topics/resources/animation-resource
128
© Prof. C. Vogt, 2019
4. Android: Grafische Benutzeroberflächen Unterkapitel 4.7 weist
kurz auf weitere The-
men und Techniken hin,
4.1. Struktur der Software die bei der GUI-Pro-
grammierung eine Rolle
4.2. Basiskomponenten und Layouts spielen. Manche von
ihnen werden in späte-
ren Kapiteln erneut auf-
4.3. Auswahlangebote gegriffen.
129
© Prof. C. Vogt, 2019
Weitere GUI-Elemente
130
© Prof. C. Vogt, 2019
Bildschirm und Tastatur
Zugriff auf das Soft Keyboard über den Input Method Manager
• getSystemService(Context.INPUT_METHOD_SERVICE)
liefert aktuellen Input Method Manager
• getSystemService() ist eine Context-Methode
Mit diesen Methoden
• Klasse InputMethodManager mit Methoden wie: kann man das Soft Key-
board erscheinen und
• showSoftInput(), hideSoftInputFromWindow() wieder verschwinden
lassen.
131
© Prof. C. Vogt, 2019
Definition eigener View-Klassen Man kann mit selbstde-
finierten Views auf die-
selbe Weise arbeiten
Viele Views sind vordefiniert wie mit den vordefinier-
ten Views:
132
© Prof. C. Vogt, 2019
Definition eigener View-Klassen Diese Folie und die fol-
gende skizzieren die
Schritte, mit denen man
Vorgehensweise für eigenen View MyView: selbstgestaltete Views
definiert.
133
© Prof. C. Vogt, 2019
Definition eigener View-Klassen (Forts.)
Das Laufzeitsystem ruft
• View-Unterklasse MyView schreiben den Konstruktor auf,
wenn es ein XML-defi-
niertes Layout, das
• mit Konstruktor einen solchen View ent-
hält, auf dem Display
MyView(Context context, AttributeSet attrs) anzeigen will. Es
erzeugt damit (wie bei
• Aufruf bei Anzeige eines XML-Layouts mit MyView-Element vordefinierten Views
auch) ein entsprechen-
• lädt Werte aus den XML-Attributen des Layouts des Java-Objekt und
übergibt über attrs die
• mit Methode onDraw(Canvas canvas) Attributwerte aus dem
XML-Layout.
> Führen Sie die Applikation aus und betrachten Sie ihre
Ausgabe. Drücken Sie auf den View, der unten im Display
dargestellt wird.
> Betrachten Sie dann, wie die Attribute der beiden neuen
View-Klassen in attrs.xml definiert werden und wie die
Layoutdefinition in activity_main.xml darauf Bezug nimmt.
136
© Prof. C. Vogt, 2019
Nebenläufigkeit bei der GUI-Steuerung
Im einfachsten Fall:
Main Thread = UI Thread
Nur ein „Main Thread“, der alles ausführt
• Event Loop: Die Event Loop ist eine
Endlosschleife, in der
Schleife zur Entgegennahme von GUI-Ereignissen der Main Thread / UI
Thread ein Ereignis
nach dem anderen ent-
• Clicks auf Buttons, Gesten, ... gegennimmt und dar-
auf reagiert.
• Listener:
Reaktion auf jeweils eines dieser Ereignisse
Eine Gefahr besteht
darin, dass der Main
Sicherstellen: Main Thread darf nicht blockieren Thread für die Ausfüh-
rung eines Listeners zu
• sonst: Einfrieren der Oberfläche lange braucht oder dort
sogar blockiert. Er kann
dann nicht auf weitere
• „ANR“ = „Application Not Responding“ GUI-Ereignisse reagie-
ren, so dass die GUI ein-
friert. Lang laufende
Ansatz dazu: Eigene Threads für die Listener oder sogar blockie-
rende Listener lagert
• hierzu z.B.: Class AsyncTask man daher besser in
gesonderte Threads
aus. Kapitel 6.6
• detaillierte Betrachtung in Kap. 6.6 beschäftigt sich näher
mit diesem Thema.
137
© Prof. C. Vogt, 2019
4. Android: Grafische Benutzeroberflächen Unterkapitel 4.8. zeigt,
wie man die grafische
Oberfläche einer Appli-
4.1. Struktur der Software kation an die unter-
schiedlichen Bild-
4.2. Basiskomponenten und Layouts schirmgrößen von
Smartphones und
Tablets anpassen kann.
4.3. Auswahlangebote
4.4. Benachrichtigungen und Popup-Fenster
4.5. Berührungen und Gesten
4.6. Grafiken, Animationen und Multimedia
4.7. Spezielle GUI-Elemente und -Techniken
4.8. Fragments
4.9. Navigation
138
© Prof. C. Vogt, 2019
Motivation Fragments sind Teil-
GUIs, die mehrere
Views enthalten kön-
Problem: Stark unterschiedliche Bildschirmgrößen nen. Je nach Größe des
Displays kann eine Acti-
vity ein oder mehrere
• Smartphones klein, Tablets groß Fragments gleichzeitig
anzeigen. Dies wird
• „Ein Layout für alle“ nicht angemessen automatisch vom Lauf-
zeitsystem entschieden.
Durch die Einführung
Lösung: „Fragments“ von Fragments werden
Applikationen anpas-
• Seit API-Level 11 (= Android 3.0) sungsfähiger. Dafür
wird die Programmie-
rung komplexer, da hier
• Neue Ebene zwischen Activities und Views eine zusätzliche Ebene
zwischen die Gesamt-
• Activity enthält ein oder mehrere Fragments GUI einerseits und die
einzelnen Views ande-
rerseits eingeschoben
• Anzahl und Position je nach Bildschirmgröße unterschiedlich wird.
Als Android-Program-
• Fragments enthalten wiederum Views mierer wird man dazu
gedrängt, Fragments zu
• zeigen also die eigentlichen Inhalte verwendet, indem z.B.
Klassen, die noch nicht
auf Fragments basier-
ten, als „deprecated”
gekennzeichnet wur-
den. Wie die vorherigen
Abschnitte zeigen, kann
man dennoch ohne
Fragments auskommen.
139
© Prof. C. Vogt, 2019
Beispiel Die Grafik zeigt die GUI
einer Applikation, in der
zwei Fragments defi-
niert sind. Fragment A
enthält eine Auswahlli-
ste, mit der die Anzeige
in Fragment B gesteuert
wird:
• Auf einem Tablet mit
einem großen Bild-
schirm werden beide
Fragments nebenein-
ander angezeigt. Eine
Auswahl im linken
Fragment aktualisiert
die Anzeige im rechten
Fragment. Beide Frag-
ments gehören hier
zur selben Activity.
• Auf einem Smart-
phone mit einem klei-
nen Bildschirm wird
nur Fragment A mit
der Liste angezeigt.
Eine Auswahl schaltet
dann zur Anzeige von
Quelle: http://developer.android.com/guide/components/fragments.html Fragment B um. Hier
gibt es zwei getrennte
→ Beispielprogramm Android: Fragments Activities, die jeweils
eines dieser Frag-
ments anzeigen.
140
© Prof. C. Vogt, 2019
> Beispielapplikation „FragmentsAndroid“
> Führen Sie die Applikation auf einem Smartphone und einem
Tablet (oder entsprechenden Emulatoren) aus und bemerken
Sie die Unterschiede in der Darstellung.
> Schauen Sie sich in Android Studio die Dateien des Projekts
sowie die entsprechenden kommentierten Quellcodeauszüge
an. Stellen Sie fest, wie realisiert wurde, dass die Darstellung
auf Smartphone und Tablet unterschiedlich aussehen.
141
© Prof. C. Vogt, 2019
4. Android: Grafische Benutzeroberflächen Unterkapitel 4.9. reißt
kurz an, welche Unter-
stützung Android bei
4.1. Struktur der Software der Programmierung
von Applikationen bie-
4.2. Basiskomponenten und Layouts tet, bei denen der
Benutzer zwischen ver-
schiedenen Oberflä-
4.3. Auswahlangebote chen hin und her navi-
giert.
4.4. Benachrichtigungen und Popup-Fenster
4.5. Berührungen und Gesten
4.6. Grafiken, Animationen und Multimedia
4.7. Spezielle GUI-Elemente und -Techniken
4.8. Fragments
4.9. Navigation
142
© Prof. C. Vogt, 2019
Navigieren durch Oberflächen Der Screenshot illu-
striert eine typische
Applikationsstruktur:
Die Applikation besteht
aus einem System von
Oberflächen, zwischen
denen der Anwender
durch seine Aktionen
„navigiert“, also durch
Drücken von Buttons,
Auswahl von Menu-
punkt usw. hin- und her-
wechselt.
Ein Programmierwerk-
zeug (hier: Android Stu-
dio) sollte hierfür eine
Programmierunterstüt-
zung bieten, die einem
das Schreiben von „Boi-
lerplate Code” (= immer
wiederkehrenden längli-
chen Codestücken)
erspart.
Quelle: https://android-developers.googleblog.com/2018/05/android-studio-3-2-canary.html
143
© Prof. C. Vogt, 2019
Navigation: Unterstützung durch Android Jetpack Android Jetpack ist eine
Sammlung von Biblio-
theken, Entwicklerwerk-
Navigation Editor: zur Programmierung in Android Studio zeugen und Architektur-
empfehlungen, die mit
Android Studio 3.2 ein-
• Visueller Editor geführt wurden. Ein
Bestandteil von Jet-
• Erstellung des „Navigationsgraphen” einer Applikation pack sind der Naviga-
tion Editor und die Navi-
gation Architecture
• siehe vorige Folie Component. Mit dem
Editor können Navigati-
• Grundidee: onsstrukturen visuell
programmiert werden,
wie in der vorigen Folie
• Verknüpfung des Graphen mit der Main Activity illustriert. Die so spezifi-
zierten Strukturen wer-
• Navigation durch Umschalten zwischen Fragments den in XML-Dateien
gespeichert. Bei der
Ausführung navigieren
Navigation Architecture Component: dahinterliegender Code Methoden der Naviga-
tion Architecture Com-
ponent durch die Ober-
• Paket androidx.navigation.* flächen der Applikation.
145
© Prof. C. Vogt, 2019
> Beispielapplikation „AppNavigationAndroid“
> Schauen Sie sich in Android Studio die Dateien des Projekts
an – insbesondere „navigation/nav_graph.xml” in der Text-
und in der Design-Darstellung. Lesen Sie zudem die
Kommentare in MainActivity.java oben.
146
© Prof. C. Vogt, 2019