adapting to adaptive ui
DESCRIPTION
What's coming with iOS8 and why use Auto Layout and reactive web design for native iOS apps. Despark is a digital boutique that specializes in web, mobile & tablet projects. The work that we do in the studio is split between our own as well as projects for a range of startups, blue-chip brands, International corporations and local firms. Find us at despark.com.TRANSCRIPT
Adapting to Adaptive UI
Светослав ВеличковiOS жонгльор
Какво ни очаква?
• Adaptive UI • Auto Layout & Asset Catalog • Size Classes, Trait Collections & Trait Environments • Content Containers & Presentation Controllers
iOS 8
iOS 8
(следващите 25 минути и в бъдещето на iOS)
Adaptive какво? Какъв UI?
“Ще спестим милиони от ремонт на износени i и f клавиши!”
– Craig Federighi (предполагам)
if ( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad )
if ( UIInterfaceOrientationIsPortrait(orientation) )
if ( IS_IPHONE5() )
#define IS_IPHONE5() \ ([[UIScreen mainScreen] bounds].size.height == 568)
Reactive Web Design for Native iOS Apps
Какво е Auto Layout?
Инертен интерфейс vs
Адаптивен интерфейс
Защо Auto Layout?
• Концептуално оформление на UI • По-малко код — по-малко грешки • Опростена локализация • Изключително подходящ за адаптивен UI
Защо не ползваме Auto Layout?
• Interface Builder в Xcode 4
• Многословно API в код
• Анимации без -setFrame:
Interface Builder в Xcode 5+Вече с 200% повече страхотна Auto Layout поддръжка и
витамин C!
Auto Layout в код@interface UIView (MPSAutoLayout) !- (NSLayoutConstraint*)mps_attachViewBelowView:(UIView*)previousView padding:(CGFloat)padding; !@end !@implementation UIView (MPSAutoLayout) !- (NSLayoutConstraint*)mps_attachViewBelowView:(UIView*)previousView padding:(CGFloat)padding; { NSLayoutConstraint* constraint = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:padding]; UIView* commonAncestor = [self mps_commonAncestorViewWithView:previousView]; [commonAncestor addConstraint:constraint]; return constraint; }
• https://github.com/smileyborg/PureLayout
• https://github.com/erica/Auto-Layout-Demystified
• https://github.com/rentzsch/AutoLayoutShorthand
Анимация с Auto Layout
• подмяна на NSLayoutConstraints • промяна на constant • промяна на priority — по-добре не
Asset Catalog
Size Classes
typedef NS_ENUM (NSInteger, UIUserInterfaceSizeClass { UIUserInterfaceSizeClassUnspecified = 0, UIUserInterfaceSizeClassCompact = 1, UIUserInterfaceSizeClassRegular = 2, };
UITraitCollection
UITraitCollection • horizontalSizeClass • verticalSizeClass • userInterfaceIdiom (UI_USER_INTERFACE_IDIOM()) • displayScale
UITraitEnvironment
- traitCollection - traitCollectionDidChange:
UITraitEnvironment
• UIScreen • UIWindow • UIView • UIViewController • UIPresentationController
Специална поддръжка на UITraitCollection
• UIImage (UIImageAsset) • UIAppearance
Size Class MatrixCompact Regular
Compact iPhone landscape —
Regular iPhone portrait iPad
Size Class MatrixCompact Regular
Compact
Regular
• UIViewController - overrideTraitCollectionForChildViewController: - setOverrideTraitCollection:forChildViewController:
• UIPresentationController @property overrideTraitCollection
• UISplitViewController / UINavigationController - showViewController:sender: - showDetailViewController:sender:
UIViewControllerRotation
- willRotateToInterfaceOrientation:duration: - didRotateFromInterfaceOrientation: - willAnimateRotationToInterfaceOrientation:
- viewWillTransitionToSize:withTransitionCoordinator:
UIPresentationControllerне UIViewController subclass
Как работи
• id <UIViewControllerTransitioningDelegate> • - presentationControllerForPresentedViewController:
presentingViewController: sourceViewController:
• presentationController.delegate = presentingViewController • - presentationController:viewControllerForAdaptivePresentationStyle:
Какъв е резултатът
• UIPopoverController • UIAlertController • UISearchController (≠ UISearchDisplayController)
Xcode 6 Interface Builder
Demo
Обобщение• Мигрирайте към Auto Layout • Използвайте Asset Catalog • iOS 8
• Единен Storyboard за всички размери екрани • traitCollectionDidChange: • Забравете UIInterfaceOrientation и
UIViewControllerRotation • Модални контролери чрез UIPresentationController
Полезни WWDC'14 сесии:
• 216 - Building Adaptive Apps with UIKit • 228 - A Look Inside Presentation Controllers • 214 - View Controller Advancements in iOS 8 • 411 - What's New in Interface Builder • 233 - Sharing code between iOS and OS X • 221 - Creating Custom iOS User Interfaces
Светослав Величков[email protected]