adaptive layout in ios 8

1

ADAPTIVE LAYOUTS

Presenter: Waseem Ahmad, Mindfire SolutionsDate: 17/05/2015

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?

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.


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.


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.


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.


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.


Size Classes


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.


Demo

• Size Class Demo


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 onecontainer called the trait collection (UITraitCollection)


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.


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.


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”.


Demo


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"



Question and Answer

Thank you


adaptive layout in ios 8

Software

waseem ahmad

size classes presenter

size classes iphone

adaptive layouts presenter

size display

adaptive ui

mindfire solutions date

certain size class