Tweet
Tweet

Slide 1

Slide 1 text

ConstraintLayout: Inside and Out Dave Smith, PE @devunwired

Slide 2

Slide 2 text

RelativeLayout Child View LinearLayout Child View Child View

Slide 3

Slide 3 text

ConstraintLayout Child View Child View Child View

Slide 4

Slide 4 text

Sizing Constraints Positioning Constraints Internal Mechanics

Slide 5

Slide 5 text


 
 
 
 
 
 


Slide 6

Slide 6 text


 
 
 
 


Slide 7

Slide 7 text


 
 
 


Slide 8

Slide 8 text

Guidelines

Slide 9

Slide 9 text


 
 
 
 
 
 
 


Slide 10

Slide 10 text

View Sizing android:layout_width="wrap_content" android:layout_width="72dp" android:layout_width="match_parent" Wrap Content Fixed Size Match Parent

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

View Sizing android:layout_width="wrap_content" android:layout_width="72dp" android:layout_width="0dp" Wrap Content Fixed Size Match Constraint ("any size")

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text


 
 
 
 
 


Slide 15

Slide 15 text


 
 
 
 
 


Slide 16

Slide 16 text

Chains

Slide 17

Slide 17 text


 
 
 
 
 
 
 


Slide 18

Slide 18 text

ConstraintSet

Slide 19

Slide 19 text

ConstraintSet set = new ConstraintSet(); // Manual connect
 set.connect(startId, ConstraintSet.LEFT, endId, ConstraintSet.LEFT, margin);
 set.connect(...);
 set.connect(...); 
 // From XML layout
 set.clone(context, R.layout.layout_transition_1);
 // From current state
 set.clone(constraintLayout); // Animate to a new set
 ConstraintLayout mConstraintLayout = ...;
 private void transitionTo(ConstraintSet constraintSet) {
 TransitionManager.beginDelayedTransition(mConstraintLayout);
 constraintSet.applyTo(mConstraintLayout);
 }

Slide 20

Slide 20 text

ConstraintLayout Child View Child View LayoutParams LayoutParams

Slide 21

Slide 21 text

ConstraintLayout Child View Child View LayoutParams LayoutParams ConstraintWidget ConstraintWidget ConstraintWidgetContainer

Slide 22

Slide 22 text

ConstraintWidget ConstraintAnchor ConstraintAnchor ConstraintAnchor ConstraintAnchor Y Height Width X

Slide 23

Slide 23 text

ConstraintWidget ConstraintWidget Cassowary Equation Solver ConstraintWidget ConstraintWidget onLayout() onMeasure()

Slide 24

Slide 24 text

ConstraintWidget ConstraintWidget Cassowary Equation Solver ConstraintWidget ConstraintWidget ConstraintWidget ConstraintWidget Child View Child View onLayout() onMeasure()

Slide 25

Slide 25 text

Cassowary Equation Solver Parent Constraints Horizontal Constraints Vertical Constraints Size Constraints

Slide 26

Slide 26 text

LP = x RP = LP + wP TP = y BP = TP + hP R = L + w L ≥ LP + mL R ≤ RP - mR L + R = LP + RP + mL – mR B = T + h T ≥ TP + mT B ≤ BP - mB T + B = TP + BP + mT – mB Parent Constraints Horizontal Constraints Vertical Constraints

Slide 27

Slide 27 text

ConstraintLayout Child View Child View LayoutParams LayoutParams ConstraintWidget ConstraintWidget ConstraintWidgetContainer

Slide 28

Slide 28 text

ConstraintLayout Child View Child View ConstraintWidgetContainer ConstraintWidget ConstraintWidget

Slide 29

Slide 29 text

@devunwired +DaveSmithDev milehighandroid.com wiresareobsolete.com