Auto-Layout
in iOS 7

By Pushpendra Singh
Layout

Layout Consist of four things:
• Center
• Bounds
• Auto-resizing mask
• Transform
Auto Layout

Using Auto Layout, you can create a
dynamic and versatile interface that
responds appropriately to changes in...
Basic Concept
Expression of the form y = m*x + b,
where:
y and x are attributes of views.
m and b are floating point value...
constraints

Layout NSLayoutConstraint
Content NSContentSizeLayoutConstraint
AutosizingNSAutoresizingMaskLayoutConstraint
Constraints Attribute
view1.attribute1 RELATION multiplier * view2.attribute2 +
constant
NSLayoutAttributeLeft
NSLayoutAtt...
Constraints Code
view1.attribute1 RELATION multiplier * view2.attribute2 +
constant
constraint = [NSLayoutConstraint
const...
Check For Ambiguous Layout

view.hasAmbiguousLayout
view.exerciseAmbiguityInLayout

for (UIView *view in self.subviews) {
...
Intrinsic ContentSize

Suggested size for the view.
- (CGSize) intrinsicContentSize {
return mySize;
}
[self invalidateInt...
Visual Format Language

[NSLayoutConstraint
! constraintsWithVisualFormat:@"H:|-[buttonA]-|" ! options:0
! metrics:nil
! v...
UIView
Opting in to Constraint-Based Layout
+ requiresConstraintBasedLayout
– translatesAutoresizingMaskIntoConstraints
– ...
UIView

Aligning Views with Constraint-Based Layout
–
–
–
–

alignmentRectForFrame:
frameForAlignmentRect:
alignmentRectIn...
Queries
Auto-Layout in iOS 7
Auto-Layout in iOS 7
Upcoming SlideShare
Loading in...5
×

Auto-Layout in iOS 7

720

Published on

On iPhone and iPad if one's designs were reasonably complex, you would have to be involved in writing a lot of
code to support such adaptive layouts. With Auto Layout it makes it easy to support different screen sizes in your apps.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
720
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Auto-Layout in iOS 7

  1. 1. Auto-Layout in iOS 7 By Pushpendra Singh
  2. 2. Layout Layout Consist of four things: • Center • Bounds • Auto-resizing mask • Transform
  3. 3. Auto Layout Using Auto Layout, you can create a dynamic and versatile interface that responds appropriately to changes in screen size, device orientation, and localization.
  4. 4. Basic Concept Expression of the form y = m*x + b, where: y and x are attributes of views. m and b are floating point values. An attribute is one of left, right, top, bottom, leading, trailing, width, height, centerX, centerY, and baseline.
  5. 5. constraints Layout NSLayoutConstraint Content NSContentSizeLayoutConstraint AutosizingNSAutoresizingMaskLayoutConstraint
  6. 6. Constraints Attribute view1.attribute1 RELATION multiplier * view2.attribute2 + constant NSLayoutAttributeLeft NSLayoutAttributeRight NSLayoutAttributeTop NSLayoutAttributeBottom NSLayoutAttributeLeading NSLayoutAttributeTrailing NSLayoutAttributeWidth NSLayoutAttributeHeight NSLayoutAttributeCenterX NSLayoutAttributeCenterY NSLayoutAttributeBaseline NSLayoutRelationEqual NSLayoutRelationGreaterThanOrEqual NSLayoutRelationLessThanOrEqual NSLayoutAttributeNotAnAttribute
  7. 7. Constraints Code 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];
  8. 8. Check For Ambiguous Layout view.hasAmbiguousLayout view.exerciseAmbiguityInLayout for (UIView *view in self.subviews) { if ([view hasAmbiguousLayout]){ NSLog(@"<%@:0x%0x>", view.description, (int)self); } }
  9. 9. Intrinsic ContentSize 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));
  10. 10. Visual Format Language [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-|" ! options:0 ! metrics:nil ! views:@{@"buttonA":buttonA}];
  11. 11. UIView 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:
  12. 12. UIView 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
  13. 13. Queries
  1. A particular slide catching your eye?

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

×