LAYOUT TRAVERSALS Devfest London, 2014 

LUCAS ROCHA +LucasRocha | @lucasratmundo 

No content

BE DELIBERATE Less handwaviness in your UI code 

UI TOOLKITS Layout + Rendering + Input Events 

TICK TOCK VSYNC sets the pace. 

CHOREOGRAPHER f1 f2 f3 f4 f5 . . . . . . VSYNC (60fps) Resize view Redraw view Input Events 

CHOREOGRAPHER 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.java 

ViewRootImpl Connects WindowManager with the View framework 

ViewRootImpl * 

FRAMEWORK Measure + Layout + Draw 

TRAVERSAL * performTraversals() f2 performTraversals() 

MEASURE * measure(int, int) f2 M M M M M M → onMeasure(int, int) measureHierarchy(...) 

LAYOUT * f2 M L M L M L M L M L M L layout(int, int, int, int) → onLayout(boolean, int, int, int, int) performLayout() 

DRAW * f2 M L D M L D M L D M L D M L D M L D draw(Canvas) → onDraw(Canvas) performDraw() 

CHANGES Resize, redraw & animate. 

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

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

* Invalidate(...) f1 f2 f3 f4 f5 . . . . . . 

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

* postOnAnimation() f1 f2 f3 f4 f5 . . . . . . ValueAnimator ... 

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

LAZY MEASURE Multi-MeasureSpec cache, invalidated in requestLayout() 

LAZY MEASURE 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; } ... } View.java 

LAZY MEASURE 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; } ... } View.java 

BASIC TIPS 1. No layout requests during layout 2. No layout requests during animations 3. Invalidate regions when possible 

PERFORMANCE 1. Simplify your view hierarchy 2. Avoid multi-pass measurement 

GO CUSTOM Simplify view hierarchy, performance, missing features. http://lucasr.org/?p=3920 

TREE OBSERVER Use OnPreDrawListener! 

TRANSITIONS http://lucasr.org/?p=3902 

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

PROBE IT! Intercept view methods. Dissect layout traversals. https://github.com/lucasr/probe 

OVERRIDE VIEW METHODS public class DrawGreen extends Interceptor { private final Paint mPaint; public DrawGreen() { mPaint = new Paint(); mPaint.setColor(Color.GREEN); } @Override public void onDraw(View view, Canvas canvas) { canvas.drawPaint(mPaint); } } 

DEPLOY public final class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { Probe.deploy(this, new DrawGreen(), new Filter.ViewId(R.id.view2)); super.onCreate(savedInstanceState); setContentView(R.id.main_activity); } } 

WRAP VIEW METHODS public class LogRequestLayout extends Interceptor { @Override public void requestLayout(View view) { super.requestLayout(view); Log.d(LOGTAG, “requestLayout() on ” + view); } } 

QUESTIONS? +LucasRocha | @lucasratmundo