Autolayout
5 likes•5,481 views
The document discusses various techniques for animating views and constraints in Auto Layout, including: - Animating a constraint's constant property and calling layoutIfNeeded in the animation block - Animating layers instead of views for smoother animations - Dropping constraints temporarily and using autosizing masks for animation - Using a container view to help manage animations
![constraints
! [NSLayoutConstraint
! constraintWithItem: button
! attribute: NSLayoutAttributeCenterX
! relatedBy: NSLayoutRelationEqual
! toItem: superview
! attribute: NSLayoutAttributeCenterX
! multiplier: 1.0
! constant: 0.0]](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-16-320.jpg)
![constraints
view1.attribute1 RELATION multiplier * view2.attribute2 + constant
! constraint = [NSLayoutConstraint
! constraintWithItem: view
! attribute: NSLayoutAttributeWidth
! relatedBy: NSLayoutRelationEqual
! toItem: nil
! attribute: NSLayoutAttributeNotAnAttribute
! multiplier: 1.0
! constant: 100.0];
[view addConstraint: constraint];
! constraint = [NSLayoutConstraint
! constraintWithItem: view
! attribute: NSLayoutAttributeWidth
! relatedBy: NSLayoutRelationEqual
! toItem: nil
! attribute: NSLayoutAttributeNotAnAttribute
! multiplier: 1.0
! constant: 80.0];
[view addConstraint: constraint];
size=100x80
CONSTRAINT_SIZE(view,100,80);](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-17-320.jpg)
![Ambiguous
view.hasAmbiguousLayout
view.exerciseAmbiguityInLayout
for (UIView *view in self.subviews) {
if ([view hasAmbiguousLayout]){
NSLog(@"<%@:0x%0x>", view.description, (int)self);
}
}](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-24-320.jpg)
![instrinsicContentSize
Suggested size for the view.
- (CGSize) intrinsicContentSize {
return mySize;
}
[self invalidateIntrinsicContentSize];
UIImage *img = UIImage imageNamed:@"Icon.png"];
UIImageView *iv = [[UIImageView alloc] initWithImage:img];
NSLog(@"%@", NSStringFromCGSize(iv.intrinsicContentSize));](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-25-320.jpg)
![Hug & compress
Hugging resists stretching
Compression resists shrinking
UILayoutConstraintAxis axis = UILayoutConstraintAxisHorizontal;
UILayoutPriority p = UILayoutPriorityDefaultHigh;
[button setContentCompressionResistancePriority:p forAxis:axis];
[button setContentHuggingPriority:p forAxis:axis];](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-27-320.jpg)
![VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-|"
! options:0
! metrics:nil
! views:@{ @"buttonA" : buttonA }];](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-37-320.jpg)
![VFL
H V [view] | - @ ()
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-|"
! options:0
! metrics:nil
! views:@{ @"buttonA" : buttonA }];](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-38-320.jpg)
![VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-|"
! options:0
! metrics:nil
! views:@{ @"buttonA" : buttonA }];
NSLayoutFormatAlignAllLeft
NSLayoutFormatAlignAllRight
NSLayoutFormatAlignAllTop
NSLayoutFormatAlignAllBottom
NSLayoutFormatAlignAllLeading
NSLayoutFormatAlignAllTrailing
NSLayoutFormatAlignAllCenterX
NSLayoutFormatAlignAllCenterY
NSLayoutFormatAlignAllBaseline
NSLayoutFormatAlignmentMask
NSLayoutFormatDirectionLeadingToTrailing
NSLayoutFormatDirectionLeftToRight
NSLayoutFormatDirectionRightToLeft
NSLayoutFormatDirectionMask
NSLayoutFormatOptions](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-39-320.jpg)
![VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|"
! options:0
! metrics: @{ @"distance": @50 }
! views:@{ @"buttonA" : buttonA }];](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-40-320.jpg)
![VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|"
! options:0
! metrics: @{ @"distance": @50 }
! views:@{ @"buttonA" : buttonA }];](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-41-320.jpg)
![VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|"
! options:0
! metrics: @{ @"distance": @50 }
! views:NSDictionaryOfVariableBindings(buttonA)];](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-42-320.jpg)
![VFL
H V [view] | - @ ()](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-43-320.jpg)
![H:[view1][view2]](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-49-320.jpg)
![H:[view1]-[view2]](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-50-320.jpg)
![H:[view1]-30-[view2]
H:[view1]-(==30)-[view2]](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-51-320.jpg)
![H:|[view1]-[view2]|](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-52-320.jpg)
![H:|-[view1]-(>=0)-[view2]-|](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-53-320.jpg)
![H:|-[view1(>=125,<=250)]-(>=0)-[view2]-|](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-54-320.jpg)
![H:[view1(>=view2)][view2]](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-55-320.jpg)
![H:[button(100@20)]
H:|[view1]-(>=50@30)-[view2]|
H:|-[view1(==view2)]-[view2]-|
H:[view1(view2)]
...](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-56-320.jpg)
![100x100 Square
- (void)viewDidLoad
{
[super viewDidLoad];
self.blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.blueView setContentHuggingPriority:UILayoutPriorityDefaultHigh
forAxis:UILayoutConstraintAxisHorizontal];
[self.blueView setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh
forAxis:UILayoutConstraintAxisVertical];
[self.blueView removeConstraints:self.blueView.constraints];
[self.blueView.superview removeConstraints:self.blueView.superview.constraints];
NSArray *constraints = @[ @"H:[blueView(100)]", @"V:[blueView(100)]"];
NSDictionary *views = @{@"blueView":self.blueView};
for (NSString *format in constraints)
{
[self.view addConstraints:
[NSLayoutConstraint
constraintsWithVisualFormat: format
options: 0
metrics: nil
views: views]];
}
}](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-57-320.jpg)
![UIViewController
viewDidLoad
- autolayout-
viewDidLayoutSubviews
viewDidAppear
[self.view layoutIfNeeded]](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-63-320.jpg)
![constant
self.someConstraint.constant = 10.0;
[UIView animateWithDuration:0.25 animations:^{
[self.view layoutIfNeeded];
}];](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-67-320.jpg)
![layoutIfNeeded
- (BOOL)continueTrackingWithTouch:(UITouch *)touch
withEvent:(UIEvent *)event
{
! CGPoint touchPoint = [touch locationInView:self];
! [UIView animateWithDuration:0.1f animations:^(){
! ! NSLayoutConstraint *constraint =
! ! [trackView constraintNamed:THUMB_POSITION_TAG];
! ! constraint.constant = touchPoint.x;
! ! [trackView layoutIfNeeded];
! }];
! return YES;
}](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-69-320.jpg)
![Layer animation
// jumpy
[UIView animateWithDuration:0.3 delay:0
options:UIViewAnimationOptionAutoreverse
animations:^{
v.transform = CGAffineTransformMakeScale(1.1, 1.1);
} completion:^(BOOL finished) {
v.transform = CGAffineTransformIdentity;
}];
// smooth
CABasicAnimation* ba = [CABasicAnimation
animationWithKeyPath:@"transform"];
ba.autoreverses = YES;
ba.duration = 0.3;
ba.toValue = [NSValue
valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1)];
[v.layer addAnimation:ba forKey:nil];](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-71-320.jpg)
![Fading in/out during rotation
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)to
duration:(NSTimeInterval)duration
{
! // fade away old layout
! [UIView animateWithDuration:duration animations:^{
! for (UIView *view in @[settingsView, creditsView])
! view.alpha = 0.0f;
! }];
}
- (void) didRotateFromInterfaceOrientation:(UIInterfaceOrientation)from
{
! // update the layout for the new orientation
! [self updateViewConstraints];
! [self.view layoutIfNeeded];
! // fade in the new layout
! [UIView animateWithDuration:0.3f animations:^{
! for (UIView *view in @[settingsView, creditsView])
! view.alpha = 1.0f;
! }];
}](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-77-320.jpg)
![Update and animate changes
- (void) willAnimateRotationToInterfaceOrientation:
(UIInterfaceOrientation)to
duration:(NSTimeInterval)duration
{
! [UIView animateWithDuration:duration animations:^{
! ! [self updateViewConstraints];
! ! [self.view layoutIfNeeded];
! }];
}](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-78-320.jpg)
![Calling updates
UIDeviceOrientation newOrientation;
- (void) updateViewConstraints
{
! [super updateViewConstraints];
! [self.view removeConstraints:self.view.constraints];
! if (newOrientation==UIDeviceOrientationPortrait){
! ! // ...
! }
}
- (void) willRotateToInterfaceOrientation:
(UIInterfaceOrientation)toInterfaceOrientation
duration:(NSTimeInterval)duration
{
! newOrientation = toInterfaceOrientation;
! [self updateViewConstraints];
}](https://image.slidesharecdn.com/autolayout-key-130705041508-phpapp02/85/Autolayout-79-320.jpg)
Autolayout
- 3. bounds center }frame transform autoresizingMask Layout frame.origin = center - (bounds.size / 2.0) center = frame.origin + (bounds.size / 2.0) frame.size = bounds.size
- 4. bounds center }frame transform autoresizingMask Layout frame.origin = center - (bounds.size / 2.0) center = frame.origin + (bounds.size / 2.0) frame.size = bounds.size
- 7. LayoutAutoLayout descriptive constraint-based pixel-perfect modular view1.attribute1 RELATION multiplier * view2.attribute2 + constant button.center.y = 1 * superview.center.y + 0 ! [NSLayout ! constrain ! attribute ! relatedBy ! toItem: s ! attribute ! multiplie ! constant:
- 8. What do I need to know?
- 9. What do I need to know? UIView properties alignmentRectInsets constraints contentSize compression hugging translatesAutoresizingMaskIntoConstraints
- 10. What do I need to know? UIView properties Interface Builder > VFL > API
- 11. What do I need to know? UIView properties Interface Builder > VFL > API UIViewController lifecycle
- 12. What do I need to know? UIView properties Interface Builder > VFL > API Animation
- 15. constraints view1.attribute1 RELATION multiplier * view2.attribute2 + constant NSLayoutAttributeLeft NSLayoutAttributeRight NSLayoutAttributeTop NSLayoutAttributeBottom NSLayoutAttributeLeading NSLayoutAttributeTrailing NSLayoutAttributeWidth NSLayoutAttributeHeight NSLayoutAttributeCenterX NSLayoutAttributeCenterY NSLayoutAttributeBaseline NSLayoutAttributeNotAnAttribute NSLayoutRelationEqual NSLayoutRelationGreaterThanOrEqual NSLayoutRelationLessThanOrEqual
- 16. constraints ! [NSLayoutConstraint ! constraintWithItem: button ! attribute: NSLayoutAttributeCenterX ! relatedBy: NSLayoutRelationEqual ! toItem: superview ! attribute: NSLayoutAttributeCenterX ! multiplier: 1.0 ! constant: 0.0]
- 17. constraints view1.attribute1 RELATION multiplier * view2.attribute2 + constant ! constraint = [NSLayoutConstraint ! constraintWithItem: view ! attribute: NSLayoutAttributeWidth ! relatedBy: NSLayoutRelationEqual ! toItem: nil ! attribute: NSLayoutAttributeNotAnAttribute ! multiplier: 1.0 ! constant: 100.0]; [view addConstraint: constraint]; ! constraint = [NSLayoutConstraint ! constraintWithItem: view ! attribute: NSLayoutAttributeWidth ! relatedBy: NSLayoutRelationEqual ! toItem: nil ! attribute: NSLayoutAttributeNotAnAttribute ! multiplier: 1.0 ! constant: 80.0]; [view addConstraint: constraint]; size=100x80 CONSTRAINT_SIZE(view,100,80);
- 18. constraints view1.attribute1 RELATION multiplier * view2.attribute2 + constant linear equations Cassowary Linear Arithmetic Constraint Solving Algorithm Pro tip: Use local flat hierarchies.
- 19. constraints view1.attribute1 RELATION multiplier * view2.attribute2 + constant http://pilky.me/view/36
- 20. constraints view1.attribute1 RELATION multiplier * view2.attribute2 + constant http://pilky.me/view/36
- 21. constraints Screw-ups invisible view { {crash {undefined Size not set Invalid Ambiguous Unsatisfiable
- 22. Unsatisfiable
- 23. Invalid
- 24. Ambiguous view.hasAmbiguousLayout view.exerciseAmbiguityInLayout for (UIView *view in self.subviews) { if ([view hasAmbiguousLayout]){ NSLog(@"<%@:0x%0x>", view.description, (int)self); } }
- 25. instrinsicContentSize Suggested size for the view. - (CGSize) intrinsicContentSize { return mySize; } [self invalidateIntrinsicContentSize]; UIImage *img = UIImage imageNamed:@"Icon.png"]; UIImageView *iv = [[UIImageView alloc] initWithImage:img]; NSLog(@"%@", NSStringFromCGSize(iv.intrinsicContentSize));
- 26. Alignment rectangle UIView - (UIEdgeInsets)alignmentRectInsets - (CGRect)frameForAlignmentRect:(CGRect)alignmentRect - (CGRect)alignmentRectForFrame:(CGRect)frame Show rect lines:
- 27. Hug & compress Hugging resists stretching Compression resists shrinking UILayoutConstraintAxis axis = UILayoutConstraintAxisHorizontal; UILayoutPriority p = UILayoutPriorityDefaultHigh; [button setContentCompressionResistancePriority:p forAxis:axis]; [button setContentHuggingPriority:p forAxis:axis];
- 28. UIView properties Interface Builder > VFL > API Animation
- 34. Interface Builder IB > VFL > API Constraints colors IB can’t create ambiguous layouts Add a constraint before deleting another Preserve intrinsic size Don’t optimize until everything is in place
- 35. UIView properties Interface Builder > VFL > API Animation
- 37. VFL [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-|" ! options:0 ! metrics:nil ! views:@{ @"buttonA" : buttonA }];
- 38. VFL H V [view] | - @ () [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-|" ! options:0 ! metrics:nil ! views:@{ @"buttonA" : buttonA }];
- 39. VFL [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-|" ! options:0 ! metrics:nil ! views:@{ @"buttonA" : buttonA }]; NSLayoutFormatAlignAllLeft NSLayoutFormatAlignAllRight NSLayoutFormatAlignAllTop NSLayoutFormatAlignAllBottom NSLayoutFormatAlignAllLeading NSLayoutFormatAlignAllTrailing NSLayoutFormatAlignAllCenterX NSLayoutFormatAlignAllCenterY NSLayoutFormatAlignAllBaseline NSLayoutFormatAlignmentMask NSLayoutFormatDirectionLeadingToTrailing NSLayoutFormatDirectionLeftToRight NSLayoutFormatDirectionRightToLeft NSLayoutFormatDirectionMask NSLayoutFormatOptions
- 40. VFL [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|" ! options:0 ! metrics: @{ @"distance": @50 } ! views:@{ @"buttonA" : buttonA }];
- 41. VFL [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|" ! options:0 ! metrics: @{ @"distance": @50 } ! views:@{ @"buttonA" : buttonA }];
- 42. VFL [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|" ! options:0 ! metrics: @{ @"distance": @50 } ! views:NSDictionaryOfVariableBindings(buttonA)];
- 43. VFL H V [view] | - @ ()
- 49. H:[view1][view2]
- 56. H:[button(100@20)] H:|[view1]-(>=50@30)-[view2]| H:|-[view1(==view2)]-[view2]-| H:[view1(view2)] ...
- 57. 100x100 Square - (void)viewDidLoad { [super viewDidLoad]; self.blueView.translatesAutoresizingMaskIntoConstraints = NO; [self.blueView setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal]; [self.blueView setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisVertical]; [self.blueView removeConstraints:self.blueView.constraints]; [self.blueView.superview removeConstraints:self.blueView.superview.constraints]; NSArray *constraints = @[ @"H:[blueView(100)]", @"V:[blueView(100)]"]; NSDictionary *views = @{@"blueView":self.blueView}; for (NSString *format in constraints) { [self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: format options: 0 metrics: nil views: views]]; } }
- 58. UIView properties Interface Builder > VFL > API Animation
- 59. UIView API
- 60. UIView API Opting in to Constraint-Based Layout + requiresConstraintBasedLayout – translatesAutoresizingMaskIntoConstraints – setTranslatesAutoresizingMaskIntoConstraints: Managing Constraints – constraints – addConstraint: – addConstraints: – removeConstraint: – removeConstraints: Measuring in Constraint-Based Layout – systemLayoutSizeFittingSize – intrinsicContentSize – invalidateIntrinsicContentSize – contentCompressionResistancePriorityForAxis: – setContentCompressionResistancePriority:forAxis: – contentHuggingPriorityForAxis: – setContentHuggingPriority:forAxis:
- 61. UIView API Aligning Views with Constraint-Based Layout – alignmentRectForFrame: – frameForAlignmentRect: – alignmentRectInsets – viewForBaselineLayout Triggering Constraint-Based Layout – needsUpdateConstraints – setNeedsUpdateConstraints – updateConstraints – updateConstraintsIfNeeded Debugging Constraint-Based Layout – constraintsAffectingLayoutForAxis: – hasAmbiguousLayout – exerciseAmbiguityInLayout
- 64. UIView properties Interface Builder > VFL > API Animation
- 65. Animation
- 66. Animation #238: Animate the constant
- 67. constant self.someConstraint.constant = 10.0; [UIView animateWithDuration:0.25 animations:^{ [self.view layoutIfNeeded]; }];
- 68. Animation #238: Animate the constant. #238: Call layoutIfNeeded in a block.
- 69. layoutIfNeeded - (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { ! CGPoint touchPoint = [touch locationInView:self]; ! [UIView animateWithDuration:0.1f animations:^(){ ! ! NSLayoutConstraint *constraint = ! ! [trackView constraintNamed:THUMB_POSITION_TAG]; ! ! constraint.constant = touchPoint.x; ! ! [trackView layoutIfNeeded]; ! }]; ! return YES; }
- 70. Animation #238: Animate the constant. #238: Call layoutIfNeeded in a block. Animate layers instead of views.
- 71. Layer animation // jumpy [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionAutoreverse animations:^{ v.transform = CGAffineTransformMakeScale(1.1, 1.1); } completion:^(BOOL finished) { v.transform = CGAffineTransformIdentity; }]; // smooth CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:@"transform"]; ba.autoreverses = YES; ba.duration = 0.3; ba.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1)]; [v.layer addAnimation:ba forKey:nil];
- 72. Animation #238: Animate the constant. #238: Call layoutIfNeeded in a block. Animate layers instead of views. Drop constraints, use autosizing masks.
- 73. Animation #238: Animate the constant #238: Call layoutIfNeeded in a block Animate layers instead of views. Drop constraints, use autosizing masks. Use a container view.
- 74. Animation #238: Animate the constant. #238: Call layoutIfNeeded in a block. Animate layers instead of views. Drop constraints, use autosizing masks. Use a container view. Use constraints that don’t interfere.
- 75. Animation #238: Animate the constant. #238: Call layoutIfNeeded in a block. Animate layers instead of views. Drop constraints, use autosizing masks. Use a container view. Use constraints that don’t interfere. Set frame in viewDidLayoutSubviews.
- 77. Fading in/out during rotation - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)to duration:(NSTimeInterval)duration { ! // fade away old layout ! [UIView animateWithDuration:duration animations:^{ ! for (UIView *view in @[settingsView, creditsView]) ! view.alpha = 0.0f; ! }]; } - (void) didRotateFromInterfaceOrientation:(UIInterfaceOrientation)from { ! // update the layout for the new orientation ! [self updateViewConstraints]; ! [self.view layoutIfNeeded]; ! // fade in the new layout ! [UIView animateWithDuration:0.3f animations:^{ ! for (UIView *view in @[settingsView, creditsView]) ! view.alpha = 1.0f; ! }]; }
- 78. Update and animate changes - (void) willAnimateRotationToInterfaceOrientation: (UIInterfaceOrientation)to duration:(NSTimeInterval)duration { ! [UIView animateWithDuration:duration animations:^{ ! ! [self updateViewConstraints]; ! ! [self.view layoutIfNeeded]; ! }]; }
- 79. Calling updates UIDeviceOrientation newOrientation; - (void) updateViewConstraints { ! [super updateViewConstraints]; ! [self.view removeConstraints:self.view.constraints]; ! if (newOrientation==UIDeviceOrientationPortrait){ ! ! // ... ! } } - (void) willRotateToInterfaceOrientation: (UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { ! newOrientation = toInterfaceOrientation; ! [self updateViewConstraints]; }
- 80. References #202 WWDC 2012: Introduction to Auto Layout for iOS and OS X #228 WWDC 2012: Best Practices for Mastering Auto Layout #232 WWDC 2012: Auto Layout by Example #406 WWDC ’13 Taking Control of Auto Layout in Xcode 5 Cocoa Auto Layout Guide iOS Auto Layout Demystified $16