adapting to adaptive ui

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

Светослав Величковsvelichkov@despark.com