supercharge your ui

50
Supercharge Your UI

Upload: dominik-helleberg

Post on 09-May-2015

536 views

Category:

Technology


0 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Supercharge your ui

Supercharge

Your UI

Page 2: Supercharge your ui

Mobile DevelopmentAndroidHTML5

dominik-helleberg.de/+

Dominik Helleberg

JonasGehring

Mobile DevelopmentAndroid

JavaScript

https://github.com/jjoe64http://www.jjoe64.com

Page 3: Supercharge your ui

https://play.google.com/store/apps/details?id=com.outlook.Z7

Design is important

Page 4: Supercharge your ui

This is what happens when you let developers create UI

http://www.codinghorror.com/blog/2006/11/this-is-what-happens-when-you-let-developers-create-ui.html

Page 5: Supercharge your ui

Stick with Holo

http://developer.android.com/design/index.html

Page 6: Supercharge your ui

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

https://play.google.com/store/apps/details?id=com.michaelpardo.quotes

Page 7: Supercharge your ui

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

https://play.google.com/store/apps/details?id=ch.teamtasks.tasks.paid

Page 8: Supercharge your ui

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

https://play.google.com/store/apps/details?id=sweesoft.prohome

Page 9: Supercharge your ui

How to use Holo

https://developer.android.com/design/building-blocks/index.html

Page 10: Supercharge your ui

Mind the Gap

https://developer.android.com/design/style/metrics-grids.html

Page 11: Supercharge your ui

How to use Holo - Grids

https://developer.android.com/design/style/metrics-grids.html

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

res/values/dimens.xml

Page 12: Supercharge your ui

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)

Page 13: Supercharge your ui

android:Theme.Black

Das richtige Theme zur Laufzeit automatisch auswählen

res/values/ res/values-v11/ res/values-v14/

android:Theme.Holo

android:Theme.Holo

android:Theme.MyTheme

Page 14: Supercharge your ui

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>

Page 15: Supercharge your ui

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>

</resources>

Page 16: Supercharge your ui

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>

Page 17: Supercharge your ui

Verschiedene Themes sind nun unter einem gemeinsamen Namen ansprechbar.

<activity android:theme="@style/Theme.MyTheme.Light.NoTitleBar“...

Verwendung in der AndroidManifest.xml

Page 18: Supercharge your ui

#99CC00

Colors

#33B5E5 #AA66CC #FFBB33 #FF4444

#0099CC #9933CC #669900 #FF8800 #CC0000

Page 19: Supercharge your ui

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>

Page 20: Supercharge your ui

Build Responsive

http://developer.android.com/training/basics/fragments/fragment-ui.html

302 Redirect to Juhani Lehtimäki

Page 21: Supercharge your ui

Build with Holo Components

http://developer.android.com/design/patterns/actionbar.html

Page 22: Supercharge your ui

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

Page 23: Supercharge your ui

OEMS und Themes

Page 24: Supercharge your ui

WAAAAAAAAA

http://www.flickr.com/photos/fspugna/4507352674/

Page 25: Supercharge your ui

OEMS und Themes

Page 26: Supercharge your ui

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

Page 27: Supercharge your ui

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)

Page 28: Supercharge your ui

Android Custom Views

http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/https://github.com/harism/android_page_curl

Page 29: Supercharge your ui

public class ExampleView extends View {

public ExampleView(Context context, AttributeSet attrs) {super(context, attrs);

}

@Overrideprotected void onDraw(Canvas canvas) {

canvas.drawColor(Color.RED);}

}

Most Simple Custom View

Page 30: Supercharge your ui

@Overridepublic boolean onTouchEvent(MotionEvent event)

@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh)

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

Größenabhängige Berechnungen

Spezielle Anforderungen an die Abmessungen

Touch Events

Einige wichtige Methoden

Page 31: Supercharge your ui

Canvas API

● Formen (Linien, Ellipsen,

Rechtecke etc)

● Text

● Bitmaps

● Zeichenmatrix (Position,

Größe, Drehung)

Paint API

● Gradienten (Kreis und

Linear)

● Effekte (Blur,...)

● Farbfilter

● Vermessen von Text

● Texteigenschaften

● Farbe, Muster, Dicke

von Formen

View Drawing

Page 32: Supercharge your ui

keines Paint Beispiel

SimplePaintExample

Page 33: Supercharge your ui

Gradients

Sinnvoll einsetzen

LinearGradient

RadialGradient

Shader.TileMode

CLAMP, REPEAT, MIRROR

Page 34: Supercharge your ui

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)

Page 35: Supercharge your ui

Custom ViewGroups

https://developer.android.com/design/patterns/index.html

Page 36: Supercharge your ui

Custom ViewGroups

Statische Transformationen● Alpha Wert● Über das Matrix-Object

○ rotieren

○ positionieren

○ skalieren

○ "3D Blick"

einfache Möglichkeit um das Rendering von Child Views zu ändern:

setStaticTransformationsEnabled(true);

@Overrideboolean getChildStaticTransformation(View child, Transformation t)

Beispiel: ExampleCustomViewGroup

Page 37: Supercharge your ui

ListView 3D

● Custom ViewGroup

● 3D Effekt mit Canvas API

● Bitmap Caching

MTCRichGraphics

MTCRichGraphics

Page 38: Supercharge your ui

https://github.com/inovex/ViewPager3D

Demo ViewPager3d

● 3D mit Canvas API

● Animation

● Multi Touch Handling

● XML-Attribute

Page 39: Supercharge your ui

Animationen

Animationen

sollen

sinnvollsein

Page 40: Supercharge your ui

Animationen

Page 41: Supercharge your ui

Animation Framework:since 3.0

ObjectAnimator.ofFloat(myView, "alpha", 0f).start()

ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);

anim.setDuration(500);

anim.start();

Page 42: Supercharge your ui

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

Page 43: Supercharge your ui

2.x ? NineOldAndroids

Usage

The API is exactly the same as the Honeycomb API, just change

your imports to use com.nineoldandroids.animation.*

http://nineoldandroids.com

Page 44: Supercharge your ui

ListViewAnimations

Mind the View-recycling!

inspired by Chet Haase's Demo

http://graphics-geek.blogspot.de/2013/02/devbytes-listview-animations.html

Page 45: Supercharge your ui

ab 4.1 -> view.setHasTransientState(true);

Alternative:

Custom Adapter

oder

ListViewAnimations-Lib von Niek Haarman

https://bitbucket.org/nhaarman/listviewanimations/

ListViewAnimations

Page 46: Supercharge your ui

Demo

● Canvas API

● Linear Gradients

● Radial Gradients

● BitmapShader

● ColorFilter

● Animation

● XML-Attribute

● Caching

https://github.com/renard314/LEDView

Page 47: Supercharge your ui

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: Einzeiliger Text der sich nicht ändert

Example: ExampleCanvasText

Page 48: Supercharge your ui

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

Page 49: Supercharge your ui

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

Page 50: Supercharge your ui

DANKE!