Supercharge your ui

1.073 Aufrufe

Veröffentlicht am

Der Erfolg einer App hängt maßgeblich davon ab, wie sie sich dem Nutzer präsentiert. Wir beleuchten die Möglichkeiten des Android Graphics Frameworks und zeigen, wie Sie Ihre App durch außergewöhnliche Custom-Widgets, 3-D-Animationen und grafische Effekte aufwerten. In dieser Session erwartet Sie jede Menge Beispielcode, Performancetipps sowie Best Practices.

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.073
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
22
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Supercharge your ui

  1. 1. Supercharge Your UI
  2. 2. Dominik JonasHelleberg GehringMobile Development Mobile DevelopmentAndroid AndroidHTML5 JavaScriptdominik-helleberg.de/+ https://github.com/jjoe64 http://www.jjoe64.com
  3. 3. Design isimportanthttps://play.google.com/store/apps/details?id=com.outlook.Z7
  4. 4. This is what happens when you let developers create UIhttp://www.codinghorror.com/blog/2006/11/this-is-what-happens-when-you-let-developers-create-ui.html
  5. 5. Stick with Holohttp://developer.android.com/design/index.html
  6. 6. Holo is designed by professionaldesigners and let you createbeautiful appshttps://play.google.com/store/apps/details?id=com.michaelpardo.quotes
  7. 7. Holo is designed by professionaldesigners and let you createbeautiful appshttps://play.google.com/store/apps/details?id=ch.teamtasks.tasks.paid
  8. 8. Don‘t customize it......unless you know what you‘redoinghttps://play.google.com/store/apps/details?id=sweesoft.prohome
  9. 9. How to use Holohttps://developer.android.com/design/building-blocks/index.html
  10. 10. Mind the Gaphttps://developer.android.com/design/style/metrics-grids.html
  11. 11. How to use Holo - Grids res/values/dimens.xml<resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <dimen name=“ui_gap“>8dp</dimen> <dimen name=“element_height“>48dp</dimen></resources>https://developer.android.com/design/style/metrics-grids.html
  12. 12. Theme.Holo● existiert seit API Level 11 (Honeycomb)● erst ab API Level 14 (ICS) garantiert unverändert durch OEMVorschlag● Ab Api Level 11 Theme.Holo verwenden (hell: Holo.Light)● Frühere Api Level verwenden Theme.Black. (hell: Theme)
  13. 13. Das richtige Theme zur Laufzeit automatisch auswählenres/values/ res/values-v11/ res/values-v14/ android: android: android: Theme.Black Theme.Holo Theme.Holo android: Theme.MyTheme
  14. 14. Das richtige Theme zur Laufzeit automatisch auswählen res/values/themes.xml<resources> <style name="Theme.MyTheme" parent="android:Theme.Black"></style> <style name="Theme.MyTheme.NoTitleBar" parent="android:Theme.Black.NoTitleBar"></style> <style name="Theme.MyTheme.Fullscreen" parent="android:Theme.Black.NoTitleBar.Fullscreen"></style> <style name="Theme.MyTheme.Light" parent="android:Theme"></style> <style name="Theme.MyTheme.Light.NoTitleBar" parent="android:Theme.NoTitleBar"></style> <style name="Theme.MyTheme.Light.NoTitleBar.Fullscreen" parent="android:Theme.NoTitleBar.Fullscreen"></style></resources>
  15. 15. Themes für Honeycomb res/values-v11/themes.xml<resources> <style name="Theme.MyTheme" parent="android:Theme.Holo"></style> ... <!-- Bug: Theme.Holo.Light.NoActionBar is not public --> <style name="Theme.MyTheme.Light.NoTitleBar" parent="android:Theme.Holo.Light"> <item name="android:windowActionBar">false</item> <item name="android:windowNoTitle">true</item> </style> <!-- Bug? Theme.Holo.Light.NoActionBar.Fullscreen has a titlebar --> <style name="Theme.MyTheme.Light.NoTitleBar.Fullscreen" parent="android:Theme.Holo.Light"> <item name="android:windowActionBar">false</item> <item name="android:windowNoTitle">true</item> <item name="android:windowFullscreen">true</item> <item name="android:windowContentOverlay">@null</item> </style>
  16. 16. Themes für Ice Cream Sandwich res/values-v14/themes.xml<resources> <style name="Theme.MyTheme" parent="android:Theme.Holo"></style> <style name="Theme.MyTheme.NoTitleBar" parent="android:Theme.Holo.NoActionBar"></style> <style name="Theme.MyTheme.Fullscreen" parent="android:Theme.Holo.NoActionBar.Fullscreen"></style> <style name="Theme.MyTheme.Light" parent="android:Theme.Holo.Light"></style> <style name="Theme.MyTheme.Light.NoTitleBar" parent="android:Theme.Holo.Light.NoActionBar"></style> <style name="Theme.MyTheme.Light.Fullscreen" parent="android:Theme.Holo.Light.NoActionBar.Fullscreen"></style></resources>
  17. 17. Verschiedene Themes sind nun unter einem gemeinsamen Namen ansprechbar. Verwendung in der AndroidManifest.xml<activity android:theme="@style/Theme.MyTheme.Light.NoTitleBar“...
  18. 18. Colors#33B5E5 #AA66CC #99CC00 #FFBB33 #FF4444#0099CC #9933CC #669900 #FF8800 #CC0000
  19. 19. Colors res/colors.xml<?xml version="1.0" encoding="utf-8"?><resources> <color name="light_blue">#33B5E5</color> <color name="dark_blue">#0099CC</color> <color name="light_purple">#AA66CC</color> <color name="dark_purple">#9933CC</color> <color name="light_green">#99CC00</color> <color name="dark_green">#669900</color> <color name="light_orange">#FFBB33</color> <color name="dark_orange">#FF8800</color> <color name="light_red">#FF4444</color> <color name="dark_red">#CC0000</color></resources>
  20. 20. Build Responsive 302 Redirect to Juhani Lehtimäkihttp://developer.android.com/training/basics/fragments/fragment-ui.html
  21. 21. Build with Holo Componentshttp://developer.android.com/design/patterns/actionbar.html
  22. 22. Since we use Holo... Life is good....
  23. 23. OEMS und Themes
  24. 24. WAAAAAAAAAhttp://www.flickr.com/photos/fspugna/4507352674/
  25. 25. OEMS und Themes
  26. 26. ZusammenfassungBefolgen der Design-Guidlines ● Verwenden der Standard-Widgets ● Verwenden der Standard-Patterns ● Verwenden des Standard-Themes ● Verwenden der Standard-Farbpalette ● Verwenden von Responsive Design TechniquesGefahr ● Gestaltung der App hebt sich womöglich kaum abWie differenzieren? ● Qualität ● Wir sorgen dafür, dass sich die App gut anfühlt
  27. 27. Was heißt gut anfühlen?● klare logische UI Struktur● Die App ist responsive und snappy● Animationen● Grafische Effekte, eigene Widgets (wo es sinnvoll ist)
  28. 28. Android Custom Viewshttp://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/https://github.com/harism/android_page_curl
  29. 29. Most Simple Custom Viewpublic class ExampleView extends View { public ExampleView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { canvas.drawColor(Color.RED); }}
  30. 30. Einige wichtige MethodenTouch Events@Overridepublic boolean onTouchEvent(MotionEvent event)Größenabhängige Berechnungen@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh)Spezielle Anforderungen an die Abmessungen@Overrideprotected void onMeasure(int widthMeasureSpec, intheightMeasureSpec)
  31. 31. View DrawingCanvas API Paint API● Formen (Linien, Ellipsen, ● Gradienten (Kreis und Rechtecke etc) Linear)● Text ● Effekte (Blur,...)● Bitmaps ● Farbfilter● Zeichenmatrix (Position, ● Vermessen von Text Größe, Drehung) ● Texteigenschaften ● Farbe, Muster, Dicke von Formen
  32. 32. keines Paint BeispielSimplePaintExample
  33. 33. GradientsSinnvoll einsetzenLinearGradientRadialGradientShader.TileModeCLAMP, REPEAT, MIRROR
  34. 34. GradientsLinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)
  35. 35. Custom ViewGroupshttps://developer.android.com/design/patterns/index.html
  36. 36. Custom ViewGroupseinfache Möglichkeit um das Rendering von Child Views zu ändern:setStaticTransformationsEnabled(true);@Overrideboolean getChildStaticTransformation(View child, Transformation t)Statische Transformationen Alpha Wert ● Über das Matrix-Object ● ○ rotieren ○ positionieren ○ skalieren ○ "3D Blick" Beispiel: ExampleCustomViewGroup
  37. 37. ListView 3D ● Custom ViewGroup ● 3D Effekt mit Canvas API ● Bitmap CachingMTCRichGraphics
  38. 38. Demo ViewPager3dhttps://github.com/inovex/ViewPager3D ● 3D mit Canvas API ● Animation ● Multi Touch Handling ● XML-Attribute
  39. 39. Animationen Animationen sollensinnvoll sein
  40. 40. Animationen
  41. 41. Animation Framework: since 3.0ObjectAnimator.ofFloat(myView, "alpha", 0f).start()ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f); anim.setDuration(500); anim.start();
  42. 42. Animation Framework: since 3.xPropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("x", 50f);PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", 100f);ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvyY).start();//since 3.1myView.animate().x(50f).y(100f);
  43. 43. 2.x ? NineOldAndroidsUsageThe API is exactly the same as the Honeycomb API, just changeyour imports to use com.nineoldandroids.animation.*http://nineoldandroids.com
  44. 44. ListViewAnimations Mind the View-recycling! inspired by Chet Haases Demohttp://graphics-geek.blogspot.de/2013/02/devbytes-listview-animations.html
  45. 45. ListViewAnimationsab 4.1 -> view.setHasTransientState(true);Alternative:Custom AdapteroderListViewAnimations-Lib von Niek Haarmanhttps://bitbucket.org/nhaarman/listviewanimations/
  46. 46. Demohttps://github.com/renard314/LEDView ● Canvas API ● Linear Gradients ● Radial Gradients ● BitmapShader ● ColorFilter ● Animation ● XML-Attribute ● Caching
  47. 47. Vermeide Canvas.drawText () ● Zeilenumbrüche ● Zeilenabstände ● Vermessen und Positionieren des TextesDafür gibt es Hilfsklassen! StaticLayout: Mehrzeiliger Text der sich nicht ändert DynamicLayout: Mehrzeiliger Text der sich ändert BoringLayout: Einzeiliger Text der sich nicht ändert Example: ExampleCanvasText
  48. 48. Tipps und Tricks● Bei beliebten Apps abgucken● onDraw leichtgewichtig lassen● invalide(Rect) statt invalide()● Bitmap Caching● nicht sinnlos malen● Advanced: Surface View ○ onDraw über eigenen Thread
  49. 49. SummaryStick with HoloUse defaults unless youre a designerUse the techniques from design.android.comOEM Themes DO suckAdd Custom Views / ViewGroups / Animations to differentiate, but do it right
  50. 50. DANKE!

×