Slide 1

Slide 1 text

Auto Layout Part Deux Mike Woelmer @mikewoelmer

Slide 2

Slide 2 text

@atomicobject Brief overview

Slide 3

Slide 3 text

@atomicobject Springs and struts With springs and struts, you always had to hard-code the frames of your views, either by placing them at specific coordinates in Interface Builder, by passing a rectangle into initWithFrame, or by setting the view’s frame, bounds or center properties in code.

Slide 4

Slide 4 text

@atomicobject Reactive Design • 3.5” and 4” retina displays • IOS 6 and 7 control/screen changes • Portrait and landscape • Localization • Dynamic text size feature User can change the size of their font on the fly.

Slide 5

Slide 5 text

@atomicobject Layout Containers Most other platforms have layout containers that your UI elements are contained in to achieve the same thing as constraints.

Slide 6

Slide 6 text

@atomicobject Auto Layout is a Constraint-Based, Descriptive Layout System Example human readable constraints

Slide 7

Slide 7 text

@atomicobject Auto Layout is a Human readable way we describe interfaces Example human readable constraints

Slide 8

Slide 8 text

@atomicobject Auto Layout is a Human readable way we describe interfaces “Label A and Label B should be centered vertically. The right edge of label A is connected to the left edge of button B with 8 points of empty space between them.” Example human readable constraints

Slide 9

Slide 9 text

@atomicobject “Label A and Label B should be centered vertically. The right edge of label A is connected to the left edge of button B with 8 points of empty space between them.” Example human readable constraints

Slide 10

Slide 10 text

@atomicobject Constraints • Can  apply  to  any  two  views  -­‐-­‐  regardless  of  view   hierarchy.  Defined  between  the  common   ancestor View  1 View  2 View  3 = =

Slide 11

Slide 11 text

@atomicobject Constraints • Can  apply  to  any  two  views  -­‐-­‐  regardless  of  view   hierarchy.  Defined  between  the  common   ancestor • Can  establish  maximums  and  minimums  with   inequaliCes.    >=  400    <=  20

Slide 12

Slide 12 text

@atomicobject Constraints • Can  apply  to  any  two  views  -­‐-­‐  regardless  of  view   hierarchy.  Defined  between  the  common   ancestor • Can  establish  maximums  and  minimums  with   inequaliCes.    >=  400    <=  20 • Can  be  prioriCzed

Slide 13

Slide 13 text

@atomicobject Constraints • Can  apply  to  any  two  views  -­‐-­‐  regardless  of  view   hierarchy.  Defined  between  the  common   ancestor • Can  establish  maximums  and  minimums  with   inequaliCes.    >=  400    <=  20 • Can  be  prioriCzed • You  can  define  width  and  height  as  percentages 80% 20%

Slide 14

Slide 14 text

@atomicobject Visual Format

Slide 15

Slide 15 text

@atomicobject [NSLayoutConstraint  constraintWithItem:  acceptBuTon                          aTribute:NSLayoutATributeLeV                          relatedBy:NSLayoutRelaConEquals                          toItem:cancelBuTon                          aTribute:NSLayoutATributeRight                          mulCplier:1.0                          constant:12] How to build a Constraint

Slide 16

Slide 16 text

@atomicobject

Slide 17

Slide 17 text

@atomicobject Cancel Accept

Slide 18

Slide 18 text

@atomicobject [cancelBuTon]-­‐[acceptBuTon]

Slide 19

Slide 19 text

@atomicobject [NSLayoutConstraint  constraintsWithVisualFormat:   @”[cancelBuTon]-­‐[acceptBuTon]”   opCons:0  metrics:nil  views:viewsDicConary];

Slide 20

Slide 20 text

@atomicobject [NSLayoutConstraint  constraintsWithVisualFormat:   @”[cancelBuTon]-­‐[acceptBuTon]”   opCons:0  metrics:nil  views:viewsDicConary]; UIBuTon  *cancelBuTon  =  ...   UIBuTon  *acceptBuTon  =  ...   viewsDicConary  =     NSDicConaryOfVariableBindings(cancelBuTon,acceptBuTon);

Slide 21

Slide 21 text

@atomicobject [wideView(>=60@700)] wideView 60  pts

Slide 22

Slide 22 text

@atomicobject V:[greenBox][yellowBox(==greenBox)] greenBox yellowBox

Slide 23

Slide 23 text

@atomicobject H:|-­‐[Find]-­‐[FindNext]-­‐[FindField(>=20)]-­‐| 20  pts superview 20  pts 20  pts 8  pts 8  pts combination

Slide 24

Slide 24 text

@atomicobject [NSLayoutConstraint  constraintsWithVisualFormat:   @”H:|-­‐[Find]-­‐[FindNext]-­‐[FindField(>=20)]-­‐|”   opCons:NSLayoutFormatAlignAllBaseline    metrics:nil  views:viewsDicConary]; hTp://developer.apple.com/library/mac/#documentaCon/UserExperience/Conceptual/AutolayoutPG/ArCcles/formatLanguage.html Good  visual  format  reference: combination

Slide 25

Slide 25 text

@atomicobject [NSLayoutConstraint  constraintWithItem:  CtleView                          aTribute:NSLayoutATributeHeight                          relatedBy:NSLayoutRelaConEquals                          toItem:superView                          aTribute:NSLayoutATributeHeight                          mulCplier:0.1                          constant:0] withItem.aTribute  =  toItem.aTribute  *  mulCplier  +  constant MulCplier [NSLayoutConstraint  constraintWithItem:  CtleView                          aTribute:NSLayoutATributeHeight                          relatedBy:NSLayoutRelaConEquals                          toItem:superView                          aTribute:NSLayoutATributeHeight                          mulCplier:0.1                          constant:0] withItem.aTribute  =  toItem.aTribute  *  mulCplier  +  constant CtleView.height  =  superView.height  *  mulCplier  +  constant

Slide 26

Slide 26 text

@atomicobject What’s new with Auto Layout

Slide 27

Slide 27 text

@atomicobject • Interface builder will no longer enforce that you have satisfactory constraints at all times!

Slide 28

Slide 28 text

@atomicobject • Interface builder will no longer enforce that you have satisfactory constraints at all times! • Interface builder will not create or delete constraints without your permission.

Slide 29

Slide 29 text

@atomicobject • Interface builder will no longer enforce that you have satisfactory constraints at all times! • Interface builder will not create or delete constraints without your permission. • Control + Drag filters the suggested constraints.

Slide 30

Slide 30 text

@atomicobject • Interface builder will no longer enforce that you have satisfactory constraints at all times! • Interface builder will not create or delete constraints without your permission. • Control + Drag filters the suggested constraints. • Preview your UI in three different layouts at the same time.

Slide 31

Slide 31 text

@atomicobject • Interface builder will no longer enforce that you have satisfactory constraints at all times! • Interface builder will not create or delete constraints without your permission. • Control + Drag filters the suggested constraints. • Preview your UI in three different layouts at the same time. • Placeholder Constraints and Intrinsic content size.

Slide 32

Slide 32 text

@atomicobject • Interface builder will no longer enforce that you have satisfactory constraints at all times! • Interface builder will not create or delete constraints without your permission. • Control + Drag filters the suggested constraints. • Preview your UI in three different layouts at the same time. • Placeholder Constraints and Intrinsic content size. • Auto Layout Trace

Slide 33

Slide 33 text

@atomicobject Initial Layout Add constraints when you are ready. ! If you haven’t added constraints, it uses fixed position and size. ! Run and see what landscape looks like.

Slide 34

Slide 34 text

@atomicobject Adding Constraints Add constraints to Next button using control drag. Left, Right, Top, and height. ! Now add constraints to sibling button. Hold command or shift to add multiple constraints. ! Add constraints to final button, but use the Reset to Suggested Constraints. It will delete any constraints you have on that view and add appropriate ones. ! Everything above the line applies to the selected view. Below the line is global to the superview. ! Run it. Rotate it.

Slide 35

Slide 35 text

@atomicobject Priorities Add two buttons height 75, equal widths. Use Add Constraints popup. ! Add two labels. Add vertical spacing, then add missing constraints ! Add slider and make it centered vertically. Leading and trailing. Run it. ! Add a constraint between slider and label. Make it greater than standard. ! Show preview window. Option shift ! Now take main view and put it to landscape. This is called simulated metrics. Fix priority. ! !

Slide 36

Slide 36 text

@atomicobject Debugging Problems • Ambiguous Frames: Not enough information • Conflicting Constraints: Too much information • Misplaced Views: Mismatched position or size. Show demo of Misplaced Views

Slide 37

Slide 37 text

@atomicobject Auto Layout Trace

Slide 38

Slide 38 text

@atomicobject View1 View View  2 @property  (nonatomic,  strong)  IBOutlet  NSLayoutConstraint  *view2superviewLeadingConstraint; In  interface  builder  you  need  a  temporary  constraint  to  posiCon  view  2’s  leading  edge.  Create  an  outlet. [self.view  removeConstraint:self.view2superviewLeadingConstraint]; In  viewDidLoad,  you  can  remove  your  temporary  constraint. NSLayoutConstraint  *constraint1  =  [NSLayoutConstraint  constraintWithItem:self.view1  attribute:NSLayoutAttributeWidth   relatedBy:NSLayoutRelationEqual  toItem:self.view  attribute:NSLayoutAttributeWidth  multiplier:0.3  constant:-­‐20];   [self.view  addConstraint:constraint1];   ! NSLayoutConstraint  *constraint2  =  [NSLayoutConstraint  constraintWithItem:self.view2  attribute:NSLayoutAttributeWidth   relatedBy:NSLayoutRelationEqual  toItem:self.view  attribute:NSLayoutAttributeWidth  multiplier:0.7  constant:-­‐40];   [self.view  addConstraint:constraint2];   Now  create  your  constraints  and  add  them  to  the  parent  view.

Slide 39

Slide 39 text

@atomicobject Placeholder

Slide 40

Slide 40 text

@atomicobject Animation

Slide 41

Slide 41 text

Auto Layout Part Deux Mike Woelmer @mikewoelmer