jano@jano.com.es
LayoutAuto
LayoutAuto
Layout
bounds
center }frame
transform
autoresizingMask
Layout
frame.origin = center - (bounds.size / 2.0)
center = frame.origin +...
bounds
center }frame
transform
autoresizingMask
Layout
frame.origin = center - (bounds.size / 2.0)
center = frame.origin +...
Layout
AutoLayout
AutoLayout
LayoutAutoLayout
LayoutAutoLayout
descriptive
constraint-based
pixel-perfect
modular
view1.attribute1 RELATION multiplier * view2.attribute...
What do I need to know?
What do I need to know?
UIView properties
alignmentRectInsets
constraints
contentSize
compression
hugging
translatesAutore...
What do I need to know?
UIView properties
Interface Builder > VFL > API
What do I need to know?
UIView properties
Interface Builder > VFL > API
UIViewController lifecycle
What do I need to know?
UIView properties
Interface Builder > VFL > API
Animation
UIView Properties
constraints
Layout
Content
Autosizing
NSLayoutConstraint
NSContentSizeLayoutConstraint
NSAutoresizingMaskLayoutConstraint
constraints
view1.attribute1 RELATION multiplier * view2.attribute2 + constant
NSLayoutAttributeLeft
NSLayoutAttributeRigh...
constraints
! [NSLayoutConstraint
! constraintWithItem: button
! attribute: NSLayoutAttributeCenterX
! relatedBy: NSLayout...
constraints
view1.attribute1 RELATION multiplier * view2.attribute2 + constant
! constraint = [NSLayoutConstraint
! constr...
constraints
view1.attribute1 RELATION multiplier * view2.attribute2 + constant
linear equations
Cassowary Linear Arithmeti...
constraints
view1.attribute1 RELATION multiplier * view2.attribute2 + constant
http://pilky.me/view/36
constraints
view1.attribute1 RELATION multiplier * view2.attribute2 + constant
http://pilky.me/view/36
constraints
Screw-ups
invisible view {
{crash
{undefined
Size not set
Invalid
Ambiguous
Unsatisfiable
Unsatisfiable
Invalid
Ambiguous
view.hasAmbiguousLayout
view.exerciseAmbiguityInLayout
for (UIView *view in self.subviews) {
if ([view hasAmbigu...
instrinsicContentSize
Suggested size for the view.
- (CGSize) intrinsicContentSize {
return mySize;
}
[self invalidateIntr...
Alignment rectangle
UIView
- (UIEdgeInsets)alignmentRectInsets
- (CGRect)frameForAlignmentRect:(CGRect)alignmentRect
- (CG...
Hug & compress
Hugging resists stretching
Compression resists shrinking
UILayoutConstraintAxis axis = UILayoutConstraintAx...
UIView properties
Interface Builder > VFL > API
Animation
Interface Builder
Interface Builder
Interface Builder
Interface Builder
Interface Builder
Interface Builder
IB > VFL > API
Constraints colors
IB can’t create ambiguous layouts
Add a constraint before deleting ano...
UIView properties
Interface Builder > VFL > API
Animation
Visual Format Language
VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-|"
! options:0
! metrics:nil
! views:@{ @"buttonA" :...
VFL
H V [view] | - @ ()
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-|"
! options:0
! metrics:nil
! v...
VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-|"
! options:0
! metrics:nil
! views:@{ @"buttonA" :...
VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|"
! options:0
! metrics: @{ @"distance": @...
VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|"
! options:0
! metrics: @{ @"distance": @...
VFL
[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|"
! options:0
! metrics: @{ @"distance": @...
VFL
H V [view] | - @ ()
H:[view1][view2]
H:[view1]-[view2]
H:[view1]-30-[view2]
H:[view1]-(==30)-[view2]
H:|[view1]-[view2]|
H:|-[view1]-(>=0)-[view2]-|
H:|-[view1(>=125,<=250)]-(>=0)-[view2]-|
H:[view1(>=view2)][view2]
H:[button(100@20)]
H:|[view1]-(>=50@30)-[view2]|
H:|-[view1(==view2)]-[view2]-|
H:[view1(view2)]
...
100x100 Square
- (void)viewDidLoad
{
[super viewDidLoad];
self.blueView.translatesAutoresizingMaskIntoConstraints = NO;
[s...
UIView properties
Interface Builder > VFL > API
Animation
UIView API
UIView API
Opting in to Constraint-Based Layout
+ requiresConstraintBasedLayout
– translatesAutoresizingMaskIntoConstraint...
UIView API
Aligning Views with Constraint-Based Layout
– alignmentRectForFrame:
– frameForAlignmentRect:
– alignmentRectIn...
CALayer API
CALayer
– layoutIfNeeded
UIViewController
viewDidLoad
- autolayout-
viewDidLayoutSubviews
viewDidAppear
[self.view layoutIfNeeded]
UIView properties
Interface Builder > VFL > API
Animation
Animation
Animation
#238: Animate the constant
constant
self.someConstraint.constant = 10.0;
[UIView animateWithDuration:0.25 animations:^{
[self.view layoutIfNeeded];
}...
Animation
#238: Animate the constant.
#238: Call layoutIfNeeded in a block.
layoutIfNeeded
- (BOOL)continueTrackingWithTouch:(UITouch *)touch
withEvent:(UIEvent *)event
{
! CGPoint touchPoint = [tou...
Animation
#238: Animate the constant.
#238: Call layoutIfNeeded in a block.
Animate layers instead of views.
Layer animation
// jumpy
[UIView animateWithDuration:0.3 delay:0
options:UIViewAnimationOptionAutoreverse
animations:^{
v....
Animation
#238: Animate the constant.
#238: Call layoutIfNeeded in a block.
Animate layers instead of views.
Drop constrai...
Animation
#238: Animate the constant
#238: Call layoutIfNeeded in a block
Animate layers instead of views.
Drop constraint...
Animation
#238: Animate the constant.
#238: Call layoutIfNeeded in a block.
Animate layers instead of views.
Drop constrai...
Animation
#238: Animate the constant.
#238: Call layoutIfNeeded in a block.
Animate layers instead of views.
Drop constrai...
Animating Rotations
Fading in/out during rotation
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)to
duration:(NSTimeInterval...
Update and animate changes
- (void) willAnimateRotationToInterfaceOrientation:
(UIInterfaceOrientation)to
duration:(NSTime...
Calling updates
UIDeviceOrientation newOrientation;
- (void) updateViewConstraints
{
! [super updateViewConstraints];
! [s...
References
#202 WWDC 2012: Introduction to Auto Layout for iOS and OS X
#228 WWDC 2012: Best Practices for Mastering Auto ...
Autolayout
Autolayout
Autolayout
Autolayout
Autolayout
Upcoming SlideShare
Loading in...5
×

Autolayout

3,862

Published on

Recorrido por todos los aspectos relevantes del uso de autolayout en iOS.

Published in: Technology, Business
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,862
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
78
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Autolayout

  1. 1. jano@jano.com.es LayoutAuto
  2. 2. LayoutAuto Layout
  3. 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. 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
  5. 5. Layout AutoLayout AutoLayout
  6. 6. LayoutAutoLayout
  7. 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. 8. What do I need to know?
  9. 9. What do I need to know? UIView properties alignmentRectInsets constraints contentSize compression hugging translatesAutoresizingMaskIntoConstraints
  10. 10. What do I need to know? UIView properties Interface Builder > VFL > API
  11. 11. What do I need to know? UIView properties Interface Builder > VFL > API UIViewController lifecycle
  12. 12. What do I need to know? UIView properties Interface Builder > VFL > API Animation
  13. 13. UIView Properties
  14. 14. constraints Layout Content Autosizing NSLayoutConstraint NSContentSizeLayoutConstraint NSAutoresizingMaskLayoutConstraint
  15. 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. 16. constraints ! [NSLayoutConstraint ! constraintWithItem: button ! attribute: NSLayoutAttributeCenterX ! relatedBy: NSLayoutRelationEqual ! toItem: superview ! attribute: NSLayoutAttributeCenterX ! multiplier: 1.0 ! constant: 0.0]
  17. 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. 18. constraints view1.attribute1 RELATION multiplier * view2.attribute2 + constant linear equations Cassowary Linear Arithmetic Constraint Solving Algorithm Pro tip: Use local flat hierarchies.
  19. 19. constraints view1.attribute1 RELATION multiplier * view2.attribute2 + constant http://pilky.me/view/36
  20. 20. constraints view1.attribute1 RELATION multiplier * view2.attribute2 + constant http://pilky.me/view/36
  21. 21. constraints Screw-ups invisible view { {crash {undefined Size not set Invalid Ambiguous Unsatisfiable
  22. 22. Unsatisfiable
  23. 23. Invalid
  24. 24. Ambiguous view.hasAmbiguousLayout view.exerciseAmbiguityInLayout for (UIView *view in self.subviews) { if ([view hasAmbiguousLayout]){ NSLog(@"<%@:0x%0x>", view.description, (int)self); } }
  25. 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. 26. Alignment rectangle UIView - (UIEdgeInsets)alignmentRectInsets - (CGRect)frameForAlignmentRect:(CGRect)alignmentRect - (CGRect)alignmentRectForFrame:(CGRect)frame Show rect lines:
  27. 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. 28. UIView properties Interface Builder > VFL > API Animation
  29. 29. Interface Builder
  30. 30. Interface Builder
  31. 31. Interface Builder
  32. 32. Interface Builder
  33. 33. Interface Builder
  34. 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. 35. UIView properties Interface Builder > VFL > API Animation
  36. 36. Visual Format Language
  37. 37. VFL [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-|" ! options:0 ! metrics:nil ! views:@{ @"buttonA" : buttonA }];
  38. 38. VFL H V [view] | - @ () [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-|" ! options:0 ! metrics:nil ! views:@{ @"buttonA" : buttonA }];
  39. 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. 40. VFL [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|" ! options:0 ! metrics: @{ @"distance": @50 } ! views:@{ @"buttonA" : buttonA }];
  41. 41. VFL [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|" ! options:0 ! metrics: @{ @"distance": @50 } ! views:@{ @"buttonA" : buttonA }];
  42. 42. VFL [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-distance-|" ! options:0 ! metrics: @{ @"distance": @50 } ! views:NSDictionaryOfVariableBindings(buttonA)];
  43. 43. VFL H V [view] | - @ ()
  44. 44. H:[view1][view2]
  45. 45. H:[view1]-[view2]
  46. 46. H:[view1]-30-[view2] H:[view1]-(==30)-[view2]
  47. 47. H:|[view1]-[view2]|
  48. 48. H:|-[view1]-(>=0)-[view2]-|
  49. 49. H:|-[view1(>=125,<=250)]-(>=0)-[view2]-|
  50. 50. H:[view1(>=view2)][view2]
  51. 51. H:[button(100@20)] H:|[view1]-(>=50@30)-[view2]| H:|-[view1(==view2)]-[view2]-| H:[view1(view2)] ...
  52. 52. 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]]; } }
  53. 53. UIView properties Interface Builder > VFL > API Animation
  54. 54. UIView API
  55. 55. 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:
  56. 56. 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
  57. 57. CALayer API CALayer – layoutIfNeeded
  58. 58. UIViewController viewDidLoad - autolayout- viewDidLayoutSubviews viewDidAppear [self.view layoutIfNeeded]
  59. 59. UIView properties Interface Builder > VFL > API Animation
  60. 60. Animation
  61. 61. Animation #238: Animate the constant
  62. 62. constant self.someConstraint.constant = 10.0; [UIView animateWithDuration:0.25 animations:^{ [self.view layoutIfNeeded]; }];
  63. 63. Animation #238: Animate the constant. #238: Call layoutIfNeeded in a block.
  64. 64. 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; }
  65. 65. Animation #238: Animate the constant. #238: Call layoutIfNeeded in a block. Animate layers instead of views.
  66. 66. 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];
  67. 67. Animation #238: Animate the constant. #238: Call layoutIfNeeded in a block. Animate layers instead of views. Drop constraints, use autosizing masks.
  68. 68. 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.
  69. 69. 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.
  70. 70. 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.
  71. 71. Animating Rotations
  72. 72. 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; ! }]; }
  73. 73. Update and animate changes - (void) willAnimateRotationToInterfaceOrientation: (UIInterfaceOrientation)to duration:(NSTimeInterval)duration { ! [UIView animateWithDuration:duration animations:^{ ! ! [self updateViewConstraints]; ! ! [self.view layoutIfNeeded]; ! }]; }
  74. 74. 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]; }
  75. 75. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×