Mobile App Development

Transcription

- Grafische Oberflächen 2 -
Inhalt
• Dimensionen
• Layouting
• Menüs
• Activities starten
• Übung
Dimensionen
Dimensionen
• Analog zu Strings und Farben können Dimensionen definiert werden
• Dimensionen sind Zahlen gefolgt von einer Einheit
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>
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
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
Dimensionen
• Density Independent Pixels (dp, dip)
• unabhängig von der Auflösung des
Displays
• 1dp = 1px (bei 160dpi)
• 1px = 1dp * (Auflösung / 160)
Dimensionen
• Scale Independent Pixels (sp)
• das gleiche wie dp • zusätzlich abhängig von der SchriftgrößeEinstellung des Benutzers
Dimensionen
• Pixeldichte-unabhängige Einheiten
• Point (pt)
• ein Point entspricht 1/72 Zoll
• Millimeter (mm)
• Inch (in)
Dimensionen
• Definition: Dimensionen werden analog zu
Farben und Strings in einer ResourcenDatei 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>
Dimensionen
• Verwendung in XML
res/values/dimens.xml
<resources>!
</resources>!
res/layout/myactivity.xml
<LinearLayout xmlns:android="..."!
xmlns:tools="..."!
android:id="@+id/linearLayout"!
android:orientation="vertical" >!
!
!
<TextView!
android:id="@+id/textView1"!
android:layout_width="wrap_content"!
android:layout_height="wrap_content"!
android:text="@string/largeText"!
android:textSize="@dimen/myTextSize" />!
</LinearLayout>
Dimensionen
• programmatische Verwendung
res/values/dimens.xml
<resources>!
</resources>!
public class MainActivity extends Activity {!
! ... ! @Override!
! public void onCreate(Bundle savedInstanceState) {!
! ! super.onCreate(savedInstanceState);!
! ! setContentView(R.layout.activity_main);!
! ! !
! ! !
! ! float dim = getResources().getDimension(R.dimen.myTextSize);!
! } ! ... }
Layou6ng
Layou6ng
• Problemstellung
• verschiedene Display-Größen
• verschiedene Auflösungen
• verschiedene Orientierungen
Layou6ng
!
!
!
• Beispiel Orientierung
Layou6ng
• Beispiel Orientierung
• Was fällt auf ??
Layou6ng
!
• Wie wäre es mit verschiedenen Layouts?
Layou6ng
• Und was ist mit Display- ...
• Auflösung
• Größe
• Format
Bildquelle: http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources
Layou6ng
• Android ermöglicht die Erstellung von
Layouts für verschiedene DisplayKonfigurationen
• Unterscheidbare Eigenschaften
• Größe
• Orientierung
• Pixeldichte
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: http://developer.android.com/guide/practices/screens_support.html
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
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
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
Layou6ng
• Wie werden die verschiedenen Layouts der Activity zugewiesen?
!
... !
!
!
@Override!
public void onCreate(Bundle savedInstanceState) {!
! super.onCreate(savedInstanceState); /* ... alles bleibt beim alten Android entscheidet
*/!
setContentView(R.layout.activity_main);!
!
}!
!
}
...!
!
Layou6ng
• Ist es möglich in der einen Layout-
Definition andere Views zu definieren, als in
einer anderen?
Layou6ng
einer anderen?
Name
Vorname
Name
Straße
Vorname
Hausnummer
Layou6ng
einer anderen?
• Ja, es ist möglich!
• Es ist zu beachten, dass in der Activity
dann Fallunterscheidungen vorgenommen
werden müssen
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;!
}!
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 Mobile App Development
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
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
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)
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
Layou6ng
• screen width Layout
layout-w<N>dp • <N> steht für die minimale
Breite in dp, die benötigt
wird (hier: 240dp)
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
Layou6ng
• screen height Layout
layout-h<N>dp • <N> steht für die minimale
Höhe in dp, die benötigt
wird (hier: 480dp)
Layou6ng
• Orientierung
• Android unterscheidet 2 Qualifier • Portrait (port)
• Landscape (land)
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
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;!
! }!
}
Layou6ng
• Layouts für verschiedene Auflösung
• Android unterscheidet 4 Qualifier
• ldpi, mdpi, hdpi, xhdpi Bildquelle: http://developer.android.com/guide/practices/screens_support.html
Layou6ng
• Layouts für verschiedene Auflösungen definieren
• Analog zu Display-Größe und
Orientierung werden Ordner
für die einzelnen Auflösungen
angelegt
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;!
}!
}
Layou6ng
• Wie definiert man ein Layout für einen
small Screen mit mittlerer Auflösung?
Layou6ng
• 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
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
Qualifier unter: • weitere
http://developer.android.com/guide/topics/resources/
providing-resources.html#AlternativeResources
Menüs
Menüs
Menüs werden verwendet, um dem Benutzer Aktionen und Optionen in einem bestimmten
Kontext anzuzeigen
Menüs
• Unterscheidung zwischen
Optionsmenüs
Kontextmenüs
Popup-Menüs
Menu erstellen
!
• Anlegen einer neuen Menü XML Datei im Ordner res/menu
Menu erstellen
• Anlegen einer neuen Menü XML Datei im
Ordner res/menu
Menüs erstellen
• das Menü erstellen
<menu xmlns:android="..." >!
!
!
<item!
android:id="@+id/menu_new"!
android:icon="@android:drawable/ic_menu_add"!
android:title="@string/menu_new"/>!
<item!
android:id="@+id/menu_edit"!
android:icon="@android:drawable/ic_menu_edit"!
android:title="@string/menu_edit"/>!
<item!
android:id="@+id/menu_search"!
android:checkable="true"!
android:icon="@android:drawable/ic_menu_search"!
android:title="@string/menu_search"/>!
</menu>
Menüs erstellen
• das Menü erstellen
• höchstens 6 Items dargestellt
• bei mehr Items weiteres Popup
Menüs erstellen
• Untermenüs
<menu xmlns:android="..." >!
!
<item!
android:icon="@android:drawable/ic_menu_add"!
android:title="@string/menu_new">!
<menu>!
<item!
android:id="@+id/menu_file"!
android:title="@string/menu_file"/>!
<item!
android:id="@+id/menu_folder"!
android:title="@string/menu_folder"/>!
</menu>!
</item>!
! ... </menu>
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;!
}!
...!
}
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
Op6onsmenüs
• Menü als Optionsmenü verwenden
!
!
@Override!
...!
}!
/* wird von der Activity aufgerufen, um das Menü zu erstellen */!
@Override!
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;!
}!
}
Op6onsmenüs
• Auf Menü-Klicks reagieren
!
!
!
!
!
!
!
!
!
!
!
!
/* wird aufgerufen, wenn ein Menüeintrag ausgewählt wurde */!
@Override!
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);!
! }!
}
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
Kontextmenüs
• Das Menü als Kontextmenü verwenden
@Override!
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 */!
@Override!
public void onCreateContextMenu(ContextMenu menu, View v,!
! ! ContextMenuInfo menuInfo) {!
/* Inflater wird verwendet, um aus XML Java Objekte zu erzeugen */!
/* Erstellen des Menüs aus der XML Ressource unter Angabe der Menü ID */!
}!
}
Kontextmenüs
• Auf Klicks im Kontextmenü reagieren
/* Kontextmenü registrieren */!
} /* wird aufgerufen, wenn das Kontextmenü erzeugt wird */!
public void onCreateContextMenu(...) {!
! /* Kontextmenü erstellen */!
}!
/* wird aufgerufen, wenn ein Kontextmenüeintrag ausgewählt wurde */!
@Override!
public boolean onContextItemSelected(MenuItem item) {!
! /* item.getItemId() gibt die ID des geklickten Menüeintrags zurück */!
!
! 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);!
!
}!
}!
}!
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
Popup-‐Menüs
• Das Menü als Popup-Menü verwenden
• Beispiel: Bei Drücken des Buttons soll ein
Popup-Menü erscheinen Mobile App Development
Popup-‐Menüs
• Das Menü als Popup-Menü verwenden <Button!
android:id="@+id/myButton"!
android:onClick="myPopupButtonClick"!
android:text="@string/popupButton" />
!
/* 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();!
}!
}
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 */!
!
!
@Override!
!
!
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();!
}
Ac6onBar
Ac6onBar
• seit Android 3.0 kein Hardware MenüButton mehr notwendig
• Einführung der ActionBar
• API Level 11 + Theme.Holo Mobile App Development
Ac6onBar
• Die ActionBar füllen
• gleiches Vorgehen, wie bei Optionsmenüs
• Erstellen einer Menu-Datei
res/menu/my_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >!
<item!
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"/>!
<item!
android:id="@+id/menu_settings" android:title="@string/menu_settings"/>!
</menu>
Ac6onBar
• Die ActionBar füllen
• Das Menü aus XML erstellen
public class MainActivity extends Activity { ...!
@Override!
public boolean onCreateOptionsMenu(Menu menu) {!
/* Aus XML das Menü erstellen */!
/* super call */!
return super.onCreateOptionsMenu(menu);!
} ...!
}
Ac6onBar
• Auf ActionBar Klicks reagieren
...!
@Override!
public boolean onOptionsItemSelected(MenuItem item) {!
! /* switch über die MenuItem ID */!
!
! 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);!
!
! }!
! }!
}!
}
Ac6onBar
• 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" >!
<item!
android:id="@+id/menu_search"!
android:title="@string/menu_search"!
android:icon="@android:drawable/ic_menu_search"!
android:showAsAction="always"
</menu>
/>!
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
Prak6kum
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. 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.!
!
Die Abgabe der Übung findet am Mittwoch, den 06.11.2013, statt.
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.http://developer.android.com
IV.Mark Murphy: The Busy Coders Guide To
Android Development, 2013

Mobile App Development

Transcription

Similar documents

WS15-MADA-03-GUIs-2

Lazarus

Ausgabe 2/2008 - TRIKON · Nachrichten aus der Westfälischen

Part 3 of 3