Flattening Layouts with Constraints

Slide 1

Slide 1 text

Flattening Layouts with Constraints Dave Smith, PE @devunwired +DaveSmithDev

Slide 2

Slide 2 text

ConstraintLayout

Slide 3

Slide 3 text

Constraint Layout

Slide 4

Slide 4 text

Constraint \kənˈstrānt\ Mathematical expression given as a boundary condition to the objective function in a linear optimization problem.

Slide 5

Slide 5 text

L = 0 R = L + 240 T = 0 B = T + 120 R = L + 240 L ≥ LP + 16 R ≤ RP + 16 L + R = LP + RP B = T + 120 T ≥ TP + 16 B ≤ BP + 16 T + B = TP + BP

Slide 6

Slide 6 text

View

Slide 7

Slide 7 text

View Top Bottom Left Start Right End CenterX CenterY

Slide 8

Slide 8 text

View Top Bottom Left Start Right End CenterX CenterY View Top Bottom Left Start Right End CenterX CenterY View Top Bottom Left Start Right End CenterX CenterY

Slide 9

Slide 9 text

View Top Bottom Left Start Right End CenterX CenterY View Top Bottom Left Start Right End CenterX CenterY View Top Bottom Left Start Right End CenterX CenterY Constraints Require IDs!

Slide 10

Slide 10 text

layout_constraintBottom_toBottomOf layout_constraintBottom_toTopOf layout_constraintEnd_toEndOf layout_constraintEnd_toStartOf layout_constraintLeft_toLeftOf layout_constraintLeft_toRightOf layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintStart_toEndOf layout_constraintStart_toStartOf layout_constraintTop_toBottomOf layout_constraintTop_toTopOf layout_constraintBaseline_toBaselineOf layout_constraintCenterX_toCenterX layout_constraintCenterY_toCenterY

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

                layout_constraintGuide_Percent layout_constraintGuide_begin layout_constraintGuide_end

Slide 18

Slide 18 text

View Sizing • Wrap Content • Measure just large enough to fit view contents • layout_width="wrap_content" • Fixed Size • Measure to the specified dimension provided • layout_width="72dp" • Any Size • Measure to fill the space allowed by constraints • layout_width="0dp"

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Visual Layout Editor Autoconnect Inference • Automatically attach constraints to new views when added • Connections made to nearest neighbor • Does not adjust constraints on existing views • Add missing constraints to all views • Works well in small iterations • Does not adjust constraints added manually

Slide 21

Slide 21 text

Visual Layout Editor tools:layout_editor_absoluteX tools:layout_editor_absoluteY tools:layout_constraint[Anchor]_creator

Slide 22

Slide 22 text

More Information • Layout Pancake Samples • http://milehighandroid.com • ConstraintLayout, Inside and Out • http://wiresareobsolete.com • Cassowary Algorithm • http://overconstrained.io/ • ConstraintLayout - Mark Allison • http://stylingandroid.com