Mobile App Development - Grafische Oberflächen 2 -

Transkript

1 Mobile App Development - Grafische Oberflächen 2 -

2 Inhalt Dimensionen Layouting Menüs Activities starten Übung

3 Dimensionen

4 Dimensionen Analog zu Strings und Farben können Dimensionen definiert werden Dimensionen sind Zahlen gefolgt von einer Einheit

5 Dimensionen Analog zu Strings und Farben können Dimensionen definiert werden Dimensionen sind Zahlen gefolgt von einer Einheit res/values/dimens.xml <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="testdim">35pt</dimen> <dimen name="testdim2">35dp</dimen> </resources>

6 Dimensionen Pixel (px) entsprechen den tatsächlichen Pixeln auf dem Endgerät Verwendung wird nicht empfohlen, da die Darstellung von der Pixeldichte des Endgerätes abhängt

7 Dimensionen Pixel (px) Beispiel <Button android:width="320px" /> 320 dpi 160 dpi

8 Dimensionen Pixel (px) Beispiel <Button android:width="320px" /> 320 dpi 160 dpi

9 Dimensionen Pixel (px) Beispiel <Button android:width="320px" /> 320 dpi 160 dpi

10 Dimensionen Pixel (px) Beispiel <Button android:width="320px" /> 320 dpi 160 dpi

11 Dimensionen Pixel (px) Beispiel <Button android:width="320px" /> 2,54 cm 320 dpi 160 dpi

12 Dimensionen Pixel (px) Beispiel <Button android:width="320px" /> 2,54 cm 320 dpi 160 dpi

13 Dimensionen Pixel (px) Beispiel <Button android:width="320px" /> 2,54 cm 5,08 cm 320 dpi 160 dpi

14 Dimensionen Density Independent Pixels (dp, dip) unabhängig von der Auflösung des Displays 1dp = 1px (bei 160dpi) 1px = 1dp * (Auflösung / 160)

15 Dimensionen Scale Independent Pixels (sp) das gleiche wie dp zusätzlich abhängig von der Schriftgröße- Einstellung des Benutzers

16 Dimensionen Pixeldichte-unabhängige Einheiten Point (pt) ein Point entspricht 1/72 Zoll Millimeter (mm) Inch (in)

17 Dimensionen Definition: Dimensionen werden analog zu Farben und Strings in einer Resourcen- Datei abgelegt (dimens.xml) Beispiel: <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="mytextsize">60sp</dimen> <dimen name="mywidth">25dp</dimen> <dimen name="myborder">16px</dimen> <dimen name="myfontsize">23pt</dimen> <dimen name="mymargin">5mm</dimen> <dimen name="myspace">17in</dimen> </resources>

18 Dimensionen Verwendung in XML res/values/dimens.xml <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="mytextsize">60sp</dimen> </resources> res/layout/myactivity.xml <LinearLayout xmlns:android="..." xmlns:tools="..." android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

19 Dimensionen Verwendung in XML res/values/dimens.xml <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="mytextsize">60sp</dimen> </resources> res/layout/myactivity.xml <LinearLayout xmlns:android="..." xmlns:tools="..." android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

20 Dimensionen Verwendung in XML res/values/dimens.xml <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="mytextsize">60sp</dimen> </resources> res/layout/myactivity.xml <LinearLayout xmlns:android="..." xmlns:tools="..." android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

21 Dimensionen programmatische Verwendung res/values/dimens.xml <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="mytextsize">60sp</dimen> </resources> public class MainActivity extends Activity public void oncreate(bundle savedinstancestate) {!! super.oncreate(savedinstancestate);!! setcontentview(r.layout.activity_main);!!!!!! float dim = getresources().getdimension(r.dimen.mytextsize);! }!... }

22 Dimensionen programmatische Verwendung res/values/dimens.xml <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="mytextsize">60sp</dimen> </resources> public class MainActivity extends Activity public void oncreate(bundle savedinstancestate) {!! super.oncreate(savedinstancestate);!! setcontentview(r.layout.activity_main);!!!!!! float dim = getresources().getdimension(r.dimen.mytextsize);! }!... }

23 Dimensionen programmatische Verwendung res/values/dimens.xml <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="mytextsize">60sp</dimen> </resources> public class MainActivity extends Activity public void oncreate(bundle savedinstancestate) {!! super.oncreate(savedinstancestate);!! setcontentview(r.layout.activity_main);!!!!!! float dim = getresources().getdimension(r.dimen.mytextsize);! }!... }

24 Layou6ng

25 Layou6ng Problemstellung verschiedene Display-Größen verschiedene Auflösungen verschiedene Orientierungen

26 Layou6ng Beispiel Orientierung

27 Layou6ng Beispiel Orientierung Was fällt auf??

28 Layou6ng Wie wäre es mit verschiedenen Layouts?

29 Layou6ng Und was ist mit Display-... Auflösung Größe Format Bildquelle:

30 Layou6ng Android ermöglicht die Erstellung von Layouts für verschiedene Display- Konfigurationen Unterscheidbare Eigenschaften Größe Orientierung Pixeldichte

31 Layou6ng Mögliche Displaygrößen klein (ca. 2-3,5 Zoll) normal (3,2-4 Zoll) groß (4-7 Zoll) sehr groß (7-10 Zoll) Bildquelle:

32 Layou6ng Definition von Layouts für verschiedene Display-Größen Je Display-Größe wird ein Layout-Ordner angelegt layout-small layout-normal layout-large layout-xlarge

33 Layou6ng Das Layout kann für die verschiedenen Größen verschieden definiert werden Achtung: Die Layout-Datei muss in jedem Ordner den gleichen Name haben

34 Layou6ng Es kann, muss aber nicht, für jede Größe eine Layout-Datei angelegt werden Android wählt bei Fehlen eines Layouts für eine bestimmte Größe ein anderes aus

35 Layou6ng Wie werden die verschiedenen Layouts der Activity zugewiesen?

36 Layou6ng Wie werden die verschiedenen Layouts der Activity zugewiesen? public class MainActivity extends Activity public void oncreate(bundle savedinstancestate) {!! super.oncreate(savedinstancestate);! } /*... alles bleibt beim alten Android entscheidet */ setcontentview(r.layout.activity_main);!... }

37 Layou6ng Ist es möglich in der einen Layout- Definition andere Views zu definieren, als in einer anderen?

38 Layou6ng Name Vorname Name Vorname Straße Hausnummer

39 Layou6ng Ist es möglich in der einen Layout- Definition andere Views zu definieren, als in einer anderen? Name Vorname Name Vorname Straße Hausnummer

40 Layou6ng

41 Layou6ng Ist es möglich in der einen Layout- Definition andere Views zu definieren, als in einer anderen? Ja, es ist möglich! Es ist zu beachten, dass in der Activity dann Fallunterscheidungen vorgenommen werden müssen

42 Layou6ng Fallunterscheidung Display-Größe Configuration conf = getresources().getconfiguration(); switch (conf.screenlayout & Configuration.SCREENLAYOUT_SIZE_MASK) {! case Configuration.SCREENLAYOUT_SIZE_SMALL: { /* do your small stuff */!!!! break;! }! case Configuration.SCREENLAYOUT_SIZE_NORMAL: {! /* do your normal stuff */!!!! break;! }! case Configuration.SCREENLAYOUT_SIZE_LARGE: {! /* do your large stuff */!!! break;! }! default : {! /* do your unknown stuff */!!!! break;! } }

43 Layou6ng Display-Größe ab Android 3.2 Problem: generalisierte Größenklassen führen zu Problemen 5 und 7 würden in gleiche Klasse fallen

44 Layou6ng Ab Android 3.2 werden neue Qualifier für die Display-Größe verwendet smallestwidth screenwidth screenheight Sie geben die minimale Breite/Höhe an, die für das Layout benötigt wird

45 Layou6ng smallestwidth gibt die minimale Breite bzw. Höhe in dp an, die das Layout benötigt unabhängig von der Orientierung, d.h. es wird sowohl in horizontaler als auch vertikaler Orientierung diese Breite/ Höhe benötigt

46 Layou6ng smallestwidth Layout Anlegen eines Ordners layout-sw<n>dp <N> steht für die minimal Größe in dp, die horizontal und vertikal benötigt wird (hier: 320dp)

47 Layou6ng screen width gibt die minimale Breite an, die das Layout benötigt abhängig von der Orientierung, da sich die Breite ändert, wenn das Gerät gedreht wird

48 Layou6ng screen width Layout Anlegen eines Ordners layout-w<n>dp <N> steht für die minimale Breite in dp, die benötigt wird (hier: 240dp)

49 Layou6ng screen height gibt die minimale Höhe an, die das Layout benötigt abhängig von der Orientierung, da sich die Höhe ändert, wenn das Gerät gedreht wird

50 Layou6ng screen height Layout Anlegen eines Ordners layout-h<n>dp <N> steht für die minimale Höhe in dp, die benötigt wird (hier: 480dp)

51 Layou6ng Orientierung Android unterscheidet 2 Qualifier Portrait (port) Landscape (land)

52 Layou6ng Layouts für Orientierungen anlegen gleiches Vorgehen wie bei Display-Größen je Orientierung wird ein Ordner angelegt für jede Orientierung wird ein Layout angelegt

53 Layou6ng Fallunterscheidung Orientierung Configuration conf = getresources().getconfiguration(); switch (conf.orientation) {! case Configuration.ORIENTATION_PORTRAIT: {!! /* do your portrait stuff */!! Log.d("TAG", "orientation: portrait");!! break;! }! case Configuration.ORIENTATION_LANDSCAPE: {!! /* do your landscape stuff */!! Log.d("TAG", "orientation: landscape");!! break;! }! default : {!! Log.d("TAG", "orientation: unspecified");!! break;! } }

54 Layou6ng Layouts für verschiedene Auflösung Android unterscheidet 4 Qualifier ldpi, mdpi, hdpi, xhdpi Bildquelle:

55 Layou6ng Layouts für verschiedene Auflösungen definieren Analog zu Display-Größe und Orientierung werden Ordner für die einzelnen Auflösungen angelegt

56 Layou6ng Fallunterscheidung Auflösung /* create a DisplayMetrics object */ DisplayMetrics metrics = new DisplayMetrics(); /* requesting metrics from default display */ getwindowmanager().getdefaultdisplay().getmetrics(metrics); /* switch density */ switch (metrics.densitydpi) { case DisplayMetrics.DENSITY_LOW: { /* do your low stuff */ break;! }! case DisplayMetrics.DENSITY_MEDIUM: { /* do your medium stuff */ break; } case DisplayMetrics.DENSITY_HIGH: { /* do your high stuff */ break; } case DisplayMetrics.DENSITY_XHIGH: { /* do your extra high stuff */ break; } }

57 Layou6ng Wie definiert man ein Layout für einen small Screen mit mittlerer Auflösung?

58 Layou6ng Die Qualifier für Größe, Orientierung usw. können kombiniert werden Die Reihenfolge der Qualifier ist nicht beliebig! siehe dazu: resources/providingresources.html#qualifierrules

59 Layou6ng Neben Größe, Orientierung und Auflösung existieren noch weitere Qualifier Sprache/Region: de-rde, en-rus Aspect Ratio: long, not long Night mode: night, notnight weitere Qualifier unter: providing-resources.html#alternativeresources

60 Menüs

61 Menüs Menüs werden verwendet, um dem Benutzer Aktionen und Optionen in einem bestimmten Kontext anzuzeigen

62 Menüs Unterscheidung zwischen Optionsmenüs Kontextmenüs Popup-Menüs

63 Menu erstellen Anlegen einer neuen Menü XML Datei im Ordner res/menu

64 Menu erstellen Anlegen einer neuen Menü XML Datei im Ordner res/menu

65 Menüs erstellen das Menü erstellen <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="..." > <item <item <item android:checkable="true" </menu>

66 Menüs erstellen das Menü erstellen höchstens 6 Items dargestellt bei mehr Items weiteres Popup

67 Menüs erstellen Untermenüs <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="..." > <item <menu> <item <item </menu> </item>!... </menu>

68 Menüs erstellen Für jedes angelegte Menü wird ein gleichnamiger Eintrag in der R.java angelegt public final class R {... public static final class menu { public static final int activity_main=0x7f060000; public static final int second_menu=0x7f060001; }... }

69 Menüs erstellen Für jedes angelegte Menü wird ein gleichnamiger Eintrag in der R.java angelegt public final class R {... public static final class menu { public static final int activity_main=0x7f060000; public static final int second_menu=0x7f060001; }... }

70 Menüs erstellen Für jedes angelegte Menü wird ein gleichnamiger Eintrag in der R.java angelegt public final class R {... public static final class menu { public static final int activity_main=0x7f060000; public static final int second_menu=0x7f060001; }... }

71 Menüs erstellen Für jedes angelegte Menü wird ein gleichnamiger Eintrag in der R.java angelegt public final class R {... public static final class menu { public static final int activity_main=0x7f060000; public static final int second_menu=0x7f060001; }... }

72 Op6onsmenüs Verwendung als Optionsmenü Optionsmenüs werden verwendet, um dem Benutzer im Kontext der aktuellen Activity Optionen und Aktionen zu Verfügung zu stellen

73 Op6onsmenüs Menü als Optionsmenü verwenden public class MainActivity extends Activity public void oncreate(bundle savedinstancestate) {... } } /* wird von der Activity aufgerufen, um das Menü zu erstellen public boolean oncreateoptionsmenu(menu menu) { /* MenuInflater wird verwendet, um aus der XML Menü * Beschreibung Java Objekte zu erzeugen */ MenuInflater inflater = getmenuinflater(); /* Erstellen des Menüs aus der XML Ressource unter Angabe der * Menü ID */ inflater.inflate(r.menu.activity_main, menu); /* true gibt an, dass das Menü angezeigt werden soll */ return true; }

74 Op6onsmenüs Auf Menü-Klicks reagieren /* wird aufgerufen, wenn ein Menüeintrag ausgewählt wurde public boolean onoptionsitemselected(menuitem item) {! /* item.getitemid() gibt die ID des geklickten Menüeintrags zurück */! switch (item.getitemid()) {!! case R.id.menu_new_file: {!!! /* neue Datei erstellen */!!! return true;!! }!! case R.id.menu_new_folder: {!!! /* neuen Ordner erstellen */!!! return true;!! }!! default:!!! /* Oberklassen Implementierung bahandelt Klick */!!! return super.onoptionsitemselected(item);!! } }

75 Kontextmenüs Das Menü als Kontextmenü verwenden Kontextmenüs werden verwendet, um dem Benutzer im Kontext einer bestimmten View ein Menü zur Verfügung zu stellen

76 Kontextmenüs Das Menü als Kontextmenü verwenden public class MainActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); /* Referenz für die View holen, die das Kontextmenü bekommt */ TextView tv = (TextView) findviewbyid(r.id.mytextview); /* View für Kontextmenü registrieren */ registerforcontextmenu(tv); } /* wird aufgerufen, wenn das Kontextmenü erzeugt wird public void oncreatecontextmenu(contextmenu menu, View v,!! ContextMenuInfo menuinfo) { /* Inflater wird verwendet, um aus XML Java Objekte zu erzeugen */ MenuInflater inflater = getmenuinflater(); /* Erstellen des Menüs aus der XML Ressource unter Angabe der Menü ID */ inflater.inflate(r.menu.activity_main, menu); } }

77 Kontextmenüs Auf Klicks im Kontextmenü verwenden public class MainActivity extends Activity { public void oncreate(bundle savedinstancestate) { /* Kontextmenü registrieren */ } /* wird aufgerufen, wenn das Kontextmenü erzeugt wird */ public void oncreatecontextmenu(...) {! /* Kontextmenü erstellen */ } /* wird aufgerufen, wenn ein Kontextmenüeintrag ausgewählt wurde public boolean oncontextitemselected(menuitem item) {! /* item.getitemid() gibt die ID des geklickten Menüeintrags zurück */! switch (item.getitemid()) {!! case R.id.menu_new_file:!!! /* neue Datei erstellen */ return true;!! case R.id.menu_new_folder:!!! /* neuen Ordner erstellen */ return true;!! default:!!! /* Oberklassen behandelt Klick */!!! return super.oncontextitemselected(item);! } } }

78 Popup- Menüs Das Menü als Popup-Menü verwenden Popup-Menüs werden verwendet, um im Kontext einer Aktion weitere Optionen zur Verfügung zu stellen Popup-Menüs stehen ab API- Level 11 zur Verfügung

79 Popup- Menüs Das Menü als Popup-Menü verwenden Beispiel: Bei Drücken des Buttons soll ein Popup-Menü erscheinen

80 Popup- Menüs Das Menü als Popup-Menü verwenden <Button android:onclick="mypopupbuttonclick" /> public class MainActivity extends Activity { } /* Methode, die bei Button-Klick aufgerufen wird */ public void mypopupbuttonclick(view view) { /* Erzeugen eines neuen Popup-Menüs */ PopupMenu popup = new PopupMenu(this, view); /* menuinflater-referenz vom Popup holen */ MenuInflater inflater = popup.getmenuinflater(); /* Menü aus XML erstellen */ inflater.inflate(r.menu.activity_main, popup.getmenu()); /* Popup anzeigen */ popup.show(); }

81 Popup- Menüs Auf Klicks im Popup-Menü reagieren /* Methode, die bei Button-Klick aufgerufen wird */ public void mypopupbuttonclick(view view) { PopupMenu popup = new PopupMenu(this, view); MenuInflater inflater = popup.getmenuinflater(); inflater.inflate(r.menu.activity_main, popup.getmenu()); /* click listener für das Popup setzen */ popup.setonmenuitemclicklistener( new PopupMenu.OnMenuItemClickListener() {! /* wird aufgerufen, wenn ein Menüeintrag geklickt wurde public boolean onmenuitemclick(menuitem item) {!!!! /* switch über die MenuItem ID*/!!!! switch (item.getitemid()) {!!!!! case R.id.menu_new_file: /* todo */ return true;!!!!! case R.id.menu_new_folder: /* todo */ return true;!!!!! default: return false;!!!! }!!! } }); popup.show(); }

82 Ac6onBar

83 Ac6onBar seit Android 3.0 kein Hardware Menü- Button mehr notwendig Einführung der ActionBar API Level 11 + Theme.Holo

84 Ac6onBar Die ActionBar füllen gleiches Vorgehen, wie bei Optionsmenüs Erstellen einer Menu-Datei res/menu/my_menu.xml <menu xmlns:android=" > <item <item <item </menu>

85 Ac6onBar Die ActionBar füllen Das Menü aus XML erstellen public class MainActivity extends Activity public boolean oncreateoptionsmenu(menu menu) { /* Aus XML das Menü erstellen */ MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.activity_main, menu); /* super call */ return super.oncreateoptionsmenu(menu); }... }

86 Ac6onBar Auf ActionBar Klicks reagieren public class MainActivity extends Activity public boolean onoptionsitemselected(menuitem item) {! /* switch über die MenuItem ID */! switch (item.getitemid()) {!! case R.id.menu_new: {!!! /*... todo... */ return true;!! }!! case R.id.menu_delete: {!!! /*... todo... */ return true;!! }!! default: {!!! /* super Impl behandelt den Klick */!!! return super.onoptionsitemselected(item);!! }! } } }

87 Ac6onBar ActionBar Menü-Einträge anpassen showasaction gibt an, wie das Menüelment in der ActionBar angezeigt wird (API Level 11!) <menu xmlns:android=" > <item android:showasaction="always" /> </menu>

88 Ac6onBar ActionBar Menü-Einträge anpassen showasaction Werte always: Element wird immer angezeigt ifroom: Element wird nur angezeigt, wenn genügend Platz ist never: Element wird immer im Overflow angezeigt

89 Prak6kum

90 Prak6kum Übung 02: Erweiterung Taschenrechner Die Taschenrechner-App aus der letzten Übung soll erweitert werden. Über einen Menüeintrag Weitere sollen in einem Untermenü die zusätzlichen Rechenoperationen Sinus, Kosinus, Tangens und Quadratwurzel auswählbar sein. Außerdem soll die App für zwei verschiedene Layouts optimiert werden, zum einen für ein Smartphone (default Layout) und zum anderen für ein Tablet (ca ). Es ist darauf zu achten, dass auf dem Tablet mehr Platz zur Verfügung steht als auf einem Smartphone, sodass die o.g. zusätzlichen Rechenoperationen in der Tablet Version nicht über ein Menü zur Verfügung gestellt werden müssen, sondern direkt mit angezeigt werden können. Wie beim letzten Praktikum kann auch in dieser Übung die Bibliothek exp4j ( verwendet werden. Die Abgabe der Übung findet am Dienstag, den , statt.

91 Literatur I. Sven Haiges: Android Schnelleinstieg entwickler.press, 2011 II. Thomas Künneth: Android 3 - Apps entwickeln mit dem Android SDK Galileo Press, 2011 III. IV. Mark Murphy: The Busy Coders Guide To Android Development, 2013