Www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung.

Präsentation zum Thema: "Www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung."—  Präsentation transkript:

1 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung

2 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Styles und Themes 1/2  Style  Wird auf einzelne Views angewandt  Bündelung an Eigenschaften wie z.B. Farbe, Schriftgröße und –art, Breite und Höhe von Views, …  Dient vor allem der Durchgängigkeit von Aussehen  Trennung von Design und Inhalt/Struktur  Theme  Style der auf ganze Applikation und deren sämtliche Aktivitäten angewendet wird  Eine Änderung im Theme führt dann zu einer Änderung in der gesamten Applikation, z.B. Hintergrundfarbe oder TextFarbe Name des Vortragenden, Seite 2

3 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Styles und Themes 2/2  Speichern in XML-Datei im Ordner /res/values/ #FF0000...  Muss „name“-Attribut haben und als root-Element beinhalten  Optionales „parent“-Attribut führt zu Vererben von Eigenschaften, die dann überschrieben werden können  Anwenden von Style auf einzelnen View  Anwenden von Theme auf Aktivität oder Applikation Name des Vortragenden, Seite 3

4 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung ActionBar  Seit Android 3.0 (API 11)  1 => Applikationslogo  2 => ActionBar-Aktionen  3 => Action Overflow  Idee dahinter: für jede Aktivität der Applikation die gleiche ActionBar, angepasst an die aktive Aktivität  Nachfolger/Ersatz für Menüs  In jeder Applikation vorhanden die das Theme.Holo einsetzt  ActionBar ist ausblendbar, Google empfiehlt diese sichtbar zu lassen Name des Vortragenden, Seite 4

5 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung ActionBar-Aktionen  ActionBar-Aktionen und –Menü sind Alternative bzw. Ablöse von Menüs bis API- Version 10  Kein Hardware-Button für ein etwaiges Menü mehr  Applikation soll „aus sich heraus“ Navigation anbieten und nicht abhängig von verbauter Hardware sein  ActionBar-Menü verwendet gleich Funktionalität wie „alte“ Menüs (menu.xml) Name des Vortragenden, Seite 5

6 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Einsatz von ActionBar 1/2  Wenn android:targetSdkVersion oder minSdkVersion „11“ oder höher ist, ist eine solche in der Applikation vorhanden  Anmerkung: AndriodStudio erzeugt Standardmässig „support“ ActionBar  Zugriff erfolgt über ActionBar actionBar = getActionBar() bzw. getSupportActionBar()  Danach über actionBar.hide(), actionBar.show(), … Zugriff per Programm  Gestaltung der ActionBar  Verwendet als Standard android:icon und android:label aus Manifest  „Überschrift“ kann mit.setTitle() und.setSubtitle()  Wenn Icon nicht angezeigt werden soll, kann dies mit.setDisplayShowHomeEnabled(false) erreicht werden Name des Vortragenden, Seite 6

7 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Einsatz von ActionBar 2/2  Split Action Bar  Möglichkeit ActionBar zu teilen, wenn die Breite des Gerätes nicht genug für die gesamte ActionBar ist […]  ActionBar als Navigation  Um die ActionBar als Navigationsleiste mit Tabs verwenden zu können wird.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS) eingesetzt  Mit.newTab() werden dann Tabs hinzugefügt Name des Vortragenden, Seite 7

8 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Navigation mit Tabs 1/2  Folgende Schritte sind notwendig für eine Navigation mit Tabs (mit Swipe „Effekt“)  ViewPager für swipe zwischen Fragmenten  (Fragment)PagerAdapter mit den verwendeten Fragmenten  ActionBar.TabListener implementieren  Für jeden in der ActionBar verwendeten Eintrag ActionBar.Tab mit.tabListener instanzieren actionBar.addTab( actionBar.newTab().setText(mSectionsPagerAdapter.getPageTitle(i)).setTabListener(this)); Name des Vortragenden, Seite 8

9 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Navigation mit Tabs 2/2 @Override public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fT) { mViewPager.setCurrentItem(tab.getPosition()); } public class SectionsPagerAdapter extends FragmentPagerAdapter {... @Override public Fragment getItem(int position) { return // neues Fragement für die übergebene Postion; }  Achtung deprecated:  Neues: https://chris.banes.me/2014/10/17/appcompat-v21/ Name des Vortragenden, Seite 9

10 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Gestensteuerung 1/3  Wichtigstes Event für Gestensteuerung ist onTouchEvent(MotionEvent event) in der Aktivity  Um eigene TouchScreen-Steuerung zu programmieren, wird dieses Event überschrieben  Die Methode setOnTouchListener() dient dem „Fangen“ dieses Events in den einzelnen Views  Dieses Event wird vom System mehrfach ausgelöst  Benutzer berührt Schirm  Während der Berührung, da sich Finger bewegen können  Bei Ende der Berührung Name des Vortragenden, Seite 10

11 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Gestensteuerung 2/3  Eigenschaften des Events:  Mit event.getAction() kann ausgelesen werden, was zuletzt passiert ist  MotionEvent.ACTION_DOWN -> erster Kontakt  MotionEvent.ACTION_UP -> Kontakt zu Ende  MotionEvent.ACTION_MOVE -> Fingerbewegung  event.getPointerCount(): ein oder mehrere Finger eingesetzt  Mit getX() und getY() werden die Koordinaten des Kontaktes eingelesen  Mittels getPressure() kann der Druck der Berührung, mit getSize() die Größe der Berührung (beide von 0-1) gemessen werden  Um schnelle Bewegungen zwischen den onTouchEvents() zu speichern wird Historical_XYZ verwendet, z.B. können die X-Koordinaten seit dem letzten Event mit getHistoricalX(i) ausgelesen werden, die Größe(n) mit getHistoricalSize(i) Name des Vortragenden, Seite 11

12 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Gestensteuerung 3/3  Für übliche Gesten (lang drücken, scrollen, …) gibt es in Android die Klasse GestureDetector mit dem Listener OnGestureListener. Dieser Listener fängt jede übliche Geste ein  Falls nur wenige Gesten durch die eigene Applikation ausgewertet werden sollen, kann der GestureDetector.SimpleOnGestureListener eingesetzt werden. Dieser liefert für alle Gesten, die NICHT überschrieben wurden false als Rückgabewert, was aus Sicht des Android-Systems bedeutet, dass die Applikation diese Gesten nicht auswerten will Name des Vortragenden, Seite 12

13 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Wichtige Befehle  getActionBar() .setTitle() .setSubtitle() .setBackgroundDrawable()  setHomeButtonEnabled()  setNavigationMode()  addTab()  TabListener()  getAction()  getHistorical_XYZ()  SimpleOnGestureListener Name des Vortragenden, Seite 13

14 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Demonstration  Style-Änderung und deren Auswirkung  Theme-Änderung und deren Auswirkung  ActionBar als Menü  ActionBar-Gestaltung  ActionBar als Navigation  Gestensteurung Name des Vortragenden, Seite 14

15 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Üben  Erstellen Sie zwei unterschiedliche Styles für TextViews. Wenden Sie diese Styles dann auf zwei verschiedene TextViews mit längeren Blindtexten an  Erstellen Sie ein helles Theme mit hellem Hintergrund, dunkler und kleiner Schrift und ein dunkles Theme mit dunklem Hintergrund und heller und großer Schrift. Wenden Sie diese Themes dann jeweils an bevor Sie Ihre Applikation starten  Erstellen Sie eine Applikation mit fünf Aktivitäten, 1) Start 2) Übersicht 3) News 4) Dateneingabe 5) Auswertungen. Erweitern Sie diese Applikation um eine ActionBar die zur Navigation zu diesen fünf Aktivitäten verwendet werden kann  Erstellen Sie eine Applikation die drei unterschiedliche Gesten als Steuerung auswerten kann Name des Vortragenden, Seite 15

16 www.wifiwien.atWIFI Wien Oberflächengestaltung und Gestensteuerung Styles, ActionBar und Gestensteuerung Name des Vortragenden, Seite 16 Zusammenfassung