今だからはじめるadaptive user interface
TRANSCRIPT
今だからはじめる Adaptive User Interface
2015/08/07 Yusuke Kawanabe
Yusuke Kawanabe @jeffsuke
Mobile App Developer at Gunosy
Blog: Jeffsuke is not a pen. http://jeffsuke.hatenablog.com/
Working on Auto Layout book
今だからはじめたいな Adaptive User Interface
本日のテーマ
from Getting Started with Multitasking on iPad in iOS 9 https://developer.apple.com/videos/wwdc/2015/?id=205
Gunosyアプリを Adaptiveにするなら
本日のテーマ
という妄想
Adaptive User Interface
Adaptive User Interface?
どんな画面サイズや向きでもサポートする事によってアプリの経験は格段に向上します。iOS8におけるView Controlerの進化や、XcodeにおけるAuto Layoutが、複数の状態やデバイスサイズの違いに対して、あなたのアプリをより簡単にAdapt（適応）することを可能にします。
from https://developer.apple.com/design/adaptivity/ （Yusuke Kawanabe意訳）
Adaptive User Interface?
以下が出来ている状態
• 複数画面サイズ対応
• 複数画面向き対応
はじめてみよう
iPhone版 iPad版
記事リスト 詳細
UISplitViewController
• MasterView/DetailViewのレイアウトを実現できる。
• iPhoneならナビゲーション、iPadならスプリットビューを表示してくれる。
UISplitViewController
Master Detail
Adaptive Layout対応できた！
Adaptive User Interfaceまでの道のり
• iPadマルチタスクに対応する
• Size Classを用いて複数画面サイズ、回転に対応する
• Auto Layoutを有効活用しレイアウトを生成する
前提
WWDC 2015”Cocoa Touch Best Practices”にて
「最新のOS２つをサポートすると良い」
iOS8、iOS9対応と仮定
マルチタスク編
マルチタスク対応に必要な事
• iOS 9 SDKでビルドする
• Launch Stroyboardを使う
• 全てのオリエンテーションをサポート
マルチタスク対応に必要な事
• iOS 9 SDKでビルドする
• Launch Stroyboardを使う
• 全てのオリエンテーションをサポート
マルチタスク対応に必要な事
• iOS 9 SDKでビルドする
• Launch Stroyboardを使う
• 全てのオリエンテーションをサポート
気になること
• 簡単にマルチタスクに対応アプリになってしまう。マルチタスキング対応の条件を満たしており、横幅がCompactのレイアウト等の従来iPadアプリを作る上で必要なかったレイアウトを考慮していないアプリはリジェクト対象になってしまう可能性があるのでは？
マルチタスク編
完
Size Class編
Size Class
if UIScreen.mainScreen().bounds.width > 320.0 { // Do something }
Before iOS8
Size Class
enum UIUserInterfaceSizeClass: Int { case Unspecified case Compact case Regular }
After iOS8
Size Class for iPhone
Size Class for iPhone 6 Plus
Size Class for iPad
UITraitCollection
horizontalSizeClass Compact
verticalSizeClass Regular
userfaceIdiom Phone
displayScale 2.0
UIScreen
UIWindow
UIViewController
UIView
UITraitCollection
UIScreen
UIWindow
UIViewController
UIView
マルチタスキング時
horizontalSizeClass Compact
verticalSizeClass Regular
UIScreen.mainScreen().boundsUIWindow().bounds
UIScreenとUIWindow
(0.0)UIScreen
UIWindow(0.0)
First app
Second app
iOS8以前の回転動作
func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval)
func didRotateFromInterfaceOrientation(fromInterfaceOrientation: UIInterfaceOrientation)
func willAnimateRotationToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval)
UIViewController
iOS8以前の回転動作
func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval)
func didRotateFromInterfaceOrientation(fromInterfaceOrientation: UIInterfaceOrientation)
func willAnimateRotationToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval)
UIViewController
端末が縦向きだとか横向きだとか いう時代は終わった！
iOS8以降の回転動作
func willTransitionToTraitCollection(newCollection: UITraitCollection, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator)
UITraitEnvironment
UIContentContainer
func traitCollectionDidChange(previousTraitCollection: UITraitCollection?)
回転とSize ClassSetup
Create Animation
Run Animation
Cleanup
willTransitionToTraitCollectionviewWillTransitionToSizetraitCollectionDidChange
回転とSize ClassSetup
Create Animation
Run Animation
Cleanup
willTransitionToTraitCollectionviewWillTransitionToSizetraitCollectionDidChange
マルチタスクとSize Class
First App
マルチタスクとSize ClassCompact
Regular
マルチタスクとSize ClassCompact
Regular
willTransitionToTraitCollection traitCollectionDidChange は呼ばれない
マルチタスクとSize ClassRegular
Regular
Size Class編まとめ
• UITraitCollectionを知る
• 回転挙動を把握する
• Split Viewの挙動を把握する
Auto Layout編
Auto Layout
iOS8以上対応なので出来る事が増える
• Self sizing Cell
• Perfomance Concern
Self Sizing Cell
iOS7以前
• セルのインスタンスを生成し、オフスクリーンでレイアウト実行しセルの高さを取得していた。
iOS8以降
• セルが表示される直前に、セルの高さを自動で計算。
Self Sizing Cell
tableView.estimatedRowHeight = 120.0 tableView.rowHeight = UITableViewAutomaticDimension
Perfomanceの向上
let constraints = [ NSLayoutConstraint.constraintsWithVisualFormat("|[view]|", options: nil, metrics: nil, views: views) ]
NSLayoutConstraint.activateConstraints(constraints)
Auto LayoutエンジンはConstraintsが追加削除されると都度レイアウトの計算を実行する。
Constraintsの追加削除ではなく、Constraintsの有効化を使う。
Auto Layout編
完
まとめ
• Adaptiveとは状態に依存しないレイアウト
• その為に、回転とマルチタスクを考慮
• Size ClassとAuto Layoutを有効活用し困難を乗り切る