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

www.wifiwien.at WIFI Wien

Oberflächengestaltung und GestensteuerungStyles, 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



Styles und Themes 2/2 Speichern in XML-Datei im Ordner /res/values/

<resources> <style name="..." parent="..."> <item name="android:textColor">#FF0000</item> ...</resources>

Muss „name“-Attribut haben und als root-Element <ressources> beinhalten Optionales „parent“-Attribut führt zu Vererben von Eigenschaften, die dann

überschrieben werden können Anwenden von Style auf einzelnen View

<TextView style="@style/..." android:text=“Hallo Welt" /> Anwenden von Theme auf Aktivität oder Applikation

<application android:theme="@style/MeinTheme">




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




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)




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




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

<activity android:uiOptions=„splitActionBarWhenNarrow“>[…]</activity>

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




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




Navigation mit Tabs 2/2

@Overridepublic 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



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




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)




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




Wichtige Befehle getActionBar() .setTitle() .setSubtitle() .setBackgroundDrawable() setHomeButtonEnabled() setNavigationMode() addTab() TabListener() getAction() getHistorical_XYZ() SimpleOnGestureListener




Demonstration Style-Änderung und deren Auswirkung Theme-Änderung und deren Auswirkung

ActionBar als Menü ActionBar-Gestaltung ActionBar als Navigation

Gestensteurung




Ü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





Zusammenfassung

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

Documents

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