Sie sind auf Seite 1von 146

Kapitel 4

Android:
Grafische Benutzeroberflächen
Prof. Dr. Carsten Vogt

Technische Hochschule Köln


Fakultät Informations-, Medien- und Elektrotechnik

2019
4. Android: Grafische Benutzeroberflächen Fragestellungen dieses
Kapitels:

4.1. Struktur der Software • 4.1.) Wie sieht die all-


gemeine Struktur einer
Android-Applikation
4.2. Basiskomponenten und Layouts mit grafischen Ober-
flächen (GUIs) aus?
4.3. Auswahlangebote • 4.2.) Aus welchen
Basiskomponenten
4.4. Benachrichtigungen und Popup-Fenster bestehen GUIs und
wie ordnet man diese
Komponenten in
4.5. Berührungen und Gesten einem Layout an?
• 4.3./4.4./4.6./4.7.) Wel-
4.6. Grafiken, Animationen und Multimedia che wichtige GUI-Ele-
mente gibt es im Ein-
4.7. Spezielle GUI-Elemente und -Techniken zelnen?
• 4.5.) Wie kann eine
Applikation Berührun-
4.8. Fragments gen und Gesten erken-
nen und auf sie reagie-
4.9. Navigation ren?
• 4.8.) Wie kann man
Applikationen an die
unterschiedlichen
Wichtige Abkürzung: GUI = Graphical User Interface Bildschirmgrößen von
Smartphones und
Tablets anpassen?
Grundlegende Webseite: • 4.9.) Wie kann man
https://developer.android.com/guide/topics/ui/ eine App programmie-
ren, die den Benutzer
durch verschiedene
2 Oberflächen navigie-
ren lässt?
© Prof. C. Vogt, 2019
4. Android: Grafische Benutzeroberflächen Unterkapitel 4.1. gibt
eine einführende Über-
sicht über die Struktur
4.1. Struktur der Software einer Android-Applika-
tion mit grafischen
4.2. Basiskomponenten und Layouts Oberflächen (GUIs).

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:

referenziert / • rechts Mitte: Grafische


Anzeigen (GUIs) sind
benutzt die Activities zugeordnet.
Views der GUI Die Elemente einer
solchen GUI (soge-
→ Java-Code nannte „Views“: Text-
felder, Buttons, ...)
sind in einem Layout
GUI der Activity: angeordnet.
zeigt Views • links: Eine GUI basiert
auf Ressouren. Dazu
(= GUI-Elemente) gehören eine XML-
ordnet sie in Datei, die ihr Layout
spezifiziert, und ggf.
Layout an weitere Dateien.
• rechts oben: Activi-
Ressourcen: Layouts mit Views, Konstanten, Bildern, .. ties greifen aus ihrem
Java-Code auf die GUI
→ XML-Code (u.a.) und deren Ressourcen
zu. Z.B. wird mit set-
ContentView() ein
Layout auf dem Dis-
play angezeigt.
• ganz unten: Eine Datei
R.java definiert für
jede Ressource eine
Ganzzahlkonstante.
Datei R.java → automatisch generierter Java-Code: Mit ihr kann aus Java
Brücke zw. XML und Java 4
heraus die Ressource
identifiziert werden.
© Prof. C. Vogt, 2019
> Reproduzieren Sie in Android Studio mit der
Beispielapplikation „ActivitiesAndroid“ das, was Sie im
oberen Teil der vorherigen Folie sehen.

> Versuchen Sie für „ActivitiesAndroid“ herauszufinden,

> wie das Layout der GUIs der beiden Activities definiert wird,

> wie dabei festgelegt wird, welche Bilder angezeigt werden


sollen, und

> durch welchen Methodenaufruf die Layouts auf dem Display


erscheinen.

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:

Layout mit Views, • links: Eine Activity


interagiert über die
Eingaben Ausgaben Bildern, Styles, GUI mit ihren Benut-
zern. Sie ist in Java
... programmiert.
• rechts: Die Ressour-
cen der Applikation
Activity Ressourcen sind in XML und ande-
ren, datenspezifi-
schen Formaten
Java-Code XML-Code u.a. codiert. Sie werden an
der GUI angezeigt. Der
Java-Code der Acti-
vity greift auf die Res-
Von Interesse: sourcen zu – z.B. um
ein bestimmtes Layout
1.) Definition der GUI auf das Display zu
bringen oder einen
Listener (d.h. eine
2.) Anzeige der GUI Methode zur Reaktion
auf Clicks) an einen
3.) Kommunikation mit der GUI Button zu binden.
Die unter 1-3 genann-
ten Punkte werden auf
den folgenden Folien
näher diskutiert.
6
© Prof. C. Vogt, 2019
1.) Definition der GUI: Views „View“ ist der Sammel-
begriff für alle Ele-
mente, die in einer GUI
View: GUI-Element in einer Bildschirmseite angezeigt werden kön-
nen (z.B. TextViews für
statische Textausgaben
• belegt einen rechteckigen Ausschnitt des Bildschirms oder Buttons).
Die grundlegenden
• definiert die Grafik-Ausgabe in diesem Ausschnitt Eigenschaften von
Views (Höhe, Breite,
• reagiert auf Eingaben / Ereignisse in diesen Ausschnitt Position und vieles
mehr) werden in einer
Klasse View definiert,
Arten von Views: von der speziellere
View-Klassen (Button,
EditText, ...) abgelei-
• „Widgets“: zur Interaktion mit dem Benutzer tet sind.

• Texteingabefelder, Buttons, Checkboxen, ... Vom programmtechni-


schen Standpunkt sind
• „ViewGroups“: zur Organisation von Views Widgets und View-
Groups nicht streng
• Layouts, Listen, Bildergalerien, ... voneinander getrennt.
Widget ist ein Paket,
ViewGroup eine Klasse.
Klasse View: Oberklasse vieler Android-GUI-Klassen Es gibt GUI-Elemente,
die beides sind (z.B.
LinearLayouts).

Man kann eigene Views


definieren, indem man
Unterklassen von View
7 schreibt.

© Prof. C. Vogt, 2019


> Verschaffen Sie sich in der Android-Dokumentation
https://developer.android.com/reference/classes
einen (nur sehr groben) Überblick über die Klasse View und
ihre Unterklassen.

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

Für jede Art von View (und damit auch ViewGroup):


• eine Java-Klasse:
• Unterklasse von View
• z.B. Java-Klassen TextView, LinearLayout
• siehe z.B. https://developer.android.com/reference/
android/widget/TextView
• zur Arbeit mit Views in Activities
• ein XML-Element
• z.B. XML-Elemente <TextView>, <LinearLayout>
1:1-Beziehungen: Für
• siehe z.B. https://developer.android.com/reference/ jede Java-Klasse gibt es
ein entsprechendes
android/R.styleable.html#TextView XML-Element und
umgekehrt. Meist haben
• zur Definition von Views in einer Layout-Datei beide denselben
Namen.
Für jedes XML-Element
1:1-Beziehungen zwischen Java-Klassen und XML-Elementen in einer Layout-Datei
einer Applikation wird
ein entsprechendes
11 Java-Objekt erzeugt.

© Prof. C. Vogt, 2019


> Gehen Sie in der Android-Java-Dokumentation zur
Beschreibung einer View-Unterklasse (z.B. TextView). Stellen
Sie fest, dass hier sowohl die XML-Attribute als auch die Java-
Attribute („Fields”) und -Methoden beschrieben werden.

12
© Prof. C. Vogt, 2019
1.) Definition der GUI: XML vs. Java

Zwei Möglichkeiten zur GUI-Programmierung:


• XML-Datei schreiben ...
• mit geschachtelten XML-Elementen
→ definieren Bestandteile der GUI und ihr Layout
• ... oder Java-Code schreiben
Java-Code schreiben:
• auf Grundlage der View-Unterklassen GUI-Elemente als Java-
Objekte erzeugen (z.B.
• ähnlich Swing ll = new LinearLay-
out(..)) und ineinan-
der schachteln (z.B.
Empfehlung: XML-Ansatz, da übersichtlicher ll.addView(...)).
dynamische Erzeugung
• zusätzlich in Java-Code: und Löschung: Ein sta-
tisches „Grundlayout“,
dynamische Erzeugung, Änderung und Löschung das durch eine XML-
Datei definiert ist, wird
von GUI-Komponenten dynamisch verändert,
indem man zusätzliche
GUI-Elemente als Java-
Objekte erzeugt (z.B. tv
= new TextView(..))
und einem vorhandenen
Layout hinzufügt (mit
addView(tv) – siehe
13 oben).
© Prof. C. Vogt, 2019
1.) Definition der GUI: Ressourcen

Layout-XML-Dateien sind „Ressourcen“


• können weitere Ressourcen nutzen

Ressourcen sind nicht-Java-Bestandteile des Programms


• Layouts, Styles, Menus, Texte, Bilder, Multimediadaten, ...
In res/layout können für
• auch: String-Konstanten! verschiedene Klassen
von Bildschirmen (z.B.
Bildschirme mit unter-
Ressourcen sind in XML- oder Binärdateien gespeichert schiedlichen Größen)
unterschiedliche Lay-
• res/layout: Bildschirmseiten mit Layout outs definiert werden
(Details siehe weiter
unten).
• res/values: konstante Werte, Styles
• res/drawable: insbes. Bilder konstante Werte: insbe-
sondere Strings.

• res/menu: Menus, Action Bars (App Bars)


Styles: siehe weiter
unten.
• und weitere
weitere: res/anim für
Details dazu: Animationen, res/color
für Farben.
https://developer.android.com/guide/topics/resources/ 14
© Prof. C. Vogt, 2019
1.) Definition der GUI: Die Brücke zwischen XML und Java

Ressourcen haben Schlüsselnamen


• z.B. <Button ... android:id="@+id/switchActivity"> Bedeutung von @+:
@ = der folgende String
• definiert z.B. in res/layout/activity_main.xml ist eine ID-Ressource.
+ = die ID wird hier neu
definiert.
Android Asset Packaging Tool (aapt) Bei IDs, die schon
anderweitig definiert
erzeugt daraus den „Schlüsselwertspeicher“: wurden, wird das + weg-
gelassen. Z.B. bezieht
sich @android:id/
• Klasse R: definiert alle Schlüssel als benannte Konstanten empty auf den vordefi-
nierten Android Name-
• in Java-Syntax! space mit der Klasse
android.R.

• z.B. public static final int


aapt: wird automatisch
switchActivity=0x7f050000 bei der Übersetzung
(beim „Build”) einer
Applikation aufgerufen.
Activity verschafft sich Ressourcen-Zugriff über die Klasse R:
• findViewById(schlüssel) liefert Referenz auf View-Objekt
• z.B. oben: findViewById(R.id.switchActivity)
• liefert Referenz auf Java-Objekt der Klasse Button
15
© Prof. C. Vogt, 2019
> Betrachten Sie die Layout-Dateien der Beispielapplikation
„ActivitiesAndroid“ und stellen Sie fest, dass die dort
definierten Buttons mit Namen (IDs) versehen sind.

> Hinweis: Bei den anderen Elementen, die dort definiert sind,
wurden keine Namen festgelegt, da auf sie aus dem Java-
Code nicht zugegriffen wird.

> Suchen Sie die Datei R.java der Beispielapplikation


„ActivitiesAndroid“ und öffnen Sie sie mit einem Editor.

> Hinweis: Die Datei befindet sich tief unten im


Verzeichnisbaum des Projekts. Um sie zu finden, orientieren
Sie sich an der Pfadangabe, die Sie in der unteren Abbildung
von Folie 4 sehen.

> 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().

> Schauen Sie sich schließlich an, welche weiteren Ressourcen


zu „ActivitiesAndroid“ gehören.

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.

durch Zugriff auf entsprechende Layout-Definition


• z.B. Aufruf in onCreate():
setContentView(R.layout.name_der_layoutdatei)

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

Activity reagiert auf Eingaben in die GUI


und GUI-Ereignisse, z.B.: Details zu Ein- und Aus-
gaben, insbesondere
• Texteingaben auch zu Gesten, wer-
den weiter unten
besprochen.
• Clicks
• Gesten

Activity schreibt Ausgaben in die GUI, z.B.:


• Textausgaben
• Grafiken Ein-/Ausgaben beziehen
sich auf Views:
• Animationen Von einer Eingabe ist
immer ein bestimmter
View betroffen. Z.B.
Ein-/Ausgaben beziehen sich auf Views (oder ViewGroups) bezieht sich ein Click
auf einen bestimmten
Button, nicht auf die
• siehe hierzu auch die View-Dokumentation: GUI als Ganzes, und
aktiviert daher den
https://developer.android.com/reference/android/view/View Listener dieses But-
tons.
20
© Prof. C. Vogt, 2019
3.) Kommunikation mit der GUI: Reaktion auf Ereignisse / Events durch das Laufzeitsy-
stem aufgerufen:
Wenn das Laufzeit-
GUI-Ereignis führt zu Aufruf einer Methode onXXX() system auf dem Geräte-
display ein Berührungs-
ereignis bemerkt, stellt
• „Callback-Methode“: wird durch den Programmierer definiert es zunächst fest, wel-
cher View berührt
und durch das Laufzeitsystem aufgerufen wurde. Es ruft dann eine
vom Programmierer
Definition einer Callback-Methode onXXX(): geschriebene Callback-
Methode auf, die diesem
View zugeordnet ist.
• im View selbst
• Methode wird in View-Unterklasse ausprogrammiert Der Programmierer
kann selbst Unterklas-
sen von View schrei-
• z.B. View-Methode onDraw() ben und dort die Metho-
den onDraw() und
• wird vom Laufzeitsystem aufgerufen, um den View zu zeichnen onTouchEvent() aus-
programmieren (siehe
• z.B. View-Methode onTouchEvent() später).

• wird bei Berührungsereignis aufgerufen OnClickListener()


ist ein Interface, das die
• oder in einem Listener Methode onClick()
deklariert. Der Program-
mierer muss es in einer
• Methode wird in OnXXXListener-Klasse ausprogrammiert konkreten Klasse imple-
mentieren, also dort
• z.B. OnClickListener-Methode onClick() onClick() auspro-
grammieren (siehe dazu
die übernächste Folie).
• wird bei Click auf einen Button aufgerufen 21
© Prof. C. Vogt, 2019
> Suchen Sie in der Dokumentation der Klasse View nach der
Methode onTouchEvent(). Näheres zu dieser Methode lernen
Sie in Unterkapitel 4.5.

> Stellen Sie fest, welche weiteren Callback-Methoden für


Views es gibt.

> Betrachten Sie in der Beispielapplikation „ActivitiesAndroid“


den Code einer Activity. Finden Sie heraus, wie dort der
Button-Listener programmiert und beim Button registriert
wurde. Stellen Sie dabei auch fest, wie der Listener im
Einzelnen auf einen Click reagiert.

22
© Prof. C. Vogt, 2019
3.) Kommunikation mit der GUI: Listener für Views

Listener = Event Handler =


Objekt mit Callback-Methoden zur Reaktion auf Ereignisse
• wie in Java SE

Listener werden ...


• ... definiert: durch Implementation eines Interface
class MyListener implements OnClickListener {
public void onClick(View v) {
Log.v("DEMO","---> Click on Button <--- ");
...
• ... erzeugt: durch Konstruktor-Aufruf
MyListener lis = new MyListener()
• ... bei den GUI-Elementen registriert
myButton.setOnClickListener(lis)

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.

• ScrollView: scrollbares Feld


• CalendarView, DatePicker: Datums-Ein-/Ausgabe
• und viele weitere: siehe folgende Abschnitte
• insbesondere Auswahl- und Ausgabelisten

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.

> Stellen Sie fest, wo in der Beispielapplikation


„ActivitiesAndroid“ der ImageView zur Anzeige des Bilds
definiert wird und woher er das angezeigte Bild bezieht.

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.

• stellen Daten aus Datenbanken, Dateisystem, ... dar


• Details siehe 4.3.

31
© Prof. C. Vogt, 2019
ViewGroups

Abstrakte Oberklasse android.view.ViewGroup

ViewGroup dient als „Container” für weitere Views


• oder auch für ViewGroups → Schachtelung Schachtelung von View-
Groups z.B.: Ein vertika-
les lineares Layout, das
Aufgaben von ViewGroups: mehrere horizontale
lineare Layouts enthält.
• Zusammenfassung von Views zu größeren Einheiten
• z.B. geschachtelte Auswahlboxen
• Festlegung des Layouts
• z.B. Anzeige mehrerer Views linear untereinander:
Der links angegebene
<LinearLayout ... XML-Code steht in einer
Layout-Datei.
android:orientation="vertical">
<TextView .../>
<Button .../>
</LinearLayout>

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.

• FrameLayout: Anzeige eines einzelnen Views FrameLayout: Im Lay-


out können mehrere
Views enthalten sein.
• LinearLayout: horizontale oder vertikale Anordnung Einer davon wird im
Display links oben
• GridLayout: zweidimensionale Anordnung mit Scrolling angezeigt, die anderen
werden von ihm ver-
deckt.
• TableLayout: Anordnung in Tabelle mit Zeilen und Spalten RelativeLayout,
ConstraintLayout:
• RelativeLayout: Anordnung relativ zu anderen Elementen z.B. Festlegungen der
Art „View1 liegt links
• ConstraintLayout: von View2” oder Festle-
gung der Größen einzel-
wie RelativeLayout + weitere Eigenschaften ner Elemente abhängig
von der Displaygröße.

• siehe nächste Folie Früher gab es noch das


„AbsoluteLayout”, in
dem die View-Positio-
• ListView: vertikale Liste mit Scrolling nen durch absolute
Angaben festgelegt
• Gallery: horizontale Anordnung von Bildern wurden. Es wird aber
nicht mehr unterstützt,
da sich damit eine
• Spinner: Drop-Down-Liste Applikation nicht auto-
matisch an Geräte mit
• ... unterschiedlichen
Bildschirmgrößen
34 anpassen kann.

© Prof. C. Vogt, 2019


ConstraintLayout Mit ConstraintLayouts
soll sich die Darstellung
der Oberfläche einer
Positionen / Größen von Elementen relativ zu Applikation möglichst
gut automatisch an die
Eigenschaften des
• anderen Elementen Gerätedisplays anpas-
sen. Dies wird dadurch
• dem Gesamtdisplay erreicht, dass die Eigen-
schaften von Widgets (=
Oberflächenelementen)
→ automatische Anpassung an unterschiedliche Displays relativ zu den Eigen-
schaften anderer Wid-
gets und des Gesamt-
Erstellung mit grafischem Editor: displays spezifiziert
werden – insbesondere
ihre Positionen und
Größen.
zum Beispiel:
Mit dem grafischen Edi-
1.) tor von Android Studio
1.) Anordnung mit Winkel / Radius kann man solche Lay-
outs weitgehend per
Drag&Drop aufbauen.
2.) Höhen / Breiten Der untere Teil der Folie
2.) relativ zur Displaygröße illustriert einige Mög-
lichkeiten von Cons-
traintLayouts.
3.) 3.) festes Verhältnis Höhe / Breite

4.) 4.) Ausrichtung an Guideline


5.)
5.) gleichmäßige Verteilung
35
© Prof. C. Vogt, 2019
> Laden Sie die Beispielapplikation „LayoutAndroid“ nach
Android Studio, führen Sie sie aus und betrachten Sie das
Frame Layout, das Relative Layout, das Constraint Layout, das
Grid Layout und das Table Layout (sowohl an der
Benutzeroberfläche als auch die entsprechenden XML-Layout-
Dateien und deren Anzeige im grafischen Layout-Editor).
Experimentieren Sie etwas, indem Sie die Layout-Inhalte
ändern. Weitere Informationen zu Layouts finden Sie unter
https://developer.android.com/guide/topics/ui/declaring-
layout.
(ListViews und Spinner werden weiter unten näher betrachtet.)

> Die Activity „JavaDefinedLayout“ (Auswahlpunkt „Linear


Layout definiert in Java“) zeigt Ihnen, dass man ein Layout
nicht unbedingt durch eine XML-Datei definieren muss,
sondern auch im Java-Code selbst festlegen kann.

> 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.

> Betrachten Sie nochmals die Beispielapplikation


„ActivitiesUeberlagertAndroid“ mit einem transparenten
Layout und einem Layout, das das Display nur teilweise füllt.

37
© Prof. C. Vogt, 2019
Layout mit Styles und Themes

Layout-Festlegungen für einzelne Views


(z.B. Textgröße, Schriftart, Farbe, ...)
innerhalb der XML-Elemente der Views
(in den Layout-Dateien in res/layout/):
durch Attribute in den
• direkt durch Attribute in den XML-Elementen XML-Elementen: z.B.
<TextView ...
android:textSize
• durch Referenzen auf Style-Definitionen in res/values ="12pt"
...>

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.

> Definieren Sie eigene Style-Festlegungen.

> Gehen Sie zur Web-Seite


https://developer.android.com/reference/android/R.style
und schauen Sie sich an, welche vordefinierten Themes es
gibt.
Probieren Sie insbesondere THEME_MATERIAL und
THEME_MATERIAL_LIGHT praktisch aus.

> Schauen Sie sich zudem in der Beispielapplikation


„LayoutAndroid“ den Unterpunkt „Linear Layout mit Style und
Shape“ mit dem zugehörigen Quellcode an.

40
© Prof. C. Vogt, 2019
Layout für unterschiedliche Displays

Zu berücksichtigen: Unterschiedliche Geräte-Displays


Bildschirmgrößen: Die
• unterschiedliche Bildschirmgrößen Bildschirmgrößen von
Android-fähigen Gerä-
ten differieren mittler-
• unterschiedliche Pixeldichten: „dpi“ = „dots per inch“ weile gewaltig (Smart-
phones, Tablets, TV-
Geräte).
Kategorien: Pixeldichten: Bei einer
hohen Pixeldichte lie-
• Bildschirmgrößen: gen die Bildpunkte des
physischen Displays
• bis Android 3.1: small, normal, large, xlarge dicht beieinander; die
Auflösung ist damit
hoch. Die Pixeldichte
• ab Android 3.2: sw<zahl>dp, w<zahl>dp, h<zahl>dp wird in dpi angegeben.
Bis Android 3.1 wurde
• sw = smallest width, w = available width, h = available height nur grob zwischen vier
verschiedenen Größen-
• Pixeldichten: ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi klassen unterschieden.
Mittlerweile erlauben
Zahlenangaben
• entsprechen ~120 / ~160 / ~240 / ~320 / ~480 / ~640 dpi genauere Spezifikatio-
nen (z.B. sw600dp =
Geräte mit einer Bild-
schirmbreite von min-
destens 600 Pixeln).

41
© Prof. C. Vogt, 2019
Layout für unterschiedliche Displays

Programmierer kann für jede Display-Konfiguration


Wird eine Applikation
• eigene Layouts definieren auf einem Gerät ausge-
führt, so stellt das Lauf-
zeitsystem dessen Bild-
• insbes. unterschiedlich für Smartphones und Tablets schirmeigenschaften
fest und verwendet
• z.B. in den Foldern res/layout, res/layout-sw600dp, ... dann automatisch die
passenden Layouts und
Ressourcen.
> Betrachten Sie in der Beispielapplikation „CounterAndroid“ Der Programmierer
stellt diese Layouts und
das Unterverzeichnis res/layout und suchen Sie nach den Ressourcen in Unter-
verzeichnissen bereit.
entsprechenden Layout-Dateien. Die Namen der Unter-
verzeichnisse charakte-
• eigene Ressourcen bereitstellen risieren die Display-
Konfiguration, für die
die Layouts / Ressour-
• insbes. Bitmap-Bilder unterschiedlicher Auflösung cen verwendet werden
sollen.
• z.B. in den Foldern res/drawable-mdpi, ...

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.

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

45
© Prof. C. Vogt, 2019
Auswahlangebote – Übersicht

Auswahlen durch den Benutzer insbesondere über:


• einfache Buttons, Radiobuttons und Checkboxen
• Seekbars: Schieberegler
Action Bars (auch App
• Menus: Auswahllisten Bars genannt) wurden
eingeführt, als Geräte
• Optionsmenu: bei Drücken des Menubuttons des Geräts ohne physischen Menu
Button aufkamen. Eine
Action Bar wird oben im
• auf heutigen Geräten: permanente Action Bar (App Bar) Display permanent
angezeigt und bietet
• Kontextmenu: bei Drücken eines bestimmten Views dem Benutzer Auswahl-
möglichkeiten. Die
dahinterstehende Pro-
• Popupmenu: aus Programm durch show()-Aufruf grammiertechnik ist
aber i.w. dieselbe wie
• AdapterViews: Auswahlmöglichkeiten mit bestimmtem Layout bei den traditionellen
Optionsmenus.
• ListView: vertikal scrollbare Liste Während Options- und
Kontextmenus durch
Drücken des Displays
• Spinner: Dropdown-Liste erscheinen (bzw. per-
manent angezeigt wer-
• Gallery: horizontal scrollbare Liste den), erscheint ein
Popupmenu, wenn im
Programm die Methode
• GridView: zweidimensionale Darstellung show() aufgerufen
46 wird.

© Prof. C. Vogt, 2019


Buttons Für Buttons program-
miert man Callback-
Methoden. Sie werden
Button: Schaltfläche zum Anklicken aufgerufen, wenn der
Benutzer einen Button
berührt. Die Methoden
Reaktion auf Click: können auf zwei ver-
schiedene Arten defi-
niert werden:
• entweder über OnClickListener-Klasse: • Wie bei Java Swing als
Methode einer Liste-
• dort Methode onClick(View v) ausprogrammieren ner-Klasse. Objekte
dieser Klasse werden
• Listener-Objekt beim Button registrieren: bei Buttons registriert.
• Durch eine Stand-
button.setOnClickListener() alone-Methode. Sol-
che Methoden werden
• siehe auch 4.2 durch XML-Attribute in
Layout-Dateien den
Buttons zugeordnet.
• oder durch eigenständige Methode: In beiden Fällen hat die
Methode einen Parame-
• Methode void beliebigerName(View v) programmieren ter vom Typ View. Über
ihn wird eine Referenz
• z.B. innerhalb der Activity-Klasse auf den View (hier: auf
den Button) übergeben,
der berührt wurde. Das
• Methode dem Button zuordnen: erlaubt, bei mehreren
android:onClick=”beliebigerName” in der Layout-Datei Buttons dieselbe
Methode zu registrieren
und bei ihrer Ausfüh-
→ Beispielprogramm Android: Buttons rung abzufragen, um
welchen Button es sich
47 handelt.

© Prof. C. Vogt, 2019


> Beispielapplikation „SelectionsAndroid“,
Activity „ButtonsDemo“:

> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Buttons“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschrift „Android: Buttons“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

> 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?

> Gehen Sie zu https://material.io/tools/icons/


und betrachten Sie die Icons, die dort zum Download
bereitstehen und für Buttons genutzt werden können.

49
© Prof. C. Vogt, 2019
Buttons

Klassen für Buttons:


myButton.getText()
• Klasse Button liefert den Text, mit dem
der Button myButton
beschriftet ist. So kann
• Methoden setText(), getText() etc. man z.B. in der Listener-
Methode über deren
View-Parameter (siehe
> Beispielapplikation „SelectionsAndroid“, vorige Folie) feststel-
len, welcher Button
Activity „ButtonWithImageDemo“: geklickt wurde. (Alter-
nativ kann man mit
Schauen Sie sich (in Android Studio) an, wie man einen Button myButton.getId() die
mit Bild realisiert und wie sich das Bild bei einem Click auf den ID des Buttons abfragen
und so verschiedene
Button verändert. Buttons unterscheiden.)

• Klasse ImageButton Statt der Klasse Image-


Button kann man auch
die Klasse Button
• zeigt Bild an benutzen, um einen But-
ton mit Bild zu realisie-
• Methoden setImageResource() etc. ren. Das Bild weist man
dem Button über das
background-Attribut
Details zu Buttons: zu. Dieses Bild kann
sich (wie die Bei-
https://developer.android.com/guide/topics/ui/controls/button spielapplikation zeigt)
sogar dynamisch
ändern, wenn der But-
50 ton geklickt wird.

© Prof. C. Vogt, 2019


Checkboxen und Radiobuttons

Checkboxen:
• Auswahl beliebig vieler Elemente möglich
• Klasse CheckBox: für einzelne Checkbox

Radiobuttons in einer Gruppe:


• Auswahl genau eines Elements möglich
• Klasse RadioButton: für einzelnen Radiobutton
• Klasse RadioGroup: für Gruppe solcher Radiobuttons

Für beide: OnCheckedChangeListener Der Listener wird akti-


viert, wenn der Benutzer
eine Checkbox an- oder
• Listener für Zustandsänderungen abhakt bzw. einen ande-
ren Radiobutton aus-
wählt.
→ Beispielprogramm Android: Checkboxen und Radiobuttons

51
© Prof. C. Vogt, 2019
Togglebuttons und Switches

Togglebutton:
• kann „On“ oder „Off“ sein
• zeigt jeweils unterschiedlichen Text an
• Klasse ToggleButton

auch hier: OnCheckedChangeListener


• Listener für Zustandsänderungen

→ Beispielprogramm Android: Togglebuttons

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“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschrift „Android: Checkboxen und
Radiobuttons“ sowie „Android: Togglebuttons“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

> Wozu dient der Parameter isChecked der Listener-


Methoden?

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“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschrift „Android: Seekbar“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

> Welche Listener-Methode reagiert auf Benutzereingaben in


der Seekbar und welche Methoden gibt es noch?

> Wie wird der Maximalwert einer Seekbar festgelegt?

55
© Prof. C. Vogt, 2019
Menus

Drei Arten von Menus: Permanente Action


Bars (App Bars) wur-
den eingeführt, als
• Optionsmenus / Action Bar (App Bar) Geräte ohne Menu But-
ton aufkamen.
• werden über die Menutaste aktiviert
Optionsmenus und
• oder erscheinen permanent oben im Display Kontextmenus werden
durch eine Benutzer-
• pro Activity / Bildschirmseite: ein Optionsmenu aktion sichtbar, d.h.
nach Drücken des Menu
Buttons bzw. eines
• Kontextmenus: Views, oder sind perma-
nent sichtbar. Ein
Popupmenu wird dage-
• werden durch Drücken von Views aktiviert gen durch eine Aktion
des Programms, näm-
• für verschiedene Views unterschiedliche Menus möglich lich den Aufruf der
Methode show(), ange-
zeigt.
• Popupmenus:
Während für jede Acti-
• seit Android 3.0 / API-Level 11 vity nur ein einziges
Optionsmenu definiert
• werden durch Aufruf von show() aktiviert werden kann, kann man
für die einzelnen ange-
zeigten Views unter-
• erscheinen nahe einem bestimmten View schiedliche Kontext-
und Popupmenus spezi-
• für verschiedene Views unterschiedliche Menus möglich fizieren.
56
© Prof. C. Vogt, 2019
> Führen Sie die Beispielapplikation „MenusAndroid“ aus, um
sich einen Eindruck aus Benutzersicht zu verschaffen. Tun Sie
dies nicht nur mit einem Emulator, sondern möglichst auch mit
einem realen Gerät.

> 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).

> Wechseln Sie von „Beta“ zur Ausgabe „Gamma“. Pressen


Sie dort auf die Grafik mit dem griechischen Buchstaben, bis
ein Menu erscheint, und wählen Sie dann einen der Menu-
Punkte.

> Kehren Sie zu „Gamma“ zurück, drücken Sie den Button


„PopupMenu zeigen“ und wählen Sie wieder einen Menu-
Punkt.

57
© Prof. C. Vogt, 2019
Definition von Menus

Menus sind Ressourcen:


• XML-Dateien in res/menu
• pro Menu-Punkt: ein <item>-Element Bei der Definition von
Menu-Ressourcen wird
• <menu ... > nur festgelegt, welche
Items das Menu enthal-
<item android:id="@+id/item01" ten soll. Es wird hier
nicht zwischen Options-
android:title="My item 01" /> , Kontext- und Popup-
menus unterschieden.
<item android:id="@+id/item02" Alle drei Arten von
Menus können also auf
android:title="My item 02" /> dieselbe Ressource
zugreifen und damit
... auch dieselbe Liste von
</menu> Auswahlitems anzeigen
(siehe dazu die Bei-
spielapplikation).
→ Beispielprogramm Android: Menus

> Schauen Sie sich (im kommentierten Quellcode-Auszug und in


Android Studio) an, wo und wie der Aufbau der Menus mit
ihren Items festgelegt wird.

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.

• zur Aktualisierung des Menus onOptionsItemSelec-


ted() ist eine Callback-
Methode, die aufgerufen
wird, wenn der Benutzer
Bei Auswahl eines Menupunkts menuitem: im Menu oder der
Action Bar eine Aus-
• Ausführung von onOptionsItemSelected(menuitem) wahl getroffen hat.
Insgesamt sieht man,
• zur Reaktion auf die Benutzerauswahl dass Android für Action
Bars kein neues Kon-
zept eingeführt, son-
Alle Methoden: definiert in der Klasse Activity dern die für Menus defi-
nerten Methoden über-
59 nommen hat.

© Prof. C. Vogt, 2019


Kontextmenus Wird ein View gedrückt,
so erscheint im Normal-
fall kein Menu. Wird dies
Registrierung eines Views für ein Kontextmenu: gewünscht, so muss
der View explizit durch

• 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.

• Ausführung von onContextItemSelected(menuitem) onContextItemSelec-


ted() ist eine Callback-
Methode entsprechend
Alle Methoden: definiert in der Klasse Activity onOptionsItemSelec-
ted().
60
© Prof. C. Vogt, 2019
Popupmenus Ein Popupmenu wird
auf dem Display wie ein
Kontextmenu angezeigt.
Seit Android 3.0 / API-Level 11 Es erscheint allerdings
nicht als Reaktion auf
eine Aktion des Benut-
Ein Popupmenu zers, sondern wenn im
Programmcode die
Methode show() aufge-
• ist einem View zugeordnet rufen wird.

• wird nahe bei diesem View angezeigt


• erscheint bei Aufruf der Menu-Methode show()

Zur Vorgehensweise siehe:

https://developer.android.com/
guide/topics/ui/menus.html#PopupMenu

und Dokumentation der Klassen:


• PopupMenu
• MenuInflater
• OnMenuItemClickListener
61
© Prof. C. Vogt, 2019
> Vollziehen Sie anhand der Beispielapplikation
„MenusAndroid“ die Erklärungen der vorangehenden Folien
nach (kommentierte Quellcode-Auszüge und vollständige
Quellcodes in Android Studio).

> Warum erscheint in „Gamma“ ein Kontextmenu, wenn Sie die


Grafik pressen, aber kein Menu, wenn Sie den TextView
oberhalb der Grafik pressen?

> Beachten Sie auch (in menu_alpha.xml) den Kommentar zur


Verwendung von Icons in der Action Bar. Probieren Sie es
aus. Icons finden Sie, wie bereits gesagt, unter https://
material.io/icons/

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

„Adding the App Bar“:


https://developer.android.com/training/appbar/

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

• zur Darstellung von Daten aus einer Datenquelle


Ein Beispiel für die
• Array, Dateiverzeichnis, Dateiinhalt, Datenbank, ... Daten, die in einem
AdapterView angezeigt
werden: Liste der
• also nicht aus statischen Ressourcen-Definitionen Namen der Dateien, die
aktuell in einem
bestimmten Verzeich-
Adapter zwischen Datenquelle und AdapterView: nis stehen.

• 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.

• implementieren vorgegebene Interfaces


• werden bei AdapterViews registriert
• reagieren auf Interaktion des Benutzers mit Items

Namen von Listener-Interface und -Methode wird aktiv bei ...


AdapterView.OnItemClickListener Anklicken
→ onItemClick()
AdapterView.OnItemLongClickListener längerem Drücken
→ onItemLongClick()
AdapterView.OnItemSelectedListener Auswahl eines
→ onItemSelected() Datenelements
→ onNothingSelected()

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.

© Prof. C. Vogt, 2019


> Beispielapplikation „SelectionsAndroid“, Activities
„ListActivityDemo“, „ListViewDemo“, „SpinnerDemo“,
„GalleryDemo“, „StackViewDemo“, „GridViewDemo“:

> Führen Sie die Activities aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkte „ListActivity“,
„ListView“, „Spinner“, „Gallery“, „StackView“, „GridView“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschriften „Android: ListActivity“,
„Spinner“, „Gallery“, „GridView“).

> Stellen Sie (unter dem Auswahlpunkt „ListView“)


insbesondere fest, wie die Anzeige nach Änderungen in der
Datenquelle aktualisiert wird.

> Vergleichen Sie „ListActivityDemo“ und „ListViewDemo“.


Was ist der allgemeine Unterschied?
Betrachten Sie dabei die Körper der onCreate()-Methoden:
Welchen Aufruf sehen Sie in „ListViewDemo“, der in
69
© Prof. C. Vogt, 2019
„ListActivityDemo“ fehlt? Warum kann „ListActivityDemo“
darauf verzichten?

70
© Prof. C. Vogt, 2019
ListView und Navigation Drawer

ListViews: auch mit Navigation Drawers


• Auswahllisten, die man von der Seite
in die Oberfläche ziehen kann

Lehrvideo und weitere Details:


• http://www.nt.th-koeln.de/
vogt/vma/videos.html
• https://developer.android.com/
training/implementing-navigation/nav-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

Nachrichten an den Benutzer ohne Benutzerreaktion,


ohne Fokus:
Der Benutzer kann
• Toast: kurze Nachricht ohne Benutzerreaktion keine Eingaben machen
und auch sonst nicht
• erscheint als kleines Fenster ohne Fokus mit dem Fenster intera-
gieren. Das Fenster ver-
schwindet nach einer
• Notification: Nachricht mit Benutzerreaktion bestimmten Zeit von
selbst wieder.
• erscheint in der Status Bar / Notification Area
Die Status Bar mit den
• Dialog: Nachricht mit Benutzerreaktion Notifications wird oben
im Display angezeigt.
• erscheint als Fenster mit Fokus Der Benutzer kann die
hier angezeigten Nach-
richten anklicken.
• Alert Dialog, Progress Dialog,
Date Picker Dialog, Time Picker Dialog Dialog mit Benutzerre-
aktion /mit Fokus:
Der Benutzer kann mit
Darüber hinaus: allgemeine Popup-Fenster dem Fenster interagie-
ren, also Eingaben
machen.

Details, insbesondere
auch zu Alert-Dialogen
etc., folgen auf den
nächsten Folien.
73
© Prof. C. Vogt, 2019
Toasts

Klasse android.widget.Toast

Kurzzeitige Anzeige einer Information in eigenem Fenster


• Aufruf aus Activity oder Service heraus
• Activity behält dabei den Fokus
keine Interaktion:
• keine Interaktion möglich Der Benutzer kann
keine Eingaben
machen.
Verwendungsmöglichkeiten:
• Anzeige einfacher Texte:
• Toast.makeText(myActivity,ausgabetext,
Toast.LENGTH_LONG).show();
• Anzeige etwas komplexerer Layouts:
• mit myToast.setView(ViewGroup mit Layout)

→ Beispielprogramm Android: Toasts

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“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschrift „Android: Toasts“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

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.

• dynamisch generierbar dynamisch generier-


bar: Notification wer-
den aus dem Java-Code
• auch aus Service heraus heraus erzeugt und
angezeigt
Benutzer kann Notification anklicken auch aus Service her-
aus: Services haben
keine GUI wie Activities,
• dabei Auslösung eines Intents können also nicht über
das volle Display mit
dem Benutzer interagie-
Java-Klassen im Paket android.app: ren. Sie können aller-
dings Benutzer durch
• Notification: definiert Eigenschaften einer Notification Notifications benach-
richtigen.

• NotificationManager: verwaltet Notifications


Klickt der Benutzer eine
• Methode notify(): registriert Notification beim Manager Notification an, so wer-
den dadurch ein Intent
→ Manager zeigt sie an und damit Aktionen der
Applikation ausgelöst.

→ Beispielprogramm Android: Status Bar Notifications


76
© Prof. C. Vogt, 2019
> Beispielapplikation „NotifDialogsAndroid“,
Activity „StatusBarDemo“:

> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Status Bar
Notification“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschrift „Android: Status Bar
Notifications“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

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.

Basisklasse android.app.Dialog mit Unterklassen


• AlertDialog: allgemeiner Ein-/Ausgabedialog Mit den drei Standard-
Buttons können Benut-
• Titel, Text zerreaktionen wie „Ja”,
„Nein”, „Cancel” abge-
fragt werden. Diese But-
• max. 3 Buttons: positiv, negativ, neutral tons können angezeigt
werden, müssen es aber
• Radiobuttons, Checkboxen nicht. Der Programmie-
rer spart sich damit die
Arbeit am Layout.
• aber auch frei gestaltetes Layout möglich
Darüber hinaus kann
der Programmierer mit
• ProgressDialog: Fortschrittsanzeige Radio- und Checkbut-
tons arbeiten, und er
• DatePickerDialog: Datumseingabe kann das Layout seiner
Dialoge auch völlig frei
gestalten.
• TimePickerDialog: Zeiteingabe
78
© Prof. C. Vogt, 2019
Alert Dialog Die Klasse Activity
sieht vier Methoden für
Alert-Dialoge vor:
Activity-Methoden: • Der Programmierer
programmiert die Call-
• onCreateDialog(): Erzeugung eines Dialogs back-Methode
onCreateDialog()
aus, um das Aussehen
• onPrepareDialog(): Aktualisierung eines Dialogs von Dialog-Fenstern
festzulegen. Das Lauf-
• showDialog(): Anzeige eines Dialogs zeitsystem ruft die
Methode auf, wenn ein
Dialog erzeugt wer-
• dismissDialog(): Löschen der Anzeige eines Dialogs den soll. Dabei wird
eine ganzzahlige ID für
den zu zeigenden Dia-
showDialog(dialogID,Bundle): log übergeben.
Zusätzlich kann man
• ruft onCreateDialog(dialogID,Bundle) auf onPrepareDialog()
ausprogrammieren.

• 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.

• zeigt Dialog an • dismissDialog()


79 lässt einen Dialog ver-
schwinden.
© Prof. C. Vogt, 2019
Alert Dialog (Forts.)

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()

• Rückgabe des Dialogs per return

→ Beispielprogramm Android: Alert Dialog

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“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschrift „Android: Alert Dialog“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

> Wo wird das Aussehen eines Dialogs definiert?

> Wodurch wird ermöglicht, dass verschiedene Dialoge


definiert und angezeigt werden können?

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

DatePicker Dialog: Eingabe eines Datums


• Klasse android.app.DatePickerDialog

TimePicker Dialog: Eingabe einer Uhrzeit


• Klasse android.app.TimePickerDialog

→ Beispielprogramm Android: Date and Time Picker 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“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschriften „Android: Progress Dialog“
und „Android: Date and Time Picker Dialog“).

> Schauen Sie sich die Quellcodes in Android Studio an.

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

OnDismissListener: Ein OnDismissListener,


der bei einem Popup-
Window registriert ist,
• Klasse PopupWindow.OnDismissListener wird aktiv, wenn das
Fenster gelöscht wird.
• Activity kann Listener bei PopupWindow registrieren In diesem Listener kann
der Programmierer die
Aktionen ausprogram-
• Beim Löschen des Fensters: mieren, die dann
geschehen sollen.
Aufruf der Listener-Methode onDismiss()
Für das PopupWindow,
das im Screenshot auf
• Activity kann dort z.B. der vorigen Folie
gezeigt wird, kann bei-
eine Eingabe aus dem Fenster übernehmen spielsweise der einge-
gebene Name in einer
Variablen der Activity
→ Beispielprogramm Android: Popup Window gespeichert oder dort
dem Benutzer angezeigt
werden (siehe die näch-
ste Beispielapplikation).

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“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschrift „Android: Popup Window“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

86
© Prof. C. Vogt, 2019
Webseiten mit weiteren Informationen

„Notifications“: Einen Effekt wie mit Dia-


logen kann man durch
https://developer.android.com/ Activities erzielen,
deren Anzeige nicht das
guide/topics/ui/notifiers/notifications gesamte Display füllen,
so dass die darunterlie-
gende Activity sichtbar
„Dialogs“: bleibt – siehe hierzu das
Programmbeispiel
https://developer.android.com/guide/topics/ui/dialogs ActivitiesUeberlagert-
Android aus Kapitel 3.

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 Berührungen“: Berühren Sie das Display und


lassen Sie es wieder los – entweder an derselben Stelle oder
nach Verschieben des Fingers.

> „Multitouch“: Setzen Sie vier bis fünf Finger nacheinander


auf das Display.

> „Einfache Gesten“: Ziehen Sie das Icon mit dem Finger über
den Bildschirm. Drücken Sie etwas länger auf das stehende
Icon.

> „Skalierung“: Machen Sie eine Skalierungsgeste, d.h. ziehen


Sie auf dem Display zwei Finger auseinander und schieben
Sie sie wieder zusammen.

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.

• „Art” bezieht sich auf Ablauf einer Geste → nächste Folie

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:

> kommentierte Quellcode-Auszüge:


Überschrift „Android: Einfache Berührungen“.

> Android Studio: Activity „SingleTouch“.

> Was macht hier die Methode onTouchEvent() und was macht
die Methode onDraw()?

> Vollziehen Sie nach, dass sich die Berührungsereignisse auf


einzelne Views, also nicht auf das Display als Ganzes
beziehen.

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):

> kommentierte Quellcode-Auszüge:


Überschrift „Android: Berührungen mit mehreren Pointern“.

> Android Studio: Activity „Multitouch“.

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.

• Listener muss zuvor beim Detector registriert worden sein


100
© Prof. C. Vogt, 2019
Gesten: Das Gesamtbild Die Grafik zeigt die
Erkennung von Gesten
und die Reaktion dar-
Behandlung von Gesten also: auf:
• Das Laufzeitsystem
meldet automatisch
jeden Event, indem es
MotionEvent onTouchEvent() des
aut betroffenen Views auf-
MotionEvent
ruft.

View • Aus onTouchEvent()


des Views wird
onTouchEvent() des
onTouchEvent() GestureDetectors auf-
gerufen. Der Motion-
Event-Parameter der
prog Nachricht an GestureDetector View-Methode wird
dabei weitergereicht.
Der Aufruf muss expli-
GestureDetector zit im Körper der View-
Methode stehen!
onTouchEvent(): • Der Detector prüft
Prüfung, ob Geste (aut) automatisch, ob sich
aus dem gemeldeten
Event zusammen mit
aut Listener-Ruf, wenn Geste den vorherigen eine
aut = automatisch Geste ergibt.

prog = zu programmieren Listener • Wurde eine Geste


erkannt, so wird ein
onXXX(): zugehöriger Listener
aktiviert. Dieser Liste-
Reaktion (prog) ner muss vom Pro-
grammierer geschrie-
101 ben werden.
© Prof. C. Vogt, 2019
Vordefinierte Gesture Detectors

android.view.GestureDetector: Detektoren der Klasse


GestureDetector kön-
nen Gesten wie
• für Single-Touch-Events Wischen, langer Druck
und Doppelclick erken-
• zugehörige Listener-Klasse: nen. Sie rufen dann ent-
sprechende Listener-
GestureDetector.SimpleOnGestureListener Methoden der Klasse
SimpleOnGestureLi-
stener auf, sofern ein
• implementiert die Interfaces solcher Listener bei
ihnen registriert ist. Pro-
OnGestureListener und OnDoubleTapListener grammierer können
Unterklassen von Sim-
• Methoden onFling(), onLongPress(), onDoubleTap(), ... pleOnGestureListe-
ner schreiben, dort
einige oder alle Liste-
• Gesamtübersicht: https://developer.android.com/reference/ ner-Methoden über-
android/view/GestureDetector.SimpleOnGestureListener schreiben und somit
individuelle Reaktionen
• GestureDetector ruft diese Listener-Methoden auf, auf Gesten programmie-
ren.
wenn er die entsprechenden Gesten erkannt hat

→ Beispielprogramm Android: Einfache Gesten

102
© Prof. C. Vogt, 2019
> Vollziehen Sie anhand der Beispielapplikation
„TouchGesturesAndroid“ die Erklärungen der vorangehenden
Folien nach:

> kommentierte Quellcode-Auszüge:


Überschrift „Android: Einfache Gesten“.

> Android Studio: Activity „GesturesOhneScale“.

> Was machen also Gesture Detector und Gesture Listener


zusätzlich zu dem, was onTouchEvent() macht?

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()

→ Beispielprogramm Android: Skalierungsgesten

→ Beispiel auch: http://android-developers.blogspot.com/


2010/06/making-sense-of-multitouch.html

104
© Prof. C. Vogt, 2019
> Vollziehen Sie anhand der Beispielapplikation
„TouchGesturesAndroid“ die Erklärungen der vorangehenden
Folien nach:

> kommentierte Quellcode-Auszüge:


Überschrift „Android: Skalierungsgesten“.

> Android Studio: Activity „ScaleGestures“.

> Betrachten Sie das Lehrvideo zum Thema „Drag&Drop“:


http://youtu.be/l-5Px-7a_hE

105
© Prof. C. Vogt, 2019
Selbstdefinierte Gesten

Paket android.gesture Der Benutzer definiert


eine Geste, indem er
über eine spezielle App
• ermöglicht die Definition und Erkennung beliebiger Gesten eine Fingerbewegung
auf dem Display auf-
zeichnet und mit einem
Zur Vorgehensweise siehe z.B.: Namen versieht. Details
dazu findet man auf den
• http://androidresearch.wordpress.com/2012/01/10/ angegebenen Web-Sei-
ten.
working-with-gesture-api-in-android/ Eine Android-Applika-
tion kann dann eine sol-
• http://www.vogella.com/tutorials/AndroidGestures/article.html che Geste nach demsel-
ben Schema erkennen
und verarbeiten wie bei
vorgegebenen 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

2.) Objekte dieser Klasse erzeugen


• durch Konstruktor-Aufrufe

3.) Objekte auf der Oberfläche anzeigen


• durch setContentView()
• oder Einbettung in eine ViewGroup in der GUI

Weitere Details zur Definition von Views: Abschnitt 4.7

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.

• im Körper von onDraw():


Aufruf von c.drawRect(), c.drawOval(), c.drawLine(), ...
→ Beispielprogramm Android: Canvas

alternativ: Zeichnen mit Drawable-Objekten


• Klasse android.graphics.drawable.Drawable
• für Objekte, die gezeichnet werden können
• Objekte können „Shapes“ haben: Rechteck, Oval, ...
• im Körper von onDraw():
Aufruf von myDrawable.draw(c)
→ Beispielprogramm Android: Drawables

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“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschriften „Android: Canvas“ und
„Android: Drawables“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

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“:

> Führen Sie die drei entsprechenden Activities aus, um sich


einen Eindruck aus Benutzersicht zu verschaffen
(Auswahlpunkte „Frame Animation“, „View Animation“ und
„Property Animation“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschriften „Android: Frame Animation“,
„Android: View Animation“ und „Android: Property
Animation“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

> 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.

→ Beispielprogramm Android: Animation auf SurfaceView

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.

> Die Applikation sollte auch auf einem Emulator laufen


können. Allerdings gibt es dort manchmal Probleme mit der
grafischen Darstellung des SurfaceViews, wenn der Grafik-
Beschleuniger des Emulators nicht korrekt funktioniert.
Verwenden Sie dann eine anderen Emulator (z.B. von
Genymotion) oder ein reales Gerät.

118
© Prof. C. Vogt, 2019
Animationen mit SurfaceView

SurfaceView: Animiert wird also ein


Objekt der Klasse Sur-
faceView, dessen
• View, in dem eine Animation abläuft onDraw() wiederholt
von einem speziell dafür
• gesteuert durch einen dedizierten Thread programmierten Thread
aufgerufen wird und
dann die einzelnen Ani-
• also: Timing unter Kontrolle des Threads! mationsschritte zeich-
net.
• definiert die Methode onDraw() Timing unter Kontrolle
des Threads:
Die Zeitpunkte, zu
• enthält Zeichenoperationen auf einem Canvas denen die Animations-
schritte gezeichnet wer-
• legt also fest, was angezeigt werden soll den, werden durch den
Thread im Programm
bestimmt, nicht durch
• die Animationsschritte das Laufzeitsystem.

• wird durch den Thread aufgerufen Der animierende Thread


greift über einen Sur-
• besitzt einen SurfaceHolder face Holder auf den Sur-
face View zu.
• ermöglicht den Zugriff auf den SurfaceView
Die Erläuterungen auf
• wird durch SurfaceView-Methode getHolder() geliefert dieser und den folgen-
den Folgen lassen sich
am besten anhand der
Beispielapplikation
119 nachvollziehen.
© 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-

Starten des Animations-Threads


stroyed()).

120
© Prof. C. Vogt, 2019
Animationen mit SurfaceView

Animations-Thread Animations-Thread wird


gestartet, wenn der Sur-
faceView zum Zeichnen
• „rendert“ die Oberfläche bereit ist
= wenn das Laufzeit-
• wird gestartet, system seine Methode
surfaceCreated()auf-
wenn der SurfaceView zum Zeichnen bereit ist ruft. In den Körper von
surfaceCreated()
programmiert man also
• führt eine Endlosschleife mit den folgenden Schritten aus: einen Aufruf der
start()-Methode des
• Belegung eines Canvas, Animations-Threads
(siehe vorige Folie und
über den auf dem SurfaceView gezeichnet werden kann Beispiel-Applikation).
Die Endlosschleife dient
• Canvas c = surfaceHolder.lockCanvas() dazu, durch onDraw()-
Aufrufe die Animation
• Aufruf der Zeichenfunktion des SurfaceViews Bild für Bild zu zeich-
nen. Mit „neuer Surface-
View-Inhalt“ ist also das
• onDraw(c) jeweils nächste Bild der
Animation gemeint.
• Freigabe des Canvas Man beachte den Unter-
schied zu einem norma-
• Canvas c = surfaceHolder.unlockCanvasAndPost() len View: Dort ruft das
Laufzeitsystem
• damit Anzeige des neuen SurfaceView-Inhalts onDraw() auf, hier tut
es der Thread und kann
auf dem Display damit die Zeitpunkte
des Zeichnens kontrol-
121 lieren.
© Prof. C. Vogt, 2019
Also: Grundprinzip der Grafikausgabe mit SurfaceView Die Grafik zeigt, dass
die onDraw()-Methode
eines SurfaceView-
Applikation Objekts von einem
Thread aufgerufen wird,
Thread zur Steuerung der zur Applikation
der Animation gehört. Der zeitliche
Ablauf, in dem die grafi-
sche Darstellung aufge-
frischt wird, liegt damit
unter der Kontrolle der
Aufruf, wenn die Anzeige neu gezeichnet Applikation selbst und
werden soll. damit des Programmie-
rers.
Dabei Übergabe des Canvas, der von
surfaceHolder.lockCanvas() kam

SurfaceView:
onDraw(Canvas c) {
Zeichenoperationen
auf dem Canvas c
}

• vergleiche dazu Folie 108

122
© Prof. C. Vogt, 2019
> Vollziehen Sie anhand der Beispielapplikation
„GrafAnimMMAndroid“ die Erklärungen der vorangehenden
Folien nach:

> kommentierte Quellcode-Auszüge:


Überschrift „Android: Animation auf SurfaceView“.

> Android Studio:


Activity „Animation“, View „AnimationExampleView“.

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

Aufzeichnung und Wiedergabe von


• Standbildern
• Audio
• Video
android.hard-
Grundlegende Klassen: ware.Camera ist seit
API-Level 21 „depreca-
• android.media.MediaPlayer, ted” und wurde durch
das Paket
android.widget.MediaController android.hard-
ware.camera2 ersetzt.
zur Steuerung der Wiedergabe von Medien
• android.media.MediaRecorder:
zur Steuerung der Aufzeichnung von Medien
• android.hardware.Camera:
zum Zugriff auf die Kamera des Geräts
• android.widget.VideoView: zur Anzeige von Videos

→ Beispielprogramm Android: Multimedia 126


© Prof. C. Vogt, 2019
> Beispielapplikation „GrafAnimMMAndroid“,
Activity „Multimedia“:

> Führen Sie die Activity aus, um sich einen Eindruck aus
Benutzersicht zu verschaffen (Auswahlpunkt „Multimedia“).

> Arbeiten Sie die entsprechenden kommentierten Quellcode-


Auszüge durch (Überschrift „Android: Multimedia“).

> Schauen Sie sich die Quellcodes in Android Studio an und


experimentieren Sie ein wenig damit.

127
© Prof. C. Vogt, 2019
Webseiten mit weiteren Informationen

„Audio & Video“:


https://developer.android.com/guide/topics/media/

„Drawables overview“:
https://developer.android.com/guide/topics/graphics/drawables

„Images and graphics“:


https://developer.android.com/guide/topics/graphics/

„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.

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

129
© Prof. C. Vogt, 2019
Weitere GUI-Elemente

WebView: View zur Anzeige von Web-Seiten In einem WebView kann


eine Web-Seite ähnlich
wie in einem Browser
• Klasse android.webkit.WebView grafisch angezeigt wer-
den.
• Details:
• Kapitel 7
• https://developer.android.com/guide/webapps/webview

MapView: View zur Anzeige von Landkarten


• Paket com.google.android.gms.maps
mit Klasse MapFragment
• Details:
• Kapitel 8
• https://developers.google.com/
maps/documentation/android-sdk/intro

130
© Prof. C. Vogt, 2019
Bildschirm und Tastatur

Zugriff auf Display-Eigenschaften über den Window Manager


liefert aktuelles Display:
• getWindowManager().getDefaultDisplay() als Objekt der Klasse
Display
liefert aktuelles Display
• getWindowManager() ist eine Activity-Methode
• Klasse Display mit Methoden wie:
• getSize() (, getWidth(), getHeight()) Mit diesen Display-
Methoden kann man
Eigenschaften des aktu-
• getRotation() (, getOrientation()) ellen Displays abfragen.

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:

• TextView, EditText, Button, ... • Einbettung in ein XML-


definiertes Layout;
dabei Verwendung von
Programmierer können zudem eigene Views definieren Attributen, die für
diese View-Klasse
definiert wurde.
• können sie dann in XML-Layouts aufnehmen, • Anzeige innerhalb
eines Layouts auf dem
• innerhalb dieser Layouts an der GUI anzeigen Display.
• Reaktion auf GUI-
• und auf ihre Attribute zugreifen Ereignisse bzgl. des
Views, z.B. in der Call-
back-Methode
→ Benutzung wie vordefinierte Views onTouchEvent() bei
einer Berührung.

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.

• XML-Attribute für MyView festlegen Mit XML-Attributen, die


auf diese Weise defi-
• in /res/values/attrs.xml niert werden, geht man
so um wie mit den vor-
• z.B. definierten Attributen
der vordefinierten
<declare-styleable name="MyViewAttrs"> Views. Man weist ihnen
in einer XML-Layout-
<attr name="text" format="string" Definition Werte zu und
greift aus Java-Code mit
<attr name="color" format="integer" ...> get()-Methoden dar-
auf zu. Insbesondere
nutzt die onDraw()-
Methode, die den View
auf das Display zeich-
net, diese Werte.
Die Beispiel-Definition
von MyViewAttrs spe-
zifiziert die Attribute
(anzuzeigender Text,
Farbe) für die View-
Unterklasse MyView, die
auf der folgenden Folie
definiert wird.

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.

• definiert, wie MyView auf dem Display gezeichnet wird


Das Laufzeitsystem ruft
• greift dazu auf die geladenen Werte zu onDraw() auf, um das
View-Objekt auf dem
• mit Methode onMeasure(...) Display zu zeichnen.
Dabei wird mit onMea-
sure() die Größe der
• berechnet, wie groß der View auf dem Display erscheinen soll Darstellung berechnet.
onMeasure() trifft Fall-
• ggf. mit weiteren Methoden unterscheidungen
danach, ob im Layout
eine feste Höhe und
• z.B. onTouchEvent() Breite angegeben ist
oder die Ausdehnung
Weitere Details: durch match_parent
(früher: fill_parent)
https://developer.android.com/ oder wrap_content
spezifiziert ist.
training/custom-views/create-view 134
© Prof. C. Vogt, 2019
> Beispielapplikation „SelfDefinedView“

> Führen Sie die Applikation aus und betrachten Sie ihre
Ausgabe. Drücken Sie auf den View, der unten im Display
dargestellt wird.

> Schauen Sie sich in Android Studio die Java-Quellcodes an.


Suchen Sie nach den Codestücken, die festlegen, wie Views
der hier definierten Typen „ZweiZeilenText“ und
„ThreeWaySwitch“ auf das Display gezeichnet werden.
Suchen Sie zudem nach der Methode, die auf das Drücken
auf den ThreeWaySwitch reagiert.

> 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.

> Stellen Sie die Layout-Datei activity_main.xml im Design-


Modus dar. Clicken Sie unter „Palette“ in der Rubrik
„Custom“ auf „CustomView“. Wählen Sie in dem Fenster, das
sich öffnet, „ThreeWaySwitch“ und klicken Sie „OK“. Sie 135
© Prof. C. Vogt, 2019
können nun einen neuen View dieses Typs mit der Maus in
der GUI platzieren. Tun Sie das und stellen Sie in der
Textansicht fest, dass der XML-Code nun ein entsprechendes
neues Element enthält.

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

Typische Struktur einer Applikation:


Oberflächen, durch die der Anwender navigiert

→ benötigt: Unterstützung bei der Programmierung

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.

• Spezifikation der Navigationsstruktur


• in XML
• Navigation bei der Ausführung
• durch Java-/Kotlin-Methoden
144
© Prof. C. Vogt, 2019
Navigation: Details Die Folien dieses Kur-
ses können den Naviga-
tion Editor und die
Anleitung zur Vorgehensweise: dahinterliegenden Kon-
zepte nicht im Einzelnen
darstellen, da dies den
• https://developer.android.com/ Umfang sprengen
würde. Detaillierte Infor-
topic/libraries/architecture/navigation mationen findet man
unter den angegebenen
Links.
Dokumentation des Navigation-Pakets:
Insbesondere zu emp-
fehlen ist das zweite
• https://developer.android.com/reference/ Video. Es zeigt „auf den
androidx/navigation/package-summary Punkt”, wie man mit
Android Studio die
Navigation durch die
Videos: Oberflächen einer
Applikation program-
miert.
• https://www.youtube.com/watch?v=8GCXtCjtg40
• https://www.youtube.com/watch?v=GOpeBbfyb6s
• instruktive Schritt-für-Schritt-Erläuterung

→ Beispielprogramm Android: Navigation

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.

> Anhand des Videos


https://www.youtube.com/watch?v=GOpeBbfyb6s
können Sie nachvollziehen, wie die Navigation mit Buttons
programmiert wurd.

146
© Prof. C. Vogt, 2019

Das könnte Ihnen auch gefallen