360|AnDev: Measure. Layout. Draw. Repeat.

Presentation given at 360|AnDev where Huyen talks about how the basics of how Android draws views and how to get started building custom Views and ViewGroups.

Transcript

1. MEASURE. LAYOUT. DRAW. REPEAT. 1 HUYEN TUE DAO 2016.06.28
2. 2 REUSABILITY/MODULARITY CUSTOM LOOK/BEHAVIOR PERFORMANCE MEASURE. LAYOUT. DRAW. REPEAT. CUSTOM VIEWS. WHY?
3. 3 DIFFICULT TIME-CONSUMING DRAWING/INTERACTIONS/ A11Y → ON YOUR OWN MEASURE. LAYOUT. DRAW. REPEAT. CUSTOM VIEWS. WHY NOT?
4. 4 HOW ANDROID DRAWS VIEWS HOW TO GO CUSTOM DRAW MEASURE VIEW GROUPS LAYOUT MEASURE. LAYOUT. DRAW. REPEAT.
5. R MEASURE LAYOUT DRAW INFLATION/INSTANTIATION DEPTH-FIRST TRAVERSAL HOW ANDROID DRAWS VIEWS onMeasure() onLayout() onDraw()
6. R PARENT PASSES CONSTRAINTS CHILD CALCULATES MEASURED WIDTH/HEIGHT MEASURE HOW ANDROID DRAWS VIEWS onMeasure() LAYOUT onLayout() DRAW onDraw() MEASURE OWN CHILDREN (IF ANY)
7. R PARENT SIZES AND POSITIONS CHILD MEASURE LAYOUT DRAW HOW ANDROID DRAWS VIEWS onMeasure() onLayout() onDraw()
8. PARENT DRAWS PARENT TELLS CHILDREN TO DRAW MEASURE LAYOUT DRAW 0 1 Z parent children HOW ANDROID DRAWS VIEWS onMeasure() onLayout() onDraw()
9. DIFFERENT WAYS TO GO GUSTOM VIEW VIEWGROUP EXTEND EXISTING CUSTOM LAYOUTS ON ANDROID, @LUCASRATMUNDO EXTEND BASE CUSTOM EXTENDED* TWEAK BEHAVIOR ARGUABLY SIMPLEST COMPOSITE MODULAR UI LAYOUT REUSE FLAT CUSTOM CUSTOM DRAWING/BEHAVIOR PERFORMANCE CUSTOM COMPOSITE CUSTOM LAYOUT LOGIC PERFORMANCE
10. WHAT DO YOU NEED TO IMPLEMENT? VIEW MEASURE LAYOUT DRAW onMeasure() onLayout() onDraw() NO NO YES BUT YOU SHOULD REUSABILITY/FLEXIBILITY VIEW HAS NO CHILDREN REQUIRED FOR VIEW TO APPEAR
11. 11 WHAT WE WILL BUILD GREAT, HUH?
13. VIEW CONSTRUCTORS CREATE NEW FROM CODE View(Context context) View(Context context, AttributeSet attrs) CREATE FROM XML View(Context context, AttributeSet attrs, int defStyleAttr) CREATE FROM XML WITH A STYLE FROM A THEME ATTRIBUTE View(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) CREATE FROM XML WITH A STYLE FROM A THEME ATTRIBUTE OR STYLE RESOURCE A DEEP DIVE INTO ANDROID VIEW CONSTRUCTORS @DANLEW42
17. REFLECTING STATE CHANGES MARK A VIEW AS DIRTY (NEEDS A RE-DRAW) invalidate() RE-DRAWN “AT SOME POINT IN THE FUTURE” BE MORE PRECISE: invalidate(int l, int t, int r, int b)
20. THINGS TO REMEMBER WHEN DRAWING NO ALLOCATIONS IN ONDRAW. SERIOUSLY. INVALIDATE ONLY WHEN YOU NEED. INVALIDATE ONLY WHAT YOU NEED. DRAW IN PX. THINK IN DP AND SP. TEXT IS POSITIONED AT THE BASELINE
21. WHERE’S THAT OTHER BUTTON?
22. HOW MEASUREMENTS ARE MADE CHILD PARENT android:layout_width="match_parent" android:layout_height="wrap_content" setLayoutParams() How a child tells its parent how it wants to be laid out. MarginLayoutParams LinearLayout.LayoutParams 1Child defines LayoutParams in XML or Java getLayoutParams()
23. HOW MEASUREMENTS ARE MADE CHILD PARENT How a parent communicates constraints to children child.measure() int = { mode | size } AT_MOST X → Be any size up to X EXACTLY X → Be exactly X UNSPECIFIED → No constraints 1 2 Child defines LayoutParams in XML or Java Parent calculates MeasureSpecs and passes to child.measure()
24. HOW MEASUREMENTS ARE MADE Must call; otherwise → runtime exception. resolveSize(int size, int measureSpec) CHILD PARENT setMeasuredDimension() 1 2 3 Child defines LayoutParams in XML or Java Parent calculates MeasureSpecs and passes to child.measure() Child calculates width/height; setMeasuredDimension() getMeasuredWidth() getMeasuredHeight()
25. HOW MEASUREMENTS ARE MADE Child defines LayoutParams in XML or Java 1 Parent calculates MeasureSpecs and passes to child.measure() 2 Child calculates width/height; setMeasuredDimension() 3 Parent calls child.layout(); final child size/position. 4 CHILD PARENT child.layout() getWidth() getHeight()
26. HOW MEASUREMENTS ARE MADE Child defines LayoutParams in XML or Java 1 Parent calculates MeasureSpecs and passes to child.measure() 2 Child calculates width/height; setMeasuredDimension() 3 Parent calls child.layout(); final child size/position. 4 CHILD PARENT child.layout() getWidth() getHeight()
30. WHAT DO YOU NEED TO IMPLEMENT? VIEWGROUP MEASURE LAYOUT DRAW onMeasure() onLayout() onDraw() YES YES NO HAVE TO MEASURE EACH CHILD: child.measure() (ABSTRACT) HAVE TO LAYOUT EACH CHILD: child.layout() DOES NOT DRAW BY DEFAULT setWillNotDraw
34. CUSTOM LAYOUT PARAMETERS VALIDATE checkLayoutParams() generateDefaultLayoutParams() VIEW WITHOUT LAYOUT PARAMETERS generateLayoutParams(ViewGroup.LayoutParams p) VIEW WITH INVALID LAYOUT PARAMETERS generateLayoutParams(AttributeSet attrs) VIEW WITH LAYOUT XML ATTRIBUTES ViewGroup.LayoutParams (width, height) MarginLayoutParams (width, height) (left, top, right, bottom)
35. USEFUL MEASUREMENT METHODS measureChild(…) measureChildWithMargins(…) measureChildren(…) getChildMeasureSpec(…) MEASURE SPEC + PADDING MEASURE SPEC + PADDING + MARGINS MEASURE SPEC + CHILD LAYOUT PARAMETERS
40. WHERE TO GO FROM HERE ACCESSIBILITY. A11Y FTW. ADD IT. @KELLYSHUSTER CUSTOM DRAWABLES. CUSTOM DRAWABLE STATES. @RHARTER @MARCOSPAULOSD ALL THE DRAWING OPERATIONS. PATHS. FILTERS. SHADERS. OH MY! @ROMAINGUY @CHIUKI HARDWARE ACCELERATION. LEARN ABOUT LAYERS + DISPLAY LISTS. @WORKINGKILLS GO CUSTOM. TOUCH. GESTURES. @PBREAULT
41. HUYEN TUE DAO @queencodemonkey +HuyenTueDao randomlytyping.com youtube.com/androiddialogs caster.io/instructors/huyen-tue-dao speakerdeck.com/queencodemonkey THANK YOU!
42. CUSTOM VIEWS/VIEWGROUPS Custom Views and ViewGroups (Part 1) https://caster.io/episodes/ custom-views-and-viewgroups-part-1/ Creating Custom Views https://developer.android.com/training/custom- views/index.html A deep dive into Android View constructors http://blog.danlew.net/ 2016/07/19/a-deep-dive-into-android-view-constructors/ Google I/O 2013 - Writing Custom Views for Android https://youtu.be/ NYtB6mlu7vA Enhancing Android UI with Custom Views https://newcircle.com/s/post/ 1663/ tutorial_enhancing_android_ui_with_custom_views_dave_smith_video 42
43. CUSTOM VIEW/VIEWGROUPS Custom Android Components http://chiuki.github.io/android-custom- components Custom Views and Performance https://youtu.be/zK2i7ivzK7M Taming Android UIs with Eric Burke of Square https://youtu.be/ jF6Ad4GYjRU Custom Layouts on Android http://lucasr.org/2014/05/12/custom- layouts-on-android/ Layout traversals on Android https://youtu.be/sdkcuvZCh1U Custom View Groups https://sriramramani.wordpress.com/ 2015/05/06/custom-viewgroups/ 43
44. TOUCH/GESTURES Making Sense of the Touch System https://speakerdeck.com/ pbreault/making-sense-of-the-touch-system | https:// youtu.be/usBaTHZdXSI Making the View Interactive https://developer.android.com/ training/custom-views/making-interactive.html 44
45. TEXT + DRAWING Typography on Android https://youtu.be/OgiZa22Zpus Android Textual Layout https://youtu.be/GZ0eKqvzJa8 Hinting Around: Text Demystified https:// www.youtube.com/watch?v=VS7co3TrgKE | https:// speakerdeck.com/rock3r/hinting-around-android-text- demystified Calligraphy. Custom fonts in Android the easy way… https://github.com/chrisjenx/Calligraphy 45
46. DRAWING + DRAWABLES Fun with Android Shaders and Filters https://chiuki.github.io/ android-shaders-filters Don’t Fear the Canvas https://youtu.be/KH8Ldp39TUk Custom drawable states in Android http://charlesharley.com/2012/ programming/custom-drawable-states-in-android Custom Drawables http://ryanharter.com/blog/2015/04/03/ custom-drawables/ The Magic World of Drawables https://youtu.be/1YjB1uUfxgE Hardware Acceleration https://developer.android.com/guide/ topics/graphics/hardware-accel.html 46