Design and Implementation of Custom Layout on Android

Basics for creating custom layout extending ViewGroup.
Example layout implementation (FloatingLayout)

https://github.com/yhpark/FloatingLayout

* Presented at Google DevFest W Seoul 2013

Transcript

1. Creating Custom Layout in Android Younghoon Park @ Kakao
2. View
3. View
4. View width paddings margins
5. ViewGroup ViewGroup extends View = View with child Views Hi Hello Hell
6. ViewGroup addView, removeView, getChildAt, .. FrameLayout, LinearLayout, RelativeLayout, AdapterView, ..
7. Custom Layout Layout Logic FrameLayout? LinearLayout? RelativeLayout? AdapterView? MyLayout? YourLayout? Measure -> Layout
8. Custom Layout Layout Logic Measure ! Layout
9. Custom Layout Layout Logic Measure -> Layout
10. Measure (implementing onMeasure)
11. Measure (implementing onMeasure) Measure child views childView.measure(int widthMeasureSpec, int heightMeasureSpec)
12. Measure (implementing onMeasure) Measure child views childView.measure(int widthMeasureSpec, int heightMeasureSpec) Measure itself (using MeasureSpecs) setMeasuredDimension(int measuredWidth, int measuredHeight) MUST be called (or an Exception will be thrown)
13. MeasureSpec = Constraints from parent measure(int widthMeasureSpec, int heightMeasureSpec) onMeasure(int widthMeasureSpec, int heightMeasureSpec)
14. MeasureSpec int - (MMMMSSSSSSSSSSSSSSSSSSSSSSSSSSSS) mode AT_MOST - The child can be as large as it wants up to the specified size. EXACTLY - The parent has determined an exact size for the child. The child is going to be given those bounds regardless of how big it wants to be. UNSPECIFIED - The parent has not imposed any constraint on the child. It can be whatever size it wants. size (px)
15. MeasureSpec Quiz LinearLayout width=”200px” View width=”50px” ! View width=”0dp” weight=”1” !
16. MeasureSpec Quiz LinearLayout width=”200px” View width=”50px” ! View width=”0dp” weight=”1” ! AT_MOST, 200
17. MeasureSpec Quiz LinearLayout width=”200px” View width=”50px” ! View width=”0dp” weight=”1” ! AT_MOST, 200 EXACTLY, 150
18. MeasureSpec MeasureSpec.getMode(int measureSpec) MeasureSpec.getSize(int measureSpec) MeasureSpec.getMeasureSpec(int size, int mode)
19. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom)
20. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft
21. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft child marginLeft
22. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft foo child.measuredWidth child marginLeft
23. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft foo child.measuredWidth child marginLeft child marginRight
24. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft foo child.measuredWidth child marginLeft child marginLeft child marginRight
25. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft foo child.measuredWidth child marginLeft child marginLeft bar child.measuredWidth child marginRight
26. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft foo child.measuredWidth child marginLeft child marginLeft bar child.measuredWidth child marginRight child marginRight
27. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft foo child.measuredWidth child marginLeft child marginLeft bar child.measuredWidth child marginRight child marginRight paddingRight
28. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft foo child.measuredWidth child marginLeft child marginLeft bar child.measuredWidth child marginRight child marginRight paddingRight s
29. Measure ex) LinearLayout (match_parent, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom) paddingLeft foo child.measuredWidth child marginLeft child marginLeft bar child.measuredWidth child marginRight child marginRight paddingRight lorem ipsum... AT_MOST(s) s
30. Measure ex) LinearLayout (wrap_content, wrap_content) height = paddingTop + paddingBottom + max(child height + child marginTop + child marginBottom)
31. Measure helper methods for measuring child (in ViewGroup) measureChild(View child, int parentWidthMeasureSpec, int parentHeightMeasureSpec) measureChildWithMargins(View child, int parentWidthMeasureSpec, int widthUsed, int parentHeightMeasureSpec, int heightUsed)
32. Custom Layout Layout logic Measure ! Layout
33. Layout (implementing onLayout) Layout child views child.layout(int l, int t, int r, int b) Layout itself
34. Layout (implementing onLayout) Layout child views child.layout(int l, int t, int r, int b) Layout itself layout(l,t,r,b) will be called from its parent.
35. Layout layout(int l, int t, int r, int b) or layout(x, y, x + measuredWidth, y + measuredHeight)
36. Custom Layout Layout Logic Measure ! Layout Gravity / Weight
37. Gravity TOP, BOTTOM, CENTER_VERTICAL, LEFT, RIGHT, CENTER_HORIZONTAL, CENTER
38. Gravity TOP, BOTTOM, CENTER_VERTICAL, LEFT, RIGHT, CENTER_HORIZONTAL, CENTER FILL_HORIZONTAL, FILL_VERTICAL, FILL
39. Layout Gravity ex) LinearLayout.java 1449 final int majorGravity = mGravity & Gravity.VERTICAL_GRAVITY_MASK; 1450 final int minorGravity = mGravity & Gravity.RELATIVE_HORIZONTAL_GRAVITY_MASK; 1451 1452 switch (majorGravity) { 1453 case Gravity.BOTTOM: 1454 // mTotalLength contains the padding already 1455 childTop = mPaddingTop + mBottom - mTop - mTotalLength; 1456 break; 1457 1458 // mTotalLength contains the padding already 1459 case Gravity.CENTER_VERTICAL: 1460 childTop = mPaddingTop + (mBottom - mTop - mTotalLength) / 2; 1461 break; 1462 1463 case Gravity.TOP: 1464 default: 1465 childTop = mPaddingTop; 1466 break; 1467 } ... layout(...)
40. Example FloatingLayout
41. FloatingLayout Layout Logic [A BBB CC ] [ ] [ ] [ ] (width fixed)
42. FloatingLayout Layout Logic [A BBB CC ] [ ] [ ] [ ] (width fixed) D
43. FloatingLayout Layout Logic [A BBB CC ] [ ] [ ] [ ] (width fixed) EEEE D
44. FloatingLayout Layout Logic [A BBB CC ] [ ] [ ] [ ] (width fixed) EEEE FFFFFF D
45. FloatingLayout Layout Logic [A BBB CC ] [ ] [ ] [ ] (width fixed) EEEE FFFFFF GG D
46. FloatingLayout onMeasure (xM||xS, yM||yS) Measure children Calculate usedX(per floor), usedY Measure itself
47. FloatingLayout onMeasure (xM||xS, yM||yS) Measure children with... width AT_MOST(xS - paddings) (floor++ when space is not enough) height AT_MOST(yS - heightUsed - paddings)
48. FloatingLayout setMeasuredDimension() Height if yM == AT_MOST usedY if yM == EXACTLY yS Width xM == AT_MOST Max(child.measuredWidth) xM == EXACTLY setMeasuredDimension(xS)
49. FloatingLayout Layout layout children
50. {code}
51. FloatingLayoutV2 Upgrade Support gravity horizontal LEFT / CENTER_HORIZONTAL / RIGHT / FILL_HORIZONTAL(justified) vertical TOP / CENTER_VERTICAL / BOTTOM / FILL_VERTICAL
52. FloatingLayoutV2 (horizontal) Layout children by floor floorContentWidthSum = children’s width(+horizontal margin) sum Calculate “left” by align mode
53. FloatingLayoutV2 A B C floorContentWidthSum
54. case: center FloatingLayoutV2 A B C floorContentWidthSum left left = paddingLeft + (measuredWidth - paddingLeft - paddingRight - floorContentWidthSum) / 2
55. case: fill_horizontal FloatingLayoutV2 A B C emptySplit emptySplit = (measuredWidth - paddingLeft - paddingRight - floorContentWidthSum) / ((children count on current floor) - 1) emptySplit
56. FloatingLayoutV2 (vertical) like horizontal
57. {code}
58. FloatingLayoutV3 Upgrade Support layout_gravity (vertical)
59. FloatingLayoutV3 Upgrade Support layout_gravity (vertical) [AAAA BBB CCC DD] [AAAA BBB CCC DD] [AAAA CCC ] [AAAA ]
60. FloatingLayoutV3 Upgrade Support layout_gravity (vertical) [AAAA DD] [AAAA BBB CCC DD] [AAAA BBB CCC ] [AAAA CCC ] bottom center
61. {code}
62. FloatingLayout github.com/yhpark/FloatingLayout য়ט઺ਵ۽
63. finally Several use cases @ Kakao Ӕࢿ confined use case ! not that hard! (no gravity support?)
64. catch(IDontKnowException e) Q&A
65. Twitter @eie Github yhpark Thank you