DevFest MN 2017: Cool ConstraintLayout

Huyen's talk from DevFest MN 2017 giving examples of some cool features in ConstraintLayout.

Transcript

1. HUYEN TUE DAO @QUEENCODEMONKEY COOL CONSTRAINT LAYOUT
2. COOL THINGS ABOUT CONSTRAINT LAYOUT COOL THINGS TO DO WITH CONSTRAINT LAYOUT
3. WHAT IS THE CONSTRAINT LAYOUT?
4. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER
5. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER POSITION FIXED WRAP CONTENT MATCH CONSTRAINT RATIO EDGE CENTER BASELINE DIMENSION OTHER THINGS GUIDELINE CONSTRAINTSET CHAINS
6. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER LINEAR SYSTEM OF EQUATIONS
7. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER CASSOWARY LINEAR ARITHMETIC CONSTRAINT SOLVING ALGORITHM VIEW BOUNDS
8. BASIC TYPES OF CONSTRAINTS
9. RATIOS, GUIDELINES, AND CHAINS, OH MY!
10. public class SquareImageView extends ImageView { @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 
 final int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
 setMeasuredDimension(size, size);
 }
11. <ImageView
 android:id=“@+id/square_image”
 android:layout_width="0dp"
 android:layout_height="0dp"
 app:layout_constraintDimensionRatio=“W,1:1"
12. CHAINS. CHAINS. CHAINS.
13. <TextView
 android:id=“@+id/head_of_spread_inside”
 app:layout_constraintHorizontal_chainStyle="spread_inside"
 … /> SPREAD INSIDE CHAIN
14. <TextView
 android:id=“@+id/weighted_chain_head
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintHorizontal_chainStyle="spread"
 app:layout_constraintHorizontal_weight="1"
 … /> <TextView
 android:id=“@+id/next android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintHorizontal_weight="2"
 … /> <TextView
 android:id=“@+id/last
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintHorizontal_weight="1"
 … /> WEIGHTED CHAIN
15. <TextView
 android:id=“@+id/packed_chain_head”
 app:layout_constraintHorizontal_chainStyle="packed"
 app:layout_constraintHorizontal_bias="0.12" /> PACKED CHAIN
16. UI BUILDER TOOLS FOR FASTER ASSEMBLY
17. THANK YOU! SPEAKERDECK.COM/QUEENCODEMONKEY YOUTUBE.COM/ANDROIDDIALOGS RANDOMLYTYPING.COM HUYEN TUE DAO @QUEENCODEMONKEY
18. GOING CHAIN CRAZY
19. ALIGNMENT AWESOMENESS OR HOW I LEARNED TO STOP WORRYING AND LOVE CENTER CONSTRAINTS
20. WHAT’S COOLER THAN BEING COOL? CONSTRAINTSET
21. WHAT IS CONSTRAINTSET? 21 CREATE/SAVE/APPLY A SET OF CONSTRAINTS DIFFERENT WAYS TO CREATE MANUAL (CHECK OUT THE API) CLONE A LAYOUT RESOURCE CLONE A CONSTRAINTLAYOUT SUPER EASY TRANSITIONS
22. // Get references to controls
 constraintLayout = findViewById(R.id.constraint_layout) as? ConstraintLayout
 
 // Load ConstraintSets.
 constraintSet01.clone(constraintLayout)
 constraintSet02.clone(this, R.layout.activity_constraintset_02) …some time later… // Toggle ConstraintSets. TransitionManager.beginDelayedTransition(constraintLayout)
 if (original) constraintSet02.applyTo(constraintLayout)
 else constraintSet01.applyTo(constraintLayout)
 original = !original
25. // Generate new ConstraintSet to change ratio of the image.
 constraintSet = ConstraintSet()
 constraintSet.clone(constraintLayout)
 constraintSet.setDimensionRatio(R.id.hero, R.id.radio_button_id) // Generate new ConstraintSet to change ratio of the image.
 constraintSet.setHorizontalBias(R.id.head_of_chain, bias) …some time later… // Apply those changes.
 TransitionManager.beginDelayedTransition(constraintLayout)
 constraintSet.applyTo(constraintLayout)
26. CAVEATS CONCERNING CONSTRAINTLAYOUT
27. IF IT AIN’T BROKE, DON’T FIX IT
28. ANIMATIONS WORK VERY WELL
29. THE UI BUILDER IS A WORK IN PROGRESS
30. KEEP CONSTRAINTS CLEAN IF YOU CAN
31. FLAT HIERARCHIES IMPROVE PERFORMANCE
32. ANDROID DEVELOPERS BACKSTAGE EPISODE 50: CONSTRAINT LAYOUT
33. CONSTRAINTLAYOUT CREW JOHN HOFORD @JOHNHOFORD NICOLAS ROARD @CAMAELON
34. HOMEWORK STYLING ANDROID MARK ALLISON @MARKIALLISON GROKKING ANDROID WOLFRAM RITTMEYER @RITTMEYERW WIRES ARE OBSOLETE DAVE SMITH @DEVUNWIRED
35. THANK YOU! SPEAKERDECK.COM/QUEENCODEMONKEY YOUTUBE.COM/ANDROIDDIALOGS RANDOMLYTYPING.COM HUYEN TUE DAO @QUEENCODEMONKEY
36. REFERENCES 36 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
37. REFERENCES 37 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