Supercharge your ui

download

of 50

  • date post

    09-May-2015
  • Category

    Technology
  • view

    518
  • download

    0

Embed Size (px)

description

Der Erfolg einer App hngt mageblich davon ab, wie sie sich dem Nutzer prsentiert. Wir beleuchten die Mglichkeiten des Android Graphics Frameworks und zeigen, wie Sie Ihre App durch auergewhnliche Custom-Widgets, 3-D-Animationen und grafische Effekte aufwerten. In dieser Session erwartet Sie jede Menge Beispielcode, Performancetipps sowie Best Practices.

transcript

  • 1.SuperchargeYour UI

2. Dominik JonasHellebergGehringMobile Development Mobile DevelopmentAndroidAndroidHTML5 JavaScriptdominik-helleberg.de/+ https://github.com/jjoe64http://www.jjoe64.com 3. Design isimportanthttps://play.google.com/store/apps/details?id=com.outlook.Z7 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. Stick with Holohttp://developer.android.com/design/index.html 6. Holo is designed by professionaldesigners and let you createbeautiful appshttps://play.google.com/store/apps/details?id=com.michaelpardo.quotes 7. Holo is designed by professionaldesigners and let you createbeautiful appshttps://play.google.com/store/apps/details?id=ch.teamtasks.tasks.paid 8. Dont customize it......unless you know what youredoinghttps://play.google.com/store/apps/details?id=sweesoft.prohome 9. How to use Holohttps://developer.android.com/design/building-blocks/index.html 10. Mind the Gaphttps://developer.android.com/design/style/metrics-grids.html 11. How to use Holo - Gridsres/values/dimens.xml16dp16dp8dp48dphttps://developer.android.com/design/style/metrics-grids.html 12. Theme.Holo existiert seit API Level 11 (Honeycomb) erst ab API Level 14 (ICS) garantiert unverndert durch OEMVorschlag Ab Api Level 11 Theme.Holo verwenden (hell: Holo.Light) Frhere Api Level verwenden Theme.Black. (hell: Theme) 13. Das richtige Theme zur Laufzeit automatisch auswhlenres/values/res/values-v11/ res/values-v14/ android:android: android: Theme.Black Theme.Holo Theme.Holoandroid: Theme.MyTheme 14. Das richtige Theme zur Laufzeit automatisch auswhlen res/values/themes.xml 15. Themes fr Honeycombres/values-v11/themes.xml... 16. Themes fr Ice Cream Sandwichres/values-v14/themes.xml 17. Verschiedene Themes sind nun unter einem gemeinsamenNamen ansprechbar.Verwendung in der AndroidManifest.xml#33B5E5#0099CC#AA66CC#9933CC#99CC00#669900#FFBB33#FF8800#FF4444#CC0000 20. Build Responsive302 Redirect to Juhani Lehtimkihttp://developer.android.com/training/basics/fragments/fragment-ui.html 21. Build with Holo Componentshttp://developer.android.com/design/patterns/actionbar.html 22. Since we use Holo... Life is good.... 23. OEMS und Themes 24. WAAAAAAAAAhttp://www.flickr.com/photos/fspugna/4507352674/ 25. OEMS und Themes 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 womglich kaum abWie differenzieren? Qualitt Wir sorgen dafr, dass sich die App gut anfhlt 27. Was heit gut anfhlen? klare logische UI Struktur Die App ist responsive und snappy Animationen Grafische Effekte, eigene Widgets (wo essinnvoll ist) 28. Android Custom Viewshttp://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/https://github.com/harism/android_page_curl 29. Most Simple Custom Viewpublic class ExampleView extends View {public ExampleView(Context context, AttributeSet attrs) {super(context, attrs);}@Overrideprotected void onDraw(Canvas canvas) { canvas.drawColor(Color.RED);}} 30. Einige wichtige MethodenTouch Events@Overridepublic boolean onTouchEvent(MotionEvent event)Grenabhngige Berechnungen@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh)Spezielle Anforderungen an die Abmessungen@Overrideprotected void onMeasure(int widthMeasureSpec, intheightMeasureSpec) 31. View DrawingCanvas APIPaint API Formen (Linien, Ellipsen, Gradienten (Kreis undRechtecke etc)Linear) Text Effekte (Blur,...) Bitmaps Farbfilter Zeichenmatrix (Position, Vermessen von TextGre, Drehung) Texteigenschaften Farbe, Muster, Dickevon Formen 32. keines Paint BeispielSimplePaintExample 33. GradientsSinnvoll einsetzenLinearGradientRadialGradientShader.TileModeCLAMP, REPEAT, MIRROR 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. Custom ViewGroupshttps://developer.android.com/design/patterns/index.html 36. Custom ViewGroupseinfache Mglichkeit 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. ListView 3D Custom ViewGroup 3D Effekt mit Canvas API Bitmap CachingMTCRichGraphics 38. Demo ViewPager3dhttps://github.com/inovex/ViewPager3D 3D mit Canvas API Animation Multi Touch Handling XML-Attribute 39. Animationen Animationensollensinnvoll sein 40. Animationen 41. Animation Framework:since 3.0ObjectAnimator.ofFloat(myView, "alpha", 0f).start()ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);anim.setDuration(500);anim.start(); 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. 2.x ? NineOldAndroidsUsageThe API is exactly the same as the Honeycomb API, just changeyour imports to use com.nineoldandroids.animation.*http://nineoldandroids.com 44. ListViewAnimations Mind the View-recycling!inspired by Chet Haases Demohttp://graphics-geek.blogspot.de/2013/02/devbytes-listview-animations.html 45. ListViewAnimationsab 4.1 -> view.setHasTransientState(true);Alternative:Custom AdapteroderListViewAnimations-Lib von Niek Haarmanhttps://bitbucket.org/nhaarman/listviewanimations/ 46. Demohttps://github.com/renard314/LEDView Canvas API Linear Gradients Radial Gradients BitmapShader ColorFilter Animation XML-Attribute Caching 47. Vermeide Canvas.drawText () Zeilenumbrche Zeilenabstnde Vermessen und Positionieren des TextesDafr 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. 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. 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. DANKE!