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

Droidcon London 2016: A New View, Layout Editor...

Droidcon London 2016: A New View, Layout Editor + ConstraintLayout

Huyen's talk from Droidcon London 2016, where she discusses the new ConstraintLayout and its complementary UI Builder in the Layout Editor. She gives an overview of the various ways of creating constraints and the tools available in the UI Builder for full utilizing the ConstraintLayout.

Huyen Tue Dao

October 27, 2016
Tweet

More Decks by Huyen Tue Dao

Other Decks in Programming

Transcript

  1. CONSTRAINTLAYOUT 4 LAYOUT EDITOR REVAMPED. GOAL: NATURAL WAY OF BUILDING

    UI. MORE EXPRESSIVE, MORE PERFORMANT LAYOUT FLATTEN HIERARCHIES COMPLEXITY ∝ IMPORTANCE OF UI BUILDER EXTENSIBLE
  2. LAYOUT EDITOR + CONSTRAINTLAYOUT 5 FASTER TO CREATE CONSTRAINTS. TOOLS.

    ERROR CHECKING. VISUALIZE POSITION AND CONNECTIONS. UX FOR DEVELOPERS. MOTION → UNDERSTANDING.
  3. 7

  4. 8

  5. 9

  6. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER POSITION FIXED WRAP CONTENT ANY

    SIZE/MATCH CONSTRAINT RATIO EDGE CENTER BASELINE DIMENSION HELPERS GUIDELINE CONSTRAINTSET
  7. POSITION CONSTRAINT NOTES EDGE CONSTRAINTS CONSIST OF SOURCE + TARGET.

    BIAS OF A CENTER CONSTRAINT → DISTRIBUTION OF (AVAILABLE SPACE — MARGINS) EDGE SOURCE + TARGET MUST BE ON THE SAME AXIS. OPPOSITE EDGE CONSTRAINTS → CENTER CONSTRAINT BASELINE CONSTRAINT → ANOTHER BASELINE
  8. 18

  9. POSITION CONSTRAINT NOTES CONSTRAINTS CONSIST OF SOURCE + TARGET. BIAS

    OF A CENTER CONSTRAINT → DISTRIBUTION OF (AVAILABLE SPACE — MARGINS) EDGE SOURCE + TARGET MUST BE ON THE SAME AXIS. OPPOSITE EDGE CONSTRAINTS → CENTER CONSTRAINT BASELINE CONSTRAINT → ANOTHER BASELINE
  10. 20

  11. POSITION CONSTRAINT NOTES CONSTRAINTS CONSIST OF SOURCE + TARGET. BIAS

    OF A CENTER CONSTRAINT → DISTRIBUTION OF (AVAILABLE SPACE — MARGINS) EDGE SOURCE + TARGET MUST BE ON THE SAME AXIS. OPPOSITE EDGE CONSTRAINTS → CENTER CONSTRAINT BASELINE CONSTRAINT → ANOTHER BASELINE
  12. 22

  13. 23

  14. POSITION CONSTRAINT NOTES CONSTRAINTS CONSIST OF SOURCE + TARGET. BIAS

    OF A CENTER CONSTRAINT → DISTRIBUTION OF (AVAILABLE SPACE — MARGINS) EDGE SOURCE + TARGET MUST BE ON THE SAME AXIS. OPPOSITE EDGE CONSTRAINTS → CENTER CONSTRAINT BASELINE CONSTRAINT → ANOTHER BASELINE
  15. 25

  16. DIMENSION CONSTRAINT NOTES FAMILIAR: FIXED. WRAP CONTENT. ANY SIZE (MATCH_CONSTRAINT/0DP)

    → ALL AVAILABLE SPACE TO SATISFY CONSTRAINT NO MATCH PARENT CAUGHT BY ERROR CHECKING RATIO → ONE DIMENSION DEFINED AS RATIO OF OTHER, W:H
  17. 27

  18. 28

  19. 29

  20. 30

  21. GUIDELINE NOTES VIEW SUBCLASS STRICTLY FOR LAYOUT FIXED FROM START.

    FIXED FROM END. PERCENTAGE. ACT AS A TARGET FOR CONSTRAINTS SIZE OF 0 + VISIBILITY GONE
  22. 32

  23. WHAT HAPPENS WHEN VIEWS ARE GONE? GONE VIEWS STILL INCLUDED

    IN LAYOUT DIMENSIONS ARE 0 → BECOMES A POINT CONSTRAINTS TO OTHER WIDGETS RESPECTED. MARGINS → 0. CAN HAVE ALTERNATIVE MARGIN WHEN TARGET OF A CONSTRAINT IS GONE.
  24. 34

  25. 35

  26. 36

  27. CHAINS. CHAINS. CHAINS. PROVIDE GROUP BEHAVIOR WITHOUT SUB LAYOUT LINEAR.

    HORIZONTAL OR VERTICAL. DEFINED BY SERIES OF BIDIRECTIONAL CONSTRAINTS EACH CHAIN HAS HEAD. LEFTMOST/TOPMOST.
  28. 39

  29. 40

  30. 3 WAYS TO CREATE CONSTRAINTS MANUALLY IN BLUEPRINT/DESIGN VIEW AUTOCONNECT

    SELECTED WIDGET TO OTHERS INFERENCE → CONSTRAINTS AMONG ALL VIEWS
  31. 42

  32. 43

  33. ALRIGHT. PERFORMANCE. MAIN BENEFIT COMES FROM FLATTENING HIERARCHIES COMPARISONS TO

    THAT OTHER LAYOUT DEPENDENT ON DEVICE/RUNTIME. WIP. DOUBLE MEASURE/LAYOUT PASSES? YES FOR MATCH CONSTRAINT. WIP. SERIOUSLY THOUGH IT’S ALL ABOUT FLAT AND FLEXIBLE
  34. WHO TO FOLLOW TEAM CONSTRAINTLAYOUT NICOLAS ROARD @CAMAELON ROMAIN GUY

    @ROMAINGUY JOHN HOFORD @JOHNHOFORD STYLING ANDROID MARK ALLISON @MARKIALLISON GROKKING ANDROID WOLFRAM RITTMEYER @RITTMEYERW WIRES ARE OBSOLETE DAVE SMITH @DEVUNWIRED
  35. REFERENCES 47 CONSTRAINT LAYOUT APIS DOCUMENTATION https://developer.android.com/reference/android/support/constraint/package-summary.html BUILD A RESPONSIVE

    UI WITH CONSTRAINTLAYOUT developer.android.com/training/constraint-layout/index.html ANDROID DEVELOPERS BACKSTAGE: EPISODE 50: CONSTRAINT LAYOUT androidbackstage.blogspot.com/2016/06/episode-50-constraint-layout.html USING CONSTRAINTLAYOUT TO DESIGN YOUR VIEWS | CODE LABS codelabs.developers.google.com/codelabs/constraint-layout/index.html ANDROID LAYOUTS: A NEW WORLD | GOOGLE I/O 2016 https://youtu.be/sO9aX87hq9c CONSTRAINTLAYOUT https://speakerdeck.com/writtmeyer/constraintlayout-1
  36. REFERENCES 48 CONSTRAINTLAYOUT – PART 1 blog.stylingandroid.com/constraintlayout-part-1/ CONSTRAINTLAYOUT, INSIDE AND

    OUT: PART 1 http://wiresareobsolete.com/2016/07/constraintlayout-part-1/ SOME THOUGHTS ON ANDROID’S NEW CONSTRAINTLAYOUT AND ANDROID STUDIO’S NEW DESIGN EDITOR http://www.grokkingandroid.com/thoughts-on-constraintlayout-and-design-editor/ BUILD A UI WITH LAYOUT EDITOR developer.android.com/studio/write/layout-editor.html WHAT'S NEW IN ANDROID DEVELOPMENT TOOLS | GOOGLE I/O 2016 https://youtu.be/csaXml4xtN8 THE EXPERTS' GUIDE TO ANDROID DEVELOPMENT TOOLS | GOOGLE I/O 2016 https://youtu.be/hHnTIMjd1Y8