Save 37% off PRO during our Black Friday Sale! »

ConstraintLayout_devfest.pdf

 ConstraintLayout_devfest.pdf

This talk will be held at the GDG Devfest, Romainia in Bucharest on Nov, 25th.

D0ed2f28dd13ddfb192ebe198623924c?s=128

Wolfram Rittmeyer

November 21, 2016
Tweet

Transcript

  1. None
  2. Why yet another layout • Flat hierarchy – Simpler layouts

    – Faster
  3. Basics • Normal ViewGroup • Similar to RelativeLayout – But

    more flexible • Similar to iOS' AutoLayout – But less crazy • Separate library (like RecyclerView) • Backwards compatible to v9 (yikes!)
  4. Project Initialization compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' • Android Studio 2.2 or later

    • Up to date Android Support Repository • Build.gradle: • Default for new projects in 2.3 canary
  5. What are Constraints • Define appearence of view with repect

    to – Size – Position – Visibility
  6. Concepts • Cassowary algorithm – Used also in Apple's AutoLayout

    • iOS 6 / iPhone 5 – before for OS X development – And on the web
  7. Concepts • Cassowary algorithm – Used also in Apple's AutoLayout

    • iOS 6 / iPhone 5 – before for OS X development – And on the web
  8. Concepts • New LayoutEditor – Blueprint and preview view –

    Create constraints – Define properties • XML still usable – Good for pull requests / code reviews
  9. None
  10. None
  11. View sizes • wrap_content • fixed sized • Stretched (0dp)

    • no match_parent – AS eventually will change this to 0dp
  12. Visibility • View.GONE • As the view taking up 0dp

    size • No margin • Extra margins to View.GONE targets possible – For example: layout_goneMarginStart="16dp" – Currently XML only
  13. Guidelines • Proper views – But • 0dp sized •

    Not drawn • Not layouted • Can represent percentages
  14. Chains • Created by constraining views to each other •

    Useful for – positioning the chain itself – Creating views of the same size – Spreading views equally • Default: Spread
  15. wrap_content • CL can be set to wrap_content • Uses

    sizes defined with android:minWith android:minHeight
  16. CL programmatically • Use ConstraintSet • Works great when cloning

    from a layout • Not so much when trying to do everything by code
  17. CL programmatically ConstraintSet set = new ConstraintSet(); set.clone(container); set.clear(R.id.btn_ok, ConstraintSet.START);

    set.connect(R.id.btn_ok, ConstraintSet.END, R.id.constraintLayout, ConstraintSet.END, 48); set.applyTo(container);
  18. CL programmatically ConstraintSet set = new ConstraintSet(); set.clone(container); set.clear(R.id.btn_ok); set.constrainHeight(R.id.btn_ok,

    ConstraintSet.WRAP_CONTENT); set.constrainWidth(R.id.btn_ok, ConstraintSet.WRAP_CONTENT); set.connect(R.id.btn_ok, ConstraintSet.END, R.id.constraintLayout, ConstraintSet.END, 48); set.applyTo(container);
  19. CL programmatically ConstraintSet set = new ConstraintSet(); set.clone(container); set.clear(R.id.btn_ok); set.constrainHeight(R.id.btn_ok,

    ConstraintSet.WRAP_CONTENT); set.constrainWidth(R.id.btn_ok, ConstraintSet.WRAP_CONTENT); set.connect(R.id.btn_ok, ConstraintSet.END, R.id.constraintLayout, ConstraintSet.END, 48); set.applyTo(container);
  20. Packages

  21. Packages

  22. CL vs. AutoLayout Maybe I'm a bit biased, but...

  23. None
  24. None
  25. None
  26. None
  27. None
  28. CL vs. AutoLayout • CL much simpler to handle •

    CL less powerful – Inequalities and priorities • Android's XML easier to understand • No guidelines in AutoLayout
  29. Some bugs • Sometime heavy on CPU (especially device view)

    while designing • Layout preview wrong for unconstrained views • Textalignment neglected in blueprint design • Layout editor creates left/right instead of start/end • AutoConnect sometimes leaves views unconstrained • Chain preview in blueprint is broken
  30. Missing features • Zoom with Ctrl-Mousewheel – This is a

    must have for the editor's usability • Indicator for chains in component tree
  31. Some nice to haves • 0dp as possible size in

    editor drop-down • Yellow instead of red indicator for lint warnings
  32. Future work • Performance enhancements • Logical containers 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/ConstraintLayout.html
  33. More Material • Google IO talk about ConstraintLayout: https://www.youtube.com/watch?v=sO9aX87hq9c •

    CodeLab by Google: https://codelabs.developers.google.com/codelabs/constraint- layout/index.html
  34. 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/constraint/package- summary.html
  35. None