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

Grokking the ConstraintLayout

Grokking the ConstraintLayout

Talk held at droidcon, Italy on April, 7th 2017

D0ed2f28dd13ddfb192ebe198623924c?s=128

Wolfram Rittmeyer

April 07, 2017
Tweet

Transcript

  1. None
  2. Why yet another layout Why yet another layout • Flat

    hierarchy – Simpler layouts – Faster
  3. Basics Basics • Normal ViewGroup • Similar to RelativeLayout –

    But more flexible • Similar to Apple‘s AutoLayout • Separate library (like RecyclerView) • Backwards compatible to v9
  4. Project Initialization Project Initialization compile { 'com.android.support.constraint:constraint-layout:1.0.2' } • Android

    Studio 2.2 or later – I recommend to use the 2.4 preview • Up to date Android Support Repository • Build.gradle:
  5. What are Constraints What are Constraints • Define appearence of

    view with respect to – Size – Position – Visibility
  6. Concepts Concepts • LayoutEditor – Blueprint and preview view –

    Create constraints – Define properties • XML still usable – Good for pull requests / code reviews
  7. Concepts Concepts • Cassowary algorithm – Also used in Apple's

    AutoLayout • iOS 6 / iPhone 5 – before for OS X development – And on the web (Constraint CSS)
  8. Blueprint Editor Blueprint Editor

  9. None
  10. View sizes View sizes • wrap_content • fixed sized •

    Stretched (0dp / match_constraint) – No match_parent for CL children
  11. Visibility Visibility • View.GONE – View takes up 0dp size

    – Constraints held up transitively – View has no margin – Extra margins to View.GONE targets possible • For example: layout_goneMarginStart="16dp" • Currently XML only
  12. Guidelines Guidelines • Proper views – But • 0dp sized

    • Not drawn • Not layouted • Can represent percentages
  13. Aspect Ratio Aspect Ratio • For match_constraint views • Constraints

    size of – one explicitly stated side of the view – Or both depending on available space
  14. Chains Chains • Created by constraining views to each other

    • Useful for – positioning the chain itself – Creating views of the same size – Spreading views equally
  15. Chains Chains • Three modes: – packed • Variation: packed

    with bias – Determines the positioning of the packed chain – spread – spread inside • Variation: spread with weights (as with LinearLayout) – Determines the distribution of chain elements
  16. Chains Chains

  17. Chains Chains

  18. Chains Chains

  19. Chains Chains • One View can be part of multiple

    chains
  20. wrap_content wrap_content • CL can be set to wrap_content •

    Uses sizes defined with android:minWidth android:minHeight
  21. CL programmatically CL programmatically • Use ConstraintSet • Works great

    when cloning from a layout • You don‘t want to do everything in code • Easily usable for changing constraints at runtime
  22. CL programmatically CL programmatically TransitionManager.beginDelayedTransition(layout); ConstraintSet set = new ConstraintSet();

    set.clone(layout); set.clear(R.id.btn_move, ConstraintSet.END); set.connect(R.id.btn_move, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, margin); set.applyTo(layout);
  23. CL programmatically CL programmatically TransitionManager.beginDelayedTransition(layout); ConstraintSet set = new ConstraintSet();

    set.clone(layout); set.clear(R.id.btn_move); set.constrainHeight(R.id.btn_move, ConstraintSet.WRAP_CONTENT); set.constrainWidth(R.id.btn_move, ConstraintSet.WRAP_CONTENT); set.connect(R.id.btn_move, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, margin); // another connect for vertical position also needed set.applyTo(layout);
  24. CL programmatically CL programmatically TransitionManager.beginDelayedTransition(layout); ConstraintSet set = new ConstraintSet();

    set.clone(layout); set.clear(R.id.btn_move); set.constrainHeight(R.id.btn_move, ConstraintSet.WRAP_CONTENT); set.constrainWidth(R.id.btn_move, ConstraintSet.WRAP_CONTENT); // another connect for vertical position also needed set.connect(R.id.btn_move, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, margin); set.applyTo(layout);
  25. CL vs. AutoLayout CL vs. AutoLayout Maybe I'm a bit

    biased, but...
  26. None
  27. None
  28. None
  29. None
  30. None
  31. CL vs. AutoLayout CL vs. AutoLayout • CL much simpler

    to handle • CL less powerful – Inequalities and priorities • Android's XML easier to understand • No guidelines in AutoLayout • View.GONE equivalent in AutoLayout requires ton of extra work
  32. Some bugs Some bugs • Sometimes superfluous absoluteX/absoluteY attributes •

    Preview wrong for unconstrained views – Alas, Google did this on purpose • match_constraint bug for packed chains – treated as View without width
  33. Some more bugs Some more bugs • LE sometimes omits

    margins • LE looses zoom level when switching view types • LE doesn‘t always show bias handles • LE has difficulties with start/end • Conversion of Layouts in 2.4 buggy
  34. Some nice to haves Some nice to haves • Yellow

    instead of red indicator for warnings • Indicator for chains in component tree • ConstraintSet.clone() as factory methods
  35. Future work Future work • No I/O talk about layouts

    scheduled
  36. Future work Future work • No I/O talk about layouts

    scheduled • But one about the layout editor
  37. Future work Future work • And this is still in

    the docs: ConstraintLayout is available as a support library ... As such, we are planning in enriching its API and capabilities over time. https://developer.android.com/reference/android/support/constraint/Constraint Layout.html
  38. Even More Material Even More Material • Google training https://developer.android.com/training/constraint-

    layout/index.html • Layout Editor User Guide https://developer.android.com/studio/write/layout-editor.html • API reference https://developer.android.com/reference/android/support/constr aint/package-summary.html
  39. None