Supercharge. Your UI

Transkript

1 Supercharge Your UI

2 Dominik Helleberg Mobile Development Android ingress Level 6 dominik-helleberg.de/+ Jonas Gehring Mobile Development Android JavaScript

3 Design is important

4 This is what happens when you let developers create UI

5 Stick with Holo

6 Holo is designed by professional designers and let you create beautiful apps

7 Holo is designed by professional designers and let you create beautiful apps

8 Don t customize it......unless you know what you re doing

9 How to use Holo

10 Mind the Gap

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>

12 Theme.Holo existiert seit API Level 11 (Honeycomb) erst ab API Level 14 (ICS) garantiert unverändert durch OEM Vorschlag Ab Api Level 11 Theme.Holo verwenden (hell: Holo.Light) Frühere Api Level verwenden Theme.Black. (hell: Theme)

13 Das richtige Theme zur Laufzeit automatisch auswählen res/values/ android: Theme.Black res/values-v11/ res/values-v14/ android: Theme.Holo android: Theme.Holo android: Theme.MyTheme

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 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 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 Verschiedene Themes sind nun unter einem gemeinsamen Namen ansprechbar. Verwendung in der AndroidManifest.xml <activity

18 Colors #33B5E5 #AA66CC #99CC00 #FFBB33 #FF4444 #0099CC #9933CC # #FF8800 #CC0000

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 Build Responsive 302 Redirect to Juhani Lehtimäki

21 Build with Holo Components

22 Holo Cheat Sheet

23 Since we use Holo... Life is good...

24 OEMS und Themes

25 WAAAAAAAAA

26 OEMS und Themes

27 Zusammenfassung Befolgen der Design-Guidlines Verwenden der Standard-Widgets Verwenden der Standard-Patterns Verwenden des Standard-Themes Verwenden der Standard-Farbpalette Verwenden von Responsive Design Techniques Gefahr Gestaltung der App hebt sich womöglich kaum ab Wie differenzieren? Qualität Wir sorgen dafür, dass sich die App gut anfühlt

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

29 Android Custom Views

30 Most Simple Custom View public class ExampleView extends View { public ExampleView(Context context, AttributeSet attrs) { super(context, attrs); protected void ondraw(canvas canvas) { canvas.drawcolor(color.red); } }

31 Einige wichtige Methoden Touch public boolean ontouchevent(motionevent event) Größenabhängige protected void onsizechanged(int w, int h, int oldw, int oldh) Spezielle Anforderungen an die protected void onmeasure(int widthmeasurespec, int heightmeasurespec)

32 View Drawing Canvas API Formen (Linien, Ellipsen, Paint API Rechtecke etc) Gradienten (Kreis und Linear) Text Effekte (Blur,...) Bitmaps Farbfilter Zeichenmatrix (Position, Vermessen von Text Größe, Drehung) Texteigenschaften Farbe, Muster, Dicke von Formen

33 keines Paint Beispiel SimplePaintExample

34 Gradients LinearGradient RadialGradient Shader.TileMode CLAMP, REPEAT, MIRROR

35 Gradients LinearGradient(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)

36 Custom ViewGroups

37 Custom ViewGroups einfache Möglichkeit um das Rendering von Child Views zu ändern: boolean getchildstatictransformation(view child, Transformation t) Statische Transformationen Alpha Wert Über das Matrix-Object rotieren positionieren skalieren "3D Blick" Beispiel: ExampleCustomViewGroup

38 ListView 3D Custom ViewGroup 3D Effekt mit Canvas API Bitmap Caching MTCRichGraphics

39 Demo ViewPager3d 3D mit Canvas API Animation Multi Touch Handling XML-Attribute

40 Animationen Animationen sollen sinnvoll sein

41 Animationen

42 Animation Framework: since 3.0 ObjectAnimator.ofFloat(myView, "alpha", 0f).start() ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f); anim.setduration(500); anim.start(); 302 Redirect to Lars Vogel

43 Animation Framework: since 3.x PropertyValuesHolder pvhx = PropertyValuesHolder.ofFloat("x", 50f); PropertyValuesHolder pvhy = PropertyValuesHolder.ofFloat("y", 100f); ObjectAnimator.ofPropertyValuesHolder(myView, pvhx, pvyy).start(); //since 3.1 myview.animate().x(50f).y(100f);

44 2.x? NineOldAndroids Usage The API is exactly the same as the Honeycomb API, just change your imports to use com.nineoldandroids.animation.*

45 ListViewAnimations Mind the View-recycling! inspired by Chet Haase's Demo

46 ListViewAnimations ab 4.1 -> view.sethastransientstate(true); Alternative: Custom Adapter oder ListViewAnimations-Lib von Niek Haarman

47 Demo Canvas API Linear Gradients Radial Gradients BitmapShader ColorFilter Animation XML-Attribute Caching

48 Vermeide Canvas.drawText () Zeilenumbrüche Zeilenabstände Vermessen und Positionieren des Textes Dafür gibt es Hilfsklassen! StaticLayout: Mehrzeiliger Text der sich nicht ändert DynamicLayout: Mehrzeiliger Text der sich ändert BoringLayout: Example: ExampleCanvasText Einzeiliger Text der sich nicht ändert

49 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

50 Summary Stick with Holo Use defaults unless you're a designer Use the techniques from design.android.com OEM Themes DO suck Add Custom Views / ViewGroups / Animations to differentiate, but do it right

51 DANKE!