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.
2. Dominik Jonas
Helleberg Gehring
Mobile Development Mobile Development
Android Android
HTML5 JavaScript
dominik-helleberg.de/+ https://github.com/jjoe64
http://www.jjoe64.com
4. 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
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. 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/ res/values-v11/ res/values-v14/
android: android: android:
Theme.Black Theme.Holo Theme.Holo
android:
Theme.MyTheme
17. Verschiedene Themes sind nun unter einem gemeinsamen
Namen ansprechbar.
Verwendung in der AndroidManifest.xml
<activity
android:theme="@style/Theme.MyTheme.Light.NoTitleBar“
...
26. 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
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)
29. Most Simple Custom View
public class ExampleView extends View {
public ExampleView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.RED);
}
}
30. Einige wichtige Methoden
Touch Events
@Override
public boolean onTouchEvent(MotionEvent event)
Größenabhängige Berechnungen
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
Spezielle Anforderungen an die Abmessungen
@Override
protected void onMeasure(int widthMeasureSpec, int
heightMeasureSpec)
31. View Drawing
Canvas 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
43. 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
44. ListViewAnimations
Mind the View-recycling!
inspired by Chet Haase's Demo
http://graphics-geek.blogspot.de/2013/02/devbytes-listview-animations.html
45. ListViewAnimations
ab 4.1 -> view.setHasTransientState(true);
Alternative:
Custom Adapter
oder
ListViewAnimations-Lib von Niek Haarman
https://bitbucket.org/nhaarman/listviewanimations/
47. 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
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. 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