Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Droidcon NYC 2016: Measure. Layout. Draw. Repeat.

Huyen Tue Dao
September 30, 2016
720

Droidcon NYC 2016: Measure. Layout. Draw. Repeat.

Huyen's talk from Droidcon NYC 2016 about creating custom Views and ViewGroups.

Huyen Tue Dao

September 30, 2016
Tweet

Transcript

  1. MEASURE.
    LAYOUT.
    DRAW.
    REPEAT.
    1
    HUYEN TUE DAO
    @QUEENCODEMONKEY

    View Slide

  2. 2
    REUSABILITY/MODULARITY
    CUSTOM LOOK/BEHAVIOR
    PERFORMANCE
    MEASURE.
    LAYOUT.
    DRAW.
    REPEAT.
    CUSTOM VIEWS.
    WHY?

    View Slide

  3. 3
    DIFFICULT
    TIME-CONSUMING
    DRAWING/INTERACTIONS/
    A11Y → ON YOUR OWN
    MEASURE.
    LAYOUT.
    DRAW.
    REPEAT.
    CUSTOM VIEWS.
    WHY NOT?

    View Slide

  4. 4
    HOW ANDROID DRAWS VIEWS
    HOW TO GO CUSTOM
    DRAW
    MEASURE
    VIEW GROUPS
    LAYOUT
    MEASURE.
    LAYOUT.
    DRAW.
    REPEAT.

    View Slide

  5. R
    MEASURE
    LAYOUT
    DRAW
    INFLATION/INSTANTIATION
    DEPTH-FIRST
    TRAVERSAL
    HOW ANDROID
    DRAWS VIEWS
    onMeasure()
    onLayout()
    onDraw()

    View Slide

  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)

    View Slide

  7. R
    PARENT SIZES AND
    POSITIONS CHILD
    MEASURE
    LAYOUT
    DRAW
    HOW ANDROID
    DRAWS VIEWS
    onMeasure()
    onLayout()
    onDraw()

    View Slide

  8. PARENT DRAWS
    PARENT TELLS
    CHILDREN TO DRAW
    MEASURE
    LAYOUT
    DRAW
    0
    1
    Z
    parent
    children
    HOW ANDROID
    DRAWS VIEWS
    onMeasure()
    onLayout()
    onDraw()

    View Slide

  9. DIFFERENT WAYS TO
    GO CUSTOM
    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

    View Slide

  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

    View Slide

  11. 11
    WHAT WE WILL BUILD
    GREAT, HUH?

    View Slide

  12. 12

    View Slide

  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

    View Slide

  14. 14

    View Slide

  15. 15

    View Slide

  16. 16

    View Slide

  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)

    View Slide

  18. 18

    View Slide

  19. 19

    View Slide

  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

    View Slide

  21. WHERE’S THAT OTHER
    BUTTON?

    View Slide

  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()

    View Slide

  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()

    View Slide

  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()

    View Slide

  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()

    View Slide

  26. 26
    IRL USE resolveSize

    View Slide

  27. 27

    View Slide

  28. 28

    View Slide

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

    View Slide

  30. 30

    View Slide

  31. 31

    View Slide

  32. 32

    View Slide

  33. 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)

    View Slide

  34. USEFUL
    MEASUREMENT
    METHODS
    measureChild(…)
    measureChildWithMargins(…)
    measureChildren(…)
    getChildMeasureSpec(…)
    MEASURE SPEC + PADDING
    MEASURE SPEC + PADDING + MARGINS
    MEASURE SPEC + CHILD LAYOUT PARAMETERS

    View Slide

  35. 35

    View Slide

  36. 36

    View Slide

  37. 37

    View Slide

  38. 38

    View Slide

  39. 39

    View Slide

  40. 40

    View Slide

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

    View Slide

  42. randomlytyping.com
    youtube.com/androiddialogs
    caster.io
    speakerdeck.com/queencodemonkey
    HUYEN TUE DAO
    @QUEENCODEMONKEY
    THANK
    YOU!

    View Slide

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

    View Slide

  44. 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/
    44

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide