Droidcon Boston 2017: Cool ConstraintLayout

Huyen's presentation at Droidcon Boston 2017 on some of the cool things that you can do with ConstraintLayout.

Transcript

1. HUYEN TUE DAO @QUEENCODEMONKEY COOL CONSTRAINT LAYOUT #DROIDCONBOS
2. COOL THINGS ABOUT CONSTRAINT LAYOUT COOL THINGS TO DO WITH CONSTRAINT LAYOUT #DROIDCONBOS
3. WHAT IS THE CONSTRAINT LAYOUT? #DROIDCONBOS
4. EXPRESSIVE RELATIONSHIPS BETWEEN VIEWS RELATIVE LAYOUT++ +≈ LINEARLAYOUT PERFORMANT #DROIDCONBOS
5. UNBUNDLED SUPPORTS API 9+ UI BUILDER USABLE WITH XML ONLY #DROIDCONBOS
6. HOW DOES IT WORK? #DROIDCONBOS
7. CONSTRAINTS EQUATIONS SOLVER 7 HOW DOES IT WORK?
8. CONSTRAINTS EQUATIONS SOLVER POSITION FIXED WRAP CONTENT MATCH CONSTRAINT RATIO EDGE CENTER BASELINE DIMENSION HELPERS/GROUPINGS GUIDELINE CONSTRAINTSET CHAINS 8 HOW DOES IT WORK?
9. CONSTRAINTS EQUATIONS SOLVER LINEAR SYSTEM OF EQUATIONS 9 HOW DOES IT WORK?
10. CONSTRAINTS EQUATIONS SOLVER CASSOWARY LINEAR ARITHMETIC CONSTRAINT SOLVING ALGORITHM VIEW BOUNDS 10 HOW DOES IT WORK?
11. CONSTRAINTLAYOUT, INSIDE AND OUT: PART 2 DAVE SMITH
12. LET’S TAKE A QUICK TOUR #DROIDCONBOS
14. CONSTRAINT LAYOUT CHEAT SHEET #DROIDCONBOS
15. SOURCE TARGET EDGE CONSTRAINT #DROIDCONBOS 
 app:layout_constraintLeft_toLeftOf="parent" 
 app:layout_constraint<source>_to<target>Of=“a_view"
16. #DROIDCONBOS CENTER CONSTRAINT 
 app:layout_constraintHorizontal_bias="0.75"
17. #DROIDCONBOS BASELINE CONSTRAINT app:layout_constraintBaseline_toBaselineOf="@+id/view"
18. #DROIDCONBOS SIZE CONSTRAINTS
19. #DROIDCONBOS GUIDELINES
20. <android.support.constraint.Guideline
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/guideline_start"
 android:orientation="vertical"
 app:layout_constraintGuide_begin="16dp" />
 
 
 <android.support.constraint.Guideline
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/horizontal"
 android:orientation="horizontal"
 app:layout_constraintGuide_percent="0.37" /> #DROIDCONBOS
21. SO WHAT CAN WE DO WITH CONSTRAINT LAYOUT? #DROIDCONBOS
22. 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);
 } #DROIDCONBOS
23. <ImageView
 android:id=“@+id/square_image”
 android:layout_width="0dp"
 android:layout_height="0dp"
 app:layout_constraintDimensionRatio=“W,1:1" #DROIDCONBOS
24. #DROIDCONBOS
25. IS IT REALLY BETTER THAN RELATIVE LAYOUT? #DROIDCONBOS
26. #DROIDCONBOS
27. #DROIDCONBOS
28. private fun updateManualAnchors() {
 val size = anchorMinSize + seekBar.progress
 val halfSize = Math.round(size * 0.5f)
 val horizontalMargin = resources.getDimensionPixelSize(R.dimen.content_margin_horizontal) - halfSize
 val verticalMargin = resources.getDimensionPixelSize(R.dimen.alignment_rectangle_margin_vertical) - halfSize
 updateManualAnchor(frameAnchorTop, size, verticalMargin, 0, 0, 0)
 updateManualAnchor(frameAnchorStart, size, 0, horizontalMargin, 0, 0)
 updateManualAnchor(frameAnchorBottom, size, 0, 0, verticalMargin, 0)
 updateManualAnchor(frameAnchorEnd, size, 0, 0, 0, horizontalMargin)
 }
 
 private fun updateManualAnchor(anchor: View, size: Int,
 marginTop: Int, marginStart: Int,
 marginBottom: Int, marginEnd: Int) {
 val layoutParams = anchor.layoutParams as FrameLayout.LayoutParams layoutParams.width = size
 layoutParams.height = size
 layoutParams.topMargin = marginTop
 layoutParams.bottomMargin = marginBottom
 layoutParams.marginStart = marginStart
 layoutParams.marginEnd = marginEnd anchor.layoutParams = layoutParams
 } WITH CONSTRAINTLAYOUT JUST CHANGE THE SIZE…
29. WHAT WAS THAT ABOUT LINEAR LAYOUT? #DROIDCONBOS
30. CHAINS. CHAINS. CHAINS. FROM CONSTRAINTLAYOUT DOCUMENTATION #DROIDCONBOS
31. <TextView
 android:id=“@+id/head_of_spread_inside”
 app:layout_constraintHorizontal_chainStyle="spread_inside"
 … /> SPREAD INSIDE CHAIN
32. <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" /> 32 WEIGHTED CHAIN
33. <TextView
 android:id=“@+id/packed_chain_head”
 app:layout_constraintHorizontal_chainStyle="packed"
 app:layout_constraintHorizontal_bias="0.12" /> 33 PACKED CHAIN
34. #DROIDCONBOS
35. #DROIDCONBOS
36. A CONSTRAINT LAYOUT SPECIAL CONSTRAINT SET #DROIDCONBOS
37. CONSTRAINT SET #DROIDCONBOS DEFINE SET OF CONSTRAINTS PROGRAMMATICALLY CREATE/SAVE/APPLY CREATE MANUALLY CLONE A LAYOUT FILE CLONE A CONSTRAINT LAYOUT AWESOME WITH TRANSITIONS
40. // Inflate initial layout as usual. setContentView(R.layout.activity_constraintset_01) // 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 38
41. CONSTRAINT SET IN LIEU OF CUSTOM VIEWGROUP #DROIDCONBOS
42. CUSTOM VIEW GROUP #DROIDCONBOS LAYOUT IS LOW-LEVEL (X, Y) LOTS OF CODE TO ACCOMPLISH A SIMPLE LAYOUT ADVANCED LAYOUTS… WOAH
43. @Override
 protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
 MarginLayoutParams layoutParams = (MarginLayoutParams) icon.getLayoutParams();
 
 // Figure out the x-coordinate and y-coordinate of the icon.
 int x = getPaddingLeft() + layoutParams.leftMargin;
 int y = getPaddingTop() + layoutParams.topMargin;
 
 // Layout the icon.
 icon.layout(x, y, x + icon.getMeasuredWidth(), y + icon.getMeasuredHeight());
 
 // Calculate the x-coordinate of the title: icon's right coordinate +
 // the icon's right margin.
 x += icon.getMeasuredWidth() + layoutParams.rightMargin;
 
 // Add in the title's left margin.
 layoutParams = (MarginLayoutParams) titleView.getLayoutParams();
 x += layoutParams.leftMargin;
 
 // Calculate the y-coordinate of the title: this ViewGroup's top padding +
 // the title's top margin
 y = getPaddingTop() + layoutParams.topMargin;
 
 // Layout the title.
 titleView.layout(x, y, x + titleView.getMeasuredWidth(), y + titleView.getMeasuredHeight());
 
 // The subtitle has the same x-coordinate as the title. So no more calculating there.
 
 // Calculate the y-coordinate of the subtitle: the title's bottom coordinate +
 // the title's bottom margin.
 y += titleView.getMeasuredHeight() + layoutParams.bottomMargin;
 layoutParams = (MarginLayoutParams) subtitleView.getLayoutParams();
 
 // Add in the subtitle's top margin.
 y += layoutParams.topMargin;
 
 // Layout the subtitle.
 subtitleView.layout(x, y,
 x + subtitleView.getMeasuredWidth(), y + subtitleView.getMeasuredHeight());
 }
44. CONSTRAINT SET IN LIEU OF CUSTOM VIEWGROUP #DROIDCONBOS
45. private fun addRow(view: View) {
 constraintLayout.addView(view)
 
 val id = view.id
 constraintSet.constrainWidth(id, MATCH_CONSTRAINT)
 constraintSet.constrainHeight(id, rowHeight)
 
 // Constrain new view vertically.
 val target = if (lastRowId  PARENT_ID) TOP else BOTTOM
 constraintSet.connect(id, TOP, lastRowId, target) // Constrain new view horizontally.
 constraintSet.connect(id, START, PARENT_ID, START)
 constraintSet.connect(id, END, PARENT_ID, END)
 
 // Toggle elevation to elevate last added view.
 constraintSet.setElevation(id, resources.getDimension(R.dimen.elevation_content))
 constraintSet.setElevation(lastViewId, 0f)
 
 // Apply constraints.
 constraintSet.applyTo(constraintLayout) 43
46. private fun addRowItem(view: View) {
 …
 constraintLayout.addView(view)
 
 val id = view.id
 
 // Initialize width and height of new view.
 constraintSet.constrainWidth(id, MATCH_CONSTRAINT)
 constraintSet.constrainHeight(id, rowHeight)
 
 // Constrain new view vertically.
 val target = if (lastRowId  PARENT_ID) TOP else BOTTOM
 constraintSet.connect(id, TOP, lastRowId, target) 44
47. // Update current row.
 currentRow.add(id)
 // Re-create horizontal chain with other row items.
 constraintSet.createHorizontalChainRtl(
 PARENT_ID, START,
 PARENT_ID, END,
 currentRow.toIntArray(), FloatArray(currentRow.size, { 1f }),
 CHAIN_SPREAD_INSIDE)
 
 // Toggle elevation to elevate last added view.
 constraintSet.setElevation(id, resources.getDimension(R.dimen.elevation_content))
 constraintSet.setElevation(lastViewId, 0f)
 
 // Apply constraints.
 constraintSet.applyTo(constraintLayout) 45
48. SERIOUSLY COOL THINGS IN CONSTRAINT LAYOUT #DROIDCONBOS
49. ANDROID DEVELOPERS BACKSTAGE EPISODE 50: CONSTRAINT LAYOUT
50. CONSTRAINTLAYOUT CREW JOHN HOFORD @JOHNHOFORD NICOLAS ROARD @CAMAELON #DROIDCONBOS
51. THANK YOU! SPEAKERDECK.COM/QUEENCODEMONKEY YOUTUBE.COM/ANDROIDDIALOGS RANDOMLYTYPING.COM HUYEN TUE DAO @QUEENCODEMONKEY #DROIDCONBOS
52. REFERENCES 50 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 ADVANCED CONSTRAINTLAYOUT http://cfp.devoxx.us/2017/talk/XOD-8930/Advanced_ConstraintLayout
53. REFERENCES 51 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