iOS Adaptive User Interfaces

iOS Adaptive user interfaces

Agenda

• What is Adaptive layout ?

• Why Adaptive Layout ?

• Limitation

A step back…

Before iOS 8

• iPhone

• 320 x 480 pt (@1x.png, @2x png)

• 320 x 568 pt (@2x.png)

• iPad

• 768 x 1024 pt (@1x~ipad.png, @2x~ipad)

After iOS 8• iPhone

• 320 x 480 pt (@1x.png, @2x png)

• 320 x 568 pt (@2x.png)

• 375 x 667 pt (@2x.png)

• 414 x 736 pt (@3x.png)

• iPad

• 768 x 1024 pt (@1x~ipad.png, @2x~ipad)

What is Adaptive Layout?

What is Adaptive Layout?

• New default layout system for iOS 8

• Dynamically adapts UI to varying screen sizes

• Coupled with Auto-Layout

• Size Classes

How enable ?

Abstract representation of screen

Size Classes

• Regular and Compact

• Describe layout in terms of Horizontal and Vertical size

• Replaces UIInterfaceOrientation and UIInterfaceIdiom

Traits and TraitCollections• Horizontal and vertical size class are identified as traits

• UITraitCollection Structure:

• Horizontal size class - Regular / Compact

• Vertical size class - Regular / Compact

• User interface idiom - iPhone / iPad / iPod Touch

• Display scale - 1.0 / 2.0

• Can be accessed to determine current size class (self.traitCollection)

!

Showing and Presenting View Controllers

• Adaptively shows/presents view controllers appropriately based on containing view controller/parent trait environment

• Examples:

• Navigation Controller

• SplitViewController

• Popovers

• Child view controllers do not need to be aware of their parent view controller to show or present another view controller

• Use [self showViewController:animated:] instead of [self.navigationController pushViewController:animated:]

• Use [self presentViewController:animated:] for popovers and action sheets

Why adaptive layout ?

Advantages

• Reduces amount of code

Advantages

• Reduces amount of code

• Layout on Storyboard

Advantages

• Reduces amount of code

• Layout on Storyboard

• Automatic rotation handling (in most cases)

• Universal Storyboard

• Allows to support wide range of screens

Assets library

• Allows separate versions of an image to be used per size class

Limitations

Not Size Classes aware• Most UI objects properties

• label color, button text, collection view layout attributes

• Properties of constraints

• priority

• multiplier

Warnings

• Check what Class is selected

• Xcode 5 will reset all Size Classes customization

• Commit Storyboard often

Q & A

Links• Gene Whitaker - Adaptive Layout http://www.bombingbrain.com/

demo/cocoaheads/AdaptiveLayout.pdf

• WWDC 2014 Session Videos:

• 216 - Building Adaptive Apps with UIKit

• 228 - A Look Inside Presentation Controllers

• 411 - What’s New in Interface Builder

• Adaptive User Interfaces http://developer.apple.com/design/adaptivity/