WS15-MADA-03-GUIs-2

Transcription

WS15-MADA-03-GUIs-2

MobileApp
Development
- Grafische Oberflächen 2 -
Inhalt
• Dimensionen
• Layouting
• Menüs
• Activities starten
• Übung
Mobile App Development
ChristophKarls
Dimensionen
Dimensionen
• Analog zu Strings und Farben können Dimensionen definiert werden
• Dimensionen sind Zahlen gefolgt von einer Einheit
ChristophKarls
Dimensionen
• Analog zu Strings und Farben können Dimensionen definiert werden
• Dimensionen sind Zahlen gefolgt von einer Einheit res/values/dimens.xml
<resources> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> </resources>
ChristophKarls
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
ChristophKarls
Dimensionen
• Pixel (px)
• Beispiel
<Button
android:id="@+id/Button01"
android:text="@string/mybutton"
android:width="320px" />
2,54 cm
5,08 cm
320 dpi
160 dpi
ChristophKarls
Dimensionen
• Density Independent Pixels (dp, dip)
• unabhängig von der Auflösung des
Displays
• 1dp = 1px (bei 160dpi)
• 1px = 1dp * (Auflösung / 160)
ChristophKarls
Dimensionen
• Scale Independent Pixels (sp)
• das gleiche wie dp
• zusätzlich abhängig von der
Schriftgröße-Einstellung des Benutzers
ChristophKarls
Dimensionen
• Pixeldichte-unabhängige Einheiten
• Point (pt)
• ein Point entspricht 1/72 Zoll
• Millimeter (mm)
• Inch (in)
ChristophKarls
Dimensionen
• Definition: Dimensionen werden analog
zu Farben und Strings in einer
Resourcen-Datei abgelegt (dimens.xml)
• Beispiel: <resources> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <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>
ChristophKarls
Dimensionen
• Verwendung in XML
res/values/dimens.xml
<resources> <dimen name="myTextSize">60sp</dimen> </resources>
res/layout/myactivity.xml
<RelativeLayout
… <TextView android:text="Hello World!" android:textSize="@dimen/myTextSize" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</RelativeLayout> Mobile App Development
ChristophKarls
Dimensionen
• programmatische Verwendung
res/values/dimens.xml
<resources> <dimen name="myTextSize">60sp</dimen> </resources>
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); float dim = getResources().getDimension(R.dimen.myFontSize); } }
ChristophKarls
Layou9ng
Layou9ng
• Problemstellung
• verschiedene Display-Größen
• verschiedene Auflösungen
• verschiedene Orientierungen
ChristophKarls
Layou9ng
• Beispiel Orientierung
ChristophKarls
Layou9ng
• Beispiel Orientierung
• Was fällt auf ??
ChristophKarls
Layou9ng
• Wie wäre es mit verschiedenen Layouts?
ChristophKarls
Layou9ng
• Und was ist mit Display- ...
• Auflösung
• Größe
• Format
Bildquelle: http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources
ChristophKarls
Layou9ng
• Android ermöglicht die Erstellung von
Layouts für verschiedene DisplayKonfigurationen
• Unterscheidbare Eigenschaften
• Größe
• Orientierung
• Pixeldichte
ChristophKarls
Layou9ng
• 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: http://developer.android.com/guide/practices/screens_support.html
ChristophKarls
Layou9ng
• 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
ChristophKarls
Layou9ng
• Das Layout kann für die verschiedenen Größen verschieden definiert werden
• Achtung: Die Layout-Datei muss in jedem Ordner den gleichen Name haben
ChristophKarls
Layou9ng
• 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
ChristophKarls
Layou9ng
• Wie werden die verschiedenen Layouts der Activity zugewiesen?
public class MainActivity extends Activity {
... @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); /* ... alles bleibt beim alten Android entscheidet
*/
setContentView(R.layout.activity_main);
}
...
}
ChristophKarls
Layou9ng
• Ist es möglich in der einen Layout-
Definition andere Views zu definieren, als
in einer anderen?
ChristophKarls
Layou9ng
in einer anderen?
Name
Vorname
Name
Straße
Vorname
Hausnummer
ChristophKarls
Layou9ng
in einer anderen?
• Ja, es ist möglich!
• Es ist zu beachten, dass in der Activity
dann Fallunterscheidungen
vorgenommen werden müssen
ChristophKarls
Layou9ng
• 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; } }
ChristophKarls
Layou9ng
• Display-Größe ab Android 3.2
• Problem: generalisierte Größenklassen
führen zu Problemen
• 5“ und 7“ würden in gleiche Klasse
fallen Mobile App Development
ChristophKarls
Layou9ng
• 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
ChristophKarls
Layou9ng
• 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
ChristophKarls
Layou9ng
• 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)
ChristophKarls
Layou9ng
• 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
ChristophKarls
Layou9ng
• screen width Layout
layout-w<N>dp
• <N> steht für die
minimale Breite in dp, die
benötigt wird (hier:
240dp)
ChristophKarls
Layou9ng
• 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
ChristophKarls
Layou9ng
• screen height Layout
layout-h<N>dp
• <N> steht für die
minimale Höhe in dp, die
benötigt wird (hier:
480dp)
ChristophKarls
Layou9ng
• Orientierung
• Android unterscheidet 2 Qualifier
• Portrait (port)
• Landscape (land)
ChristophKarls
Layou9ng
• 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
ChristophKarls
Layou9ng
• 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; } }
ChristophKarls
Layou9ng
• Layouts für verschiedene Auflösung
• Android unterscheidet 4 Qualifier
• ldpi, mdpi, hdpi, xhdpi Bildquelle: http://developer.android.com/guide/practices/screens_support.html
ChristophKarls
Layou9ng
• Layouts für verschiedene Auflösungen definieren
• Analog zu Display-Größe
und Orientierung werden
Ordner für die einzelnen
Auflösungen angelegt
ChristophKarls
Layou9ng
• 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; } }
ChristophKarls
Layou9ng
• Wie definiert man ein Layout für einen
small Screen mit mittlerer Auflösung?
ChristophKarls
Layou9ng
• Die Qualifier für Größe,
Orientierung usw. können
kombiniert werden
• Die Reihenfolge der Qualifier
ist nicht beliebig!
dazu: • siehe
http://developer.android.com/guide/
topics/resources/providingresources.html#QualifierRules
ChristophKarls
Layou9ng
• 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
Qualifier unter: • weitere
http://developer.android.com/guide/topics/resources/
providing-resources.html#AlternativeResources
ChristophKarls
Menüs
Menüs
Menüs werden verwendet, um dem Benutzer Aktionen und Optionen in einem bestimmten
Kontext anzuzeigen
ChristophKarls
Menüs
• Unterscheidung zwischen
Optionsmenüs
Kontextmenüs
ChristophKarls
Popup-Menüs
Menuerstellen
• Anlegen einer neuen Menü XML Datei im Ordner res/menu
ChristophKarls
Menuerstellen
• Anlegen einer neuen Menü XML Datei im
Ordner res/menu
ChristophKarls
Menüserstellen
• das Menü erstellen
<?xml version="1.0" encoding="utf-8"?> … <item android:id="@+id/menu_new" android:title="@string/yes"/> <item android:id="@+id/menu_edit" android:title="@string/we"/> <item android:id="@+id/menu_search" android:title="@string/can"/> </menu>
ChristophKarls
Menüserstellen
• Untermenüs
<menu … <item android:id="@+id/menu_new" android:title="@string/menu_new"> <menu> <item android:id="@+id/menu_file" android:title="@string/menu_file"> </item> <item android:id="@+id/menu_folder" android:title="@string/menu_folder"> </item> </menu> </item> <item android:id="@+id/menu_edit" android:title="@string/menu_edit"/> … </item>
ChristophKarls
Menüserstellen
• 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;
}
...
}
ChristophKarls
Op9onsmenüs
• Verwendung als
Optionsmenü
• Optionsmenüs werden
verwendet, um dem
Benutzer im Kontext der
aktuellen Activity
Optionen und Aktionen zu
Verfügung zu stellen
ChristophKarls
Op9onsmenüs
• Menü als Optionsmenü verwenden
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { …
} @Override public void onCreateContextMenu(
ContextMenu menu, View v, ContextMenu.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.menu_new, menu); }
… }
ChristophKarls
Op9onsmenüs
• Auf Menü-Klicks reagieren
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.menu_edit: { showToast("EDIT"); return true; } case R.id.menu_file: { showToast("FILE"); return true; } … } default: { } } return super.onOptionsItemSelected(item); }
ChristophKarls
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
ChristophKarls
Kontextmenüs
• Das Menü als Kontextmenü verwenden
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } TextView tv = (TextView) findViewById(R.id.tvHelloWorld); registerForContextMenu(tv); @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.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.menu_new, menu); }
ChristophKarls
Kontextmenüs
• Auf Klicks im Kontextmenü reagieren
@Override protected void onCreate(Bundle savedInstanceState) { /* Menü registrieren */ } @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { /* Menü erstellen */ }
@Override public boolean onContextItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.menu_edit: { showToast("EDIT"); return true; } case R.id.menu_file: { showToast("FILE"); return true; } … default: { } } return super.onContextItemSelected(item); }
ChristophKarls
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 APILevel 11 zur Verfügung
ChristophKarls
Popup-Menüs
• Das Menü als Popup-Menü verwenden <Button android:text="Can u pop up?" android:id="@+id/button" android:onClick="btnPopupClick" …/>
public void btnPopupClick(View view) { /* Erzeugen eines neuen Popup-Menüs */ PopupMenu popup = new PopupMenu(MainActivity.this, view); /* menuInflater-Referenz vom Popup holen */ MenuInflater inflater = popup.getMenuInflater(); /* Menü aus XML erstellen */ inflater.inflate(R.menu.menu_new,popup.getMenu()); /* Popup anzeigen */ popup.show(); }
ChristophKarls
Popup-Menüs
• Auf Klicks im Popup-Menü reagieren
public void btnPopupClick(View view) { /* Erzeugen eines neuen Popup-Menüs */ PopupMenu popup = new PopupMenu(MainActivity.this, view); /* menuInflater-Referenz vom Popup holen */ MenuInflater inflater = popup.getMenuInflater(); /* Menü aus XML erstellen */ inflater.inflate(R.menu.menu_new,popup.getMenu()); /* Popup anzeigen */ popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.menu_file: /* todo */ return true; case R.id.menu_edit: /* todo */ return true; default: return false; } } }); popup.show(); }
ChristophKarls
Ac9onBar
Hardware-BuEon?
• http://android-developers.blogspot.de/
2012/01/say-goodbye-to-menu-button.html
ChristophKarls
Ac9onBar
• seit Android 3.0 kein Hardware MenüButton mehr notwendig
• Einführung der ActionBar
• API Level 11 + Theme.Holo Mobile App Development
ChristophKarls
Ac9onBar
• Die ActionBar füllen
• gleiches Vorgehen, wie bei
Optionsmenüs
• Erstellen einer Menu-Datei
res/menu/
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_new" android:icon="@android:drawable/ic_input_add" android:title="@string/menu_new"/> <item android:id="@+id/menu_delete" android:icon="@android:drawable/ic_delete" android:title="@string/menu_delete"/> </menu>
ChristophKarls
Ac9onBar
• Die ActionBar füllen
• Das Menü aus XML erstellen
@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu;
// this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_actionbar, menu); return true; }
ChristophKarls
Ac9onBar
• Auf ActionBar Klicks reagieren
@Override 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: { return super.onOptionsItemSelected(item); } } }
ChristophKarls
Ac9onBar
• ActionBar Menü-Einträge anpassen
• showAsAction gibt an, wie das
Menüelment in der ActionBar angezeigt
wird (API Level 11 !)
<menu
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:title="@string/menu_new" android:id="@+id/menu_new" android:icon="@android:drawable/ic_input_add" app:showAsAction="always" />
… </menu>
ChristophKarls
Ac9onBar
• 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
ChristophKarls
Prak9kum
Prak9kum
Ü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. 7“ - 10“).
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 (http://
www.objecthunter.net/exp4j) verwendet werden.
ChristophKarls

WS15-MADA-03-GUIs-2

Transcription

Similar documents

Mobile App Development

Part 3 of 3