今だからはじめるAdaptive User Interface

今だからはじめる 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を有効活用し困難を乗り切る