Auto Layout is one of the most important system that lets one manage layout of ones application user interface. As we know, Apple supports different screen sizes in their devices, therefore managing application user interface becomes difficult.

1. 1
Auto Layout
Presenter: Waseem Ahmad, Mindfire Solutions
Date: 04/03/2015

2. Today
Presenter: Waseem Ahmad, Mindfire Solutions
What is Autolayout?
Why do we need Autolayout?
Autolayout via StoryBoard.
Intrinsic Content Size.
Content Hugging & Content Resistance Priority.
Auto Layout Demo.

3. What is Autolayout?
• Setting UIView frames using rules rather than numbers. i.e No use of auto resizing
mask.
• We need to put some rules on the views in their place no matter what bounds are
available. We call these rules “constraints”.
• There is a very powerful API (NSLayoutConstraint) for doing this using code, but We
almost set up these rules in Xcode graphically i.e storyboard or xib.
• Today, we will discuss these rules using storyboard.
Presenter: Waseem Ahmad, Mindfire Solutions

4. Why do we need Autolayout?
Because many things affect the size of the area available to put views
•Multiple iOS versions (6, 7, 8, 9?)
•Screen sizes, iPhone 4, 4S, 5, 5S, 6, 6 Plus & iPad Variations
•To support autorotation (Portrait vs Landscape)
•Dynamic Content
•Localization
Presenter: Waseem Ahmad, Mindfire Solutions

5. Autolayout via storyboard?
The fundamental building block in Auto Layout is the constraint (rules).
Constraints express rules for the layout of elements in your interface and apply
attributes “left, right, top, bottom, leading, trailing, width, height, centerX, centerY,
and baseline” etc.
Presenter: Waseem Ahmad, Mindfire Solutions

6. How to apply Rules?
•Adding Constraints with Control-Drag
•Adding Constraints with Align and Pin Menus
Presenter: Waseem Ahmad, Mindfire Solutions

7. Intrinsic Content Size
The size of the view based on the content it display.
•For example, UILabel has a preferred height based on the font, and a preferred
width based on the font and the text it displays.
•A UIProgressView only has a preferred height based on its artwork, but no preferred
width.
•A plain UIView has neither a preferred width nor a preferred height.
Presenter: Waseem Ahmad, Mindfire Solutions

8. Intrinsic Content Size
•We do not want to add explicit width and hight constraints to a view that has an
intrinsic content size.
•At run time, infer size based on content, grow and resize dynamically.
•It depends on two constants per direction (horizontally, vertically)
• Content Hugging
• Content Resistance
Presenter: Waseem Ahmad, Mindfire Solutions

9. Content Hugging & Content
Resistance Priority
Content Hugging Priority
• High Value, don’t want to grow.
Content Resistance Priority
• High value fight to shrink, maintaining it’s intrinsic content size.
Presenter: Waseem Ahmad, Mindfire Solutions

10. Content Hugging & Content
Resistance Priority
•Both horizontal and vertical priorities (between 0 to 1000).
•Value doesn’t matter, you need to decide the priority between 2 items.
Presenter: Waseem Ahmad, Mindfire Solutions

11. Demo
• Login Screen
Presenter: Waseem Ahmad, Mindfire Solutions

12. Key principles for Auto Layout
•Think and define relationship between views and superview.
•Constraints must be sufficient and not conflict.
• Less try to use less magic numbers.
•Don’t over-specify constraints. Just say as little as possible to communicate the
layout and no more.
•Avoid letting IB define constraints for you. Unless your view is very simple, IB will
probably get it wrong.
•Mastering Autolayout is depend on experience and practice.
Presenter: Waseem Ahmad, Mindfire Solutions

13. References
- Apple WWDC 2013
- Apple WWDC 2014
- Apple Inc. “Autolayout Guide”.
- Standford Autolayout Demo “http://www.stanford.edu"
Presenter: Waseem Ahmad, Mindfire Solutions

14. Presenter: Waseem Ahmad, Mindfire Solutions
Question and Answer

15. Thank you
Presenter: Waseem Ahmad, Mindfire Solutions