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" /> 2,54 cm 5,08 cm 320 dpi 160 dpi

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

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

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

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

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

13 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);!! }!... }

14 Layou6ng

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

16 Layou6ng!!! Beispiel Orientierung

17 Layou6ng Beispiel Orientierung Was fällt auf??

18 Layou6ng! Wie wäre es mit verschiedenen Layouts?

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

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

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

22 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

23 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

24 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

25 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);!

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

27 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

28 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

29 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;!! }! }

30 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

31 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

32 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

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

34 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

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

36 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

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

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

39 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

40 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;!! }! }

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

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

43 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;! }! }

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

45 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

46 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

47 Menüs

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

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

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

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

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

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

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

55 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;! }!...! }

56 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

57 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;! }! }

58 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);!!! }! }

59 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

60 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);! }! }

61 Kontextmenüs Auf Klicks im Kontextmenü reagieren 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);!! }! }! }!

62 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

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

64 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();! }! }

65 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();! }

66 Ac6onBar

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

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

69 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);! }...! }

70 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);!!! }!! }! }! }

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

72 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

73 Prak6kum

74 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 Mittwoch, den , statt.

75 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