The document outlines a presentation on adaptive layouts by Waseem Ahmad from Mindfire Solutions, focusing on the need for adaptive design in app development for iOS. Key topics include the definition and implementation of adaptive layouts, size classes, and trait collections, which help create responsive user interfaces that can adjust to various devices and orientations. The presentation also covers the use of Auto Layout and how to manage constraints to ensure optimal user experience across different screen sizes.

1. 1
ADAPTIVE LAYOUTS
Presenter: Waseem Ahmad, Mindfire Solutions
Date: 17/05/2015

2. Today
Presenter: Waseem Ahmad, Mindfire Solutions
• Why do we need ADAPTIVE LAYOUTS?
• What is ADAPTIVE LAYOUTS?
• Size Classes.
• Choosing a Size Class in Interface Builder.
• Size Class, Demo.
• Other Adaptive Design Technologies
(TraitCollection).
• Trait Environment
• How to use Trait Environment?

3. What we had discussed…
•We had discussed AutoLayout in the last seminar.
•Autolayout is nothing just a rules (constrain) for defining UI.
•We need to put some rules on the views in their place no matter what bounds are
available. We call these rules “constraints”.
•Leading and trailing space, Horizontal space constraint, Equal widths constraint,
Aspect ratio constraint etc
• We also discussed how to manage constraints, add constraints, review & edit
existing constraints, remov constraints, Layout issues & conflicts, Misplaced views
warning, Missing constraint error.
Presenter: Waseem Ahmad, Mindfire Solutions

4. Why do we need ADAPTIVE
LAYOUTS?
•We can manage UI alignment using Autolayout. How UI component needs to do
adjust according to layout.
•What about rotation?
Sometimes rotating changes the geometry so drastically that autolayout is not
enough. You actually need to reposition the views to make them for properly.
Example:-
•iPhone Calculator Application. Landscape UI is different from Portrait UI.
Landscape have the buttons 10 across and 5 down versus in portrait have them 4
across and 5 down.
The Solution? Adaptive Layout.
Presenter: Waseem Ahmad, Mindfire Solutions

5. Presenter: Waseem Ahmad, Mindfire Solutions

6. What is ADAPTIVE LAYOUTS?
•Apple introduced Adaptive UI, a method of building apps that are based on the size
and characteristics of the container instead of targeting a particular device.
•Adaptive layouts which includes size classes, trait collections etc.
•We can now create a single layout, which works on all current iOS devices – without
crufty platform-specific code.
•Supporting any size display or orientation of a device allows us to create a great
user experience with our app.
Presenter: Waseem Ahmad, Mindfire Solutions

7. Size Classes
• A size class identifies a relative amount of display space for the height & width or
vertically & horizontally.
• Size class categories each dimension into two terms:-
• Regular
• Compact
•Our view controller always exists in a certain “size class” for width and height which
is either Regular or Compact.
• Because much of the layout of an app does not need to change for any available
screen size, there is an additional value, any.
Presenter: Waseem Ahmad, Mindfire Solutions

8. Size Classes
• iPhone, iPhone 6+ (Portrait)
Compact in Width, Regular in Height
•iPhone (Landscape)
Compact in Both Width and Height.
•But for the iPhone 6+ Portrait definition is same as non iPhone 6+ devices. In
landscape. It’s Compact in height and Regular in width.
•iPad always Regular in both dimension.
•An MVC that is the master in side by side split view will be Compact in Width and
Regular in Height.
Presenter: Waseem Ahmad, Mindfire Solutions

9. Size Classes
Presenter: Waseem Ahmad, Mindfire Solutions

10. Presenter: Waseem Ahmad, Mindfire Solutions

11. Size Classes using storyboard
- Start designing with any width and height size.
- Use Autolayout to design flexible UI.
- To design for more specific available areas, choose appropriate size classes.
- Override subviews and constraints for specific classes if needed. Example change
the font used to display text, and add, remove, or edit constraints etc.
- See preview how its layout appears on specific devices from within Xcode.
Presenter: Waseem Ahmad, Mindfire Solutions

12. Demo
• Size Class Demo
Presenter: Waseem Ahmad, Mindfire Solutions

13. Traits Collection
•Traits collection are properties to determine how to layout change of application as
environment change.
•Through it we can define
• Size class in both directions (Horizontally & Vertically)
• User interface idiom (iPhone or iPad)
• Display Scale (1, 2 or 3)
•All these properties wrapped inside one
container called the trait collection
(UITraitCollection)
Presenter: Waseem Ahmad, Mindfire Solutions

14. Trait Environment
•The iOS trait environment is exposed though the traitCollection property of the
UITraitEnvironment protocol.
This protocol is adopted by the following classes:
• UIScreen
• UIWindow
• UIViewController
• UIPresentationController
• UIView.
Presenter: Waseem Ahmad, Mindfire Solutions

15. Trait Environment
•To make your view controllers and views responsive to changes in the iOS interface
environment, override the traitCollectionDidChange: method from the trait
environment protocol.
-(void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection;
•To customize view controller animations in response to interface environment
changes, override the willTransitionToTraitCollection:withTransitionCoordinator:
method of the UIContentContainer protocol.
Presenter: Waseem Ahmad, Mindfire Solutions

16. Trait Environment
•We can create standalone trait collections to assist in matching against specific
environments. The UITraitCollection class includes four specialized constructors as
well as a constructor that lets you combine an array of trait collections,
traitCollectionWithTraitsFromCollections:.
+ (UITraitCollection *)traitCollectionWithUserInterfaceIdiom:(UIUserInterfaceIdiom)idiom;
•We can associate a trait collection with a UIImage instance by way of a
UIImageAsset instance or graphically using “Asset Catalog”.
Presenter: Waseem Ahmad, Mindfire Solutions

17. Demo
Presenter: Waseem Ahmad, Mindfire Solutions

18. References
- Apple WWDC 2013
- Apple WWDC 2014
- Apple Inc. “Autolayout Guide”.
- MATHEW SANDERS Blog http://mathewsanders.com/designing-adaptive-
layouts-for-iphone-6-plus/
- Standford Autolayout Demo “http://www.stanford.edu"
Presenter: Waseem Ahmad, Mindfire Solutions

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

20. Thank you
Presenter: Waseem Ahmad, Mindfire Solutions