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

DevFest MN 2017: Cool ConstraintLayout

DevFest MN 2017: Cool ConstraintLayout

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

Huyen Tue Dao

February 04, 2017
Tweet

More Decks by Huyen Tue Dao

Other Decks in Programming

Transcript

  1. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER POSITION FIXED WRAP CONTENT MATCH

    CONSTRAINT RATIO EDGE CENTER BASELINE DIMENSION OTHER THINGS GUIDELINE CONSTRAINTSET CHAINS
  2. 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);
 }
  3. <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
  4. 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
  5. // 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
  6. // 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)
  7. 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
  8. 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