Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
今だからはじめる
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/
Work...
今だからはじめたいな
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が、複数の状態や...
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”にて
「最新のOS2つをサポートすると良い」
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.mainScr...
UIScreenとUIWindow
(0.0)
UIScreen
UIWindow
(0.0)
First app
Second app
iOS8以前の回転動作
func willRotateToInterfaceOrientation(toInterfaceOrientation:
UIInterfaceOrientation, duration: NSTimeInterval...
iOS8以前の回転動作
func willRotateToInterfaceOrientation(toInterfaceOrientation:
UIInterfaceOrientation, duration: NSTimeInterval...
iOS8以降の回転動作
func willTransitionToTraitCollection(newCollection: UITraitCollection,
withTransitionCoordinator coordinator: ...
回転とSize Class
Setup
Create Animation
Run Animation
Cleanup
willTransitionToTraitCollection
viewWillTransitionToSize
traitC...
回転とSize Class
Setup
Create Animation
Run Animation
Cleanup
willTransitionToTraitCollection
viewWillTransitionToSize
traitC...
マルチタスクとSize Class
First App
マルチタスクとSize Class
Compact
Regular
マルチタスクとSize Class
Compact
Regular
willTransitionToTraitCollection
traitCollectionDidChange
は呼ばれない
マルチタスクとSize Class
Regular
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, v...
Auto Layout編
完
まとめ
• Adaptiveとは状態に依存しないレイアウト
• その為に、回転とマルチタスクを考慮
• Size ClassとAuto Layoutを有効活用し困難を乗り切る
今だからはじめるAdaptive User Interface
Upcoming SlideShare
Loading in …5
×

今だからはじめるAdaptive User Interface

RettyTechCafe#3(https://atnd.org/events/67600?k=7354db04e85b531fa341198c35c53104)にて。

  • Login to see the comments

今だからはじめるAdaptive User Interface

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

×