CUSTOM LAYOUTS Droidcon UK, 2014 

LUCAS ROCHA +LucasRocha | @lucasratmundo 

No content

LAYOUT is at the heart of every UI toolkit. 

SIZE + POSITION 

MEASURE LAYOUT DRAW 

THE TRAVERSAL 

THE TRAVERSAL http://devfest.gdg-london.com 

PERFORMANCE 1. Number of views 2. Computational cost 

# OF VIEWS Compound drawables, spannables, drawables, etc. 

LAYOUT COST Avoid multi-pass layout features. Depth matters. 

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

WHY CUSTOM? Simplify view hierarchy, performance, missing features. 

MANY SHAPES Composite, custom, flat, async flat. https://lucasr.org/?p=3920 

BUILDING BLOCKS Methods LayoutParams MeasureSpec MATCH_PARENT WRAP_CONTENT DIMENSION EXACTLY AT_MOST UNSPECIFIED onMeasure() onLayout() measureChild*() ... 

MINDSET Cheat & simplify. You're not creating a general-purpose layout. 

THE ULTIMATE GUIDE FOR CUSTOM LAYOUT DEVELOPMENT 

LET'S DO THIS https://github.com/lucasr/android-layout-samples 

STRUCTURE public class TweetLayout extends ViewGroup { public TweetLayoutView(Context context, AttributeSet attrs) { super(context, attrs, defStyleAttr); LayoutInflater.from(context) .inflate(R.layout.tweet_layout, this, true); mProfileImage = (ImageView) findViewById(R.id.profile_image); ... } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { ... } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { ... } } 

LAYOUT FILE ... 

onMeasure() 1. Measure one child 2. Update consumed width/height 

MEASURE 

MEASURE 

MEASURE 

MEASURE 

MEASURE 

MEASURE 

MEASURE 

MEASURE @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { ... int widthUsed = 0; int heightUsed = 0; measureChildWithMargins(mProfileImage, widthMeasureSpec, widthUsed, heightMeasureSpec, heightUsed); widthUsed += getMeasuredWidthWithMargins(mProfileImage); measureChildWithMargins(mAuthorText, widthMeasureSpec, WidthUsed, heightMeasureSpec, heightUsed); heightUsed += getMeasuredHeightWithMargins(mAuthorText); measureChildWithMargins(mMessageText, widthMeasureSpec, WidthUsed, heightMeasureSpec, heightUsed); heightUsed += getMeasuredHeightWithMargins(mMessageText); ... setMeasuredDimension(widthSize, heightSize); } 

onLayout() 1. Layout one child 2. Update current vert/hor offset 

LAYOUT @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int currentTop = paddingTop; layoutView(mProfileImage, paddingLeft, currentTop, mProfileImage.getMeasuredWidth(), mProfileImage.getMeasuredHeight()); final int contentLeft = getWidthWithMargins(mProfileImage) + paddingLeft; final int contentWidth = r - l - contentLeft - getPaddingRight(); layoutView(mAuthorText, contentLeft, currentTop, contentWidth, mAuthorText.getMeasuredHeight()); currentTop += getHeightWithMargins(mAuthorText); layoutView(mMessageText, contentLeft, currentTop, contentWidth, mMessageText.getMeasuredHeight()); currentTop += getHeightWithMargins(mMessageText); ... } 

PROFIT. Before After 

RECYCLING Hard to implement. No extensible layout API—until recently. 

RECYCLER VIEW Framework for view recycling layouts. 

LOW-LEVEL 1. Track visible viewport 2. Recycle views out of bounds 3. Appearing/disappearing views 4. Scroll to position 5. State restoration ... 

TWOWAY VIEW RecyclerView made simple. https://github.com/lucasr/twoway-view 

SIMPLE BASE TwoWayLayoutManager to the rescue! 

HOW IT WORKS measureChild() START END layoutChild() canAddMoreViews() Direction 

LET'S DO THIS http://bit.ly/twowayview-simplelistlayout 

STRUCTURE public class SimpleListLayout extends TwoWayLayoutManager { public SimpleListLayout(Context context, Orientation orientation) { super(context, orientation); } @Override protected void measureChild(View child, Direction direction) { ... } @Override protected void layoutChild(View child, Direction direction) { ... } @Override protected boolean canAddMoreViews(Direction direction, int limit) { ... } } 

MEASURE @Override protected void measureChild(View child, Direction direction) { measureChildWithMargins(child, 0, 0); } 

LAYOUT @Override protected void layoutChild(View child, Direction direction) { final int width = getDecoratedMeasuredWidth(child); final int height = getDecoratedMeasuredHeight(child); final int l, t, r, b; if (getOrientation() == Orientation.VERTICAL) { l = getPaddingLeft(); t = direction == Direction.END ? getLayoutEnd() : getLayoutStart() - height; } else { l = direction == Direction.END ? getLayoutEnd() : getLayoutStart() - width; t = getPaddingTop(); } r = l + width; b = t + height; layoutDecorated(child, l, t, r, b); } 

VIEWPORT CONTROL @Override protected boolean canAddMoreViews(Direction direction, int limit) { if (direction == Direction.END) { return getLayoutEnd() < getEndWithPadding(); } else { return getLayoutStart() > getStartWithPadding(); } } 

NOT JUST THAT Scroll to position, state restoration, accessibility, keyboard nav, etc. 

QUESTIONS? +LucasRocha | @lucasratmundo