Adaptive Layout In iOS 8
•Download as PPT, PDF•
1 like•1,002 views
The introduction of Adaptive Layout in iOS 8 is a big paradigm shift for iOS app designers. When designing ones app, one can now create a single layout, which works on all current iOS 8 devices – without crafty platform-specific code!
Report
Share
Adaptive Layout In iOS 8
- 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