Optymalizacja hierarchii widoków na przykładzie aplikacji "Stereoscopic Image Calculator" realizowanej w ramach projektu ROS3D. Celem prezentacji jest omówienie sposobu renderowania widoków jako podstawy do opracowywania wydajnych aplikacji na platformę Android.

1. Optymalizacja
hierarchii widoków na
platformie Android
Michał Włodarczyk,
Mobilization 2015, Łódź

2. Jak tworzyć wydajne
aplikacje?

3. “Layout Traversals on Android”
Lucas Rocha
Facebook Inc.
DroidCon 2015, Berlin

4. Pozycjonowanie
Rysowanie
Interakcje ze zdarzeniami
Czym jest UI dla programisty?

5. Początki Android’a były trudne ...

6. Przed Jelly Bean
ViewRoot.java
public final class ViewRoot extends Handler ... {
...
public void scheduleTraversals() {
if (!mTraversalScheduled) {
mTraversalScheduled = true;
sendEmptyMessage(DO_TRAVERSAL);
}
}
...
public void handleMessage(Message msg) {
...
case DO_TRAVERSAL:
performTraversals();
...
}
}

7. Odświeżanie ekranu
w przewidywalnych odstępach czasu

8. Od Jelly Bean - Choreographer
... f1 f2 f3 f4 f5 ...
Resize
view
Redraw
view
Input
Events

9. Choreographer.java
public void onVsync(long timestampNanos, int builtInDisplayId, int frame) {
...
scheduleVsync();
...
}
...
void doFrame(long frameTimeNanos, int frame) {
...
if (!mFrameScheduled) {
return;
}
...
doCallbacks(Choreographer.CALLBACK_INPUT, frameTimeNanos);
doCallbacks(Choreographer.CALLBACK_ANIMATION, frameTimeNanos);
doCallbacks(Choreographer.CALLBACK_TRAVERSAL, frameTimeNanos);
...
}
Choreographer

10. ViewRootlmpl
Łączy zarządcę okien z hierarchią widoków

11. SurfaceFlinger
ViewRootImpl
Hierarchia widoków

12. Metody związane z widokami
Measure + Layout + Draw

13. measureHierarchy(...)
measure(int, int)
→ onMeasure(int, int)
M M M
M M
M
*
Measure

14. Lazy Measure
Multi-MeasureSpec cache

15. View.java
public final void measure(int widthMeasureSpec,
int heightMeasureSpec) {
...
int cacheIndex = mMeasureCache.indexOfKey(key);
if (cacheIndex < 0 || sIgnoreMeasureCache) {
onMeasure(widthMeasureSpec, heightMeasureSpec);
mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
} else {
long value = mMeasureCache.valueAt(cacheIndex);
setMeasuredDimensionRaw((int) (value >> 32), (int) value);
mPrivateFlags3 |= PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
}
...
}
Lazy Measure

16. View.java
public void layout(int l, int t, int r, int b) {
if ((flags & PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT) != 0 ) {
onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec);
mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
}
...
}
Lazy Measure

17. RelativeLayout
LinearLayout Button
LinearLayout TextView
RelativeLayout RelativeLayout
TextView TextViewTextView TextView TextView TextView
requestLayout()
Multi-MeasureSpace cache

18. 18 19
6.5 ms 0.7 ms
72 14
SDK
czas mierzenia
ilość wywołań
Multi-MeasureSpace cache

19. layout(int, int, int, int) → onLayout
(boolean, int, int, int, int)
M L M L M L
M L M L
M L
*
Layout
performLayout()

20. performDraw()
draw(Canvas)
→ onDraw(Canvas)M L D
*
M L D M L DM L D
M L D M L D
Draw

21. View.java
private DisplayList getDisplayList(...) {
...
final HardwareCanvas canvas = displayList.start(width, height);
...
draw(canvas);
...
displayList.end();
...
}
Display List

22. Kiedy wykonywany jest layout(),
to na pewno zrobiony jest measure()
Kiedy wykonywany jest draw(),
to na pewno zrobiony jest layout()
Pamiętaj!

23. 1. Wywołanie getMeasured*() poza
onLayout()
2. Alokacja:
● onLayout(): Akceptowalna
● onMeasure(): Unikać
● onDraw(): Nigdy
Unikaj!

24. Zmiany rozmiaru elementów,
odświeżenie stanu, animacje

25. ... f1 f2 f3 f4 f5 ...
Metoda requestLayout()
*
requestLayout()

26. View.java
public void requestLayout() {
...
if (mParent != null && !mParent.isLayoutRequested()) { mParent.
requestLayout();
}
...
}
ViewRootImpl.java
void scheduleTraversals() {
...
mChoreographer.postCallback(
Choreographer.CALLBACK_TRAVERSAL, mTraversalRunnable, null);
...
}
Metoda requestLayout()

27. Metoda invalidate()
... f1 f2 f3 f4 f5 ...
*
invalidate(...)

28. Metoda invalidate()
View.java
public void invalidateInternal(...) {
...
mPrivateFlags |= PFLAG_INVALIDATED;
...
if (mParent != null && mAttachInfo != null && l < r && t < b) {
final Rect damage = mAttachInfo.mTmpInvalRect;
damage.set(l, t, r, b);
mParent.invalidateChild(this, damage);
}
...
}
boolean draw(...) {
...
mRecreateDisplayList = (
mPrivateFlags & PFLAG_INVALIDATED) == PFLAG_INVALIDATED;
...
}

29. Metoda postOnAnimation()
...... f1 f2 f3 f4 f5 ...
*
postOnAmination()
valueAnimator
...

30. Metoda postOnAnimation()
View.java
public void postOnAnimation(Runnable action) {
...
attachInfo.mViewRootImpl.mChoreographer.postCallback(
Choreographer.CALLBACK_ANIMATION, action, null);
...
}
Choreographer.java
void doFrame(long frameTimeNanos, int frame) {
...
doCallbacks(Choreographer.CALLBACK_INPUT,frameTimeNanos);
doCallbacks(Choreographer.CALLBACK_ANIMATION,frameTimeNanos);
doCallbacks(Choreographer.CALLBACK_TRAVERSAL,frameTimeNanos);
...
}

31. Używajmy OnPreDrawListener!
Tree Observer

32. OnPreDrawListener
// 1. Save layout state and wait for next frame.
getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener() {
@Override
public boolean onPreDraw() {
getViewTreeObserver().removeOnPreDrawListener(this);
// 2. Restore original layout state.
// 3. Trigger animators towards new layout state.
}
}

33. Nie wywołuj layout() podczas layout
Nie wywołuj layout() podczas animacji
Wywołuj invalidate() tylko na tych elementach,
które chcesz przerysować
Pamiętaj!

34. 1. Prosta hierarchia widoków
2. Multi pass layout - unikajmy
Wydajność

35. Własne widoki

36. 1. Composite Views
2. Custom Composite Views
3. Flat Custom Views
Własne widoki

37. Przydatne narzędzia

38. Hierarchy Viewer
źródło: http://cfile10.uf.tistory.com/image/110412354E5A61652D1F2C

39. Stereovision Image Calculator

40. Stereovision Image Calculator

41. 1. Menu zmienione z RelativeLayout
na FrameLayout
2. Uproszczenie hierarchii widoków
3. Wykres jako Custom Flat View
4. Kolejkowanie odświeżania
Stereovision Image Calculator
Optymalizacja

42. Nexus 7
Nexus 7 po optymalizacja
Samsung Tab 2
Samsung tab 2 po optymalizacja
Stereovision Image Calculator
Wyniki optymalizacji
299.03
50.54
478.42
65.92
Czas renderowania [ms]

43. Po co tworzyć wydajne
aplikacje?

44. INFO@OPEN-RND.PL
QUESTIONS ? THOUGHTS ? COMMENTS ?
Feel free to contact us!
WWW.OPEN-RND.PL
Thank you
Michał Włodarczyk
SENIOR SOFTWARE DEVELOPER of Open-RnD
michal.wlodarczyk@open-rnd.pl