俺コン 2018 Summer / Day. 2

1. Adaptive UI
解像度の異なるデバイスや画面の向きに対応する
最適なレイアウトへ
Yuji Hato
俺コン 2018 Summer / Day. 2

2. Yuji Hato
CyberAgent, Inc. / AbemaTV, Inc.
dekatotoro
@dekatotoro
Contributed services
About me

3. Adaptive UI
Size Clases
AbemaTVの対応例
Practice
Agenda

4. Adaptive UI

5. Adaptive UI
https://developer.apple.com/videos/play/wwdc2016/222/
Device Size

6. https://developer.apple.com/videos/play/wwdc2016/222/
Adaptive UI
Device Size × Direction

7. https://developer.apple.com/videos/play/wwdc2016/222/
Adaptive UI
Device Size × Direction × Multitasking

8. https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
Adaptive UI
Device Size

9. https://developer.apple.com/videos/play/wwdc2016/233/
Adaptive UI
Device Size × Direction × Multitasking

10. デバイスのサイズや向き、状態に合わせて
最適なレイアウトにする
Adaptive UI

11. Size Classes

12. Size Classes
https://developer.apple.com/videos/play/wwdc2016/222/
Compact × Reqular 4 pattern

13. Size Classes
https://developer.apple.com/videos/play/wwdc2016/222/
Compact × Reqular 4 pattern

14. Size Classes
https://developer.apple.com/videos/play/wwdc2016/233/
Device Size × Direction × Multitasking

15. Size Classes
https://developer.apple.com/videos/play/wwdc2016/233/
Apply to size class

16. https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
Size Classes
Definition

17. https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
Size Classes
Definition for Multitasking

18. https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/AdoptingMultitaskingOniPad/QuickStartForSlideOverAndSplitView.html#//apple_ref/doc/uid/TP40015145-
CH13-SW3
Size Classes
Definition for Multitasking

19. https://developer.apple.com/videos/play/wwdc2016/222/
Size Classes
Many combinations → 4 pattern

20. public protocol UITraitEnvironment : NSObjectProtocol {
@available(iOS 8.0, *)
public var traitCollection: UITraitCollection { get }
@available(iOS 8.0, *)
public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?)
}
Size Classes

21. open class UIView : UIResponder, NSCoding, UIAppearance, UIAppearanceContainer, UIDynamicItem,
UITraitEnvironment, UICoordinateSpace, UIFocusItem, CALayerDelegate {
open class UIViewController : UIResponder, NSCoding, UIAppearanceContainer, UITraitEnvironment,
UIContentContainer, UIFocusEnvironment {
Size Classes

22. public protocol UITraitEnvironment : NSObjectProtocol {
@available(iOS 8.0, *)
public var traitCollection: UITraitCollection { get }
@available(iOS 8.0, *)
public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?)
}
Size Classes

23. @available(iOS 8.0, *)
open class UITraitCollection : NSObject, NSCopying, NSSecureCoding {
open var userInterfaceIdiom: UIUserInterfaceIdiom { get }
open var displayScale: CGFloat { get }
open var horizontalSizeClass: UIUserInterfaceSizeClass { get }
open var verticalSizeClass: UIUserInterfaceSizeClass { get }
@available(iOS 9.0, *)
open var forceTouchCapability: UIForceTouchCapability { get }
@available(iOS 10.0, *)
open var layoutDirection: UITraitEnvironmentLayoutDirection { get }
@available(iOS 10.0, *)
open var preferredContentSizeCategory: UIContentSizeCategory { get }
@available(iOS 10.0, *)
open var displayGamut: UIDisplayGamut { get }
…
}
Size Classes

24. @available(iOS 8.0, *)
open class UITraitCollection : NSObject, NSCopying, NSSecureCoding {
open var userInterfaceIdiom: UIUserInterfaceIdiom { get }
open var displayScale: CGFloat { get }
open var horizontalSizeClass: UIUserInterfaceSizeClass { get }
open var verticalSizeClass: UIUserInterfaceSizeClass { get }
@available(iOS 9.0, *)
open var forceTouchCapability: UIForceTouchCapability { get }
@available(iOS 10.0, *)
open var layoutDirection: UITraitEnvironmentLayoutDirection { get }
@available(iOS 10.0, *)
open var preferredContentSizeCategory: UIContentSizeCategory { get }
@available(iOS 10.0, *)
open var displayGamut: UIDisplayGamut { get }
…
}
Size Classes

25. Size Classes
https://developer.apple.com/videos/play/wwdc2016/222/
Compact × Reqular 4 pattern

26. extension UITraitCollection {
var isPortrait: Bool {
return verticalSizeClass == .regular && horizontalSizeClass == .compact
}
var isLandscape: Bool {
return verticalSizeClass == .compact && horizontalSizeClass == .regular
}
var isCompactLandscape: Bool {
return verticalSizeClass == .compact && horizontalSizeClass == .compact
}
var isRegularRegular: Bool {
return verticalSizeClass == .regular && horizontalSizeClass == .regular
}
}
Size Classes

27. public protocol UITraitEnvironment : NSObjectProtocol {
@available(iOS 8.0, *)
public var traitCollection: UITraitCollection { get }
@available(iOS 8.0, *)
public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?)
}
Size Classes

28. https://developer.apple.com/videos/play/wwdc2014/216/
Size Classes

29. https://developer.apple.com/videos/play/wwdc2014/216/
Size Classes

30. Size Classes
iPhone
初期表示
viewDidLoad
viewWillAppear
traitCollectionDidChange
viewWillLayoutSubviews
viewDidLayoutSubviews
viewDidAppear
回転時
willTransition(to:with:)
viewWillTransition(to:with:)
traitCollectionDidChange
viewWillLayoutSubviews
viewDidLayoutSubviews
iPad
初期表示
viewDidLoad
viewWillAppear
traitCollectionDidChange
viewWillLayoutSubviews
viewDidLayoutSubviews
viewDidAppear
回転時 (traitCollectionが変更ない場合)
viewWillTransition(to:with:)
viewWillLayoutSubviews
viewDidLayoutSubviews

31. Size Classes
iPhone
初期表示
viewDidLoad
viewWillAppear
traitCollectionDidChange
viewWillLayoutSubviews
viewDidLayoutSubviews
viewDidAppear
回転時
willTransition(to:with:)
viewWillTransition(to:with:)
traitCollectionDidChange
viewWillLayoutSubviews
viewDidLayoutSubviews
iPad
初期表示
viewDidLoad
viewWillAppear
traitCollectionDidChange
viewWillLayoutSubviews
viewDidLayoutSubviews
viewDidAppear
回転時 (traitCollectionが変更ない場合)
viewWillTransition(to:with:)
viewWillLayoutSubviews
viewDidLayoutSubviews

32. Practice

33. UITraitCollectionの変化によるlayout
変更
Practice

34. Practice

35. Practice
StackView
ScrollView
StackView
VIew
VIew
VIew
LeftView
ImageView
StackView
ScrollView
StackView
VIew
VIew
VIew
LeftView
ImageView

36. Practice

37. Practice

38. Practice

39. Practice

40. Practice

41. Practice

42. scrollが下のみになる
StackView
ScrollView
StackView
VIew
VIew
VIew
LeftView
ImageView
Practice

43. 全てScrollさせたい
StackView
ScrollView
StackView
VIew
VIew
VIew
LeftView
ImageView
Practice

44. override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.isPortrait {
if rootStackView.arrangedSubviews.contains(leftView) {
rootStackView.removeArrangedSubview(leftView)
leftView.removeFromSuperview()
}
if !scrollableStackView.arrangedSubviews.contains(leftView) {
scrollableStackView.insertArrangedSubview(leftView, at: 0)
}
} else {
if scrollableStackView.arrangedSubviews.contains(leftView) {
scrollableStackView.removeArrangedSubview(leftView)
leftView.removeFromSuperview()
}
if !rootStackView.arrangedSubviews.contains(leftView) {
rootStackView.insertArrangedSubview(leftView, at: 0)
}
}
}
Practice

45. override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.isPortrait {
if rootStackView.arrangedSubviews.contains(leftView) {
rootStackView.removeArrangedSubview(leftView)
leftView.removeFromSuperview()
}
if !scrollableStackView.arrangedSubviews.contains(leftView) {
scrollableStackView.insertArrangedSubview(leftView, at: 0)
}
} else {
if scrollableStackView.arrangedSubviews.contains(leftView) {
scrollableStackView.removeArrangedSubview(leftView)
leftView.removeFromSuperview()
}
if !rootStackView.arrangedSubviews.contains(leftView) {
rootStackView.insertArrangedSubview(leftView, at: 0)
}
}
}
Practice

46. override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.isPortrait {
if rootStackView.arrangedSubviews.contains(leftView) {
rootStackView.removeArrangedSubview(leftView)
leftView.removeFromSuperview()
}
if !scrollableStackView.arrangedSubviews.contains(leftView) {
scrollableStackView.insertArrangedSubview(leftView, at: 0)
}
} else {
if scrollableStackView.arrangedSubviews.contains(leftView) {
scrollableStackView.removeArrangedSubview(leftView)
leftView.removeFromSuperview()
}
if !rootStackView.arrangedSubviews.contains(leftView) {
rootStackView.insertArrangedSubview(leftView, at: 0)
}
}
}
Practice

47. StackView
ScrollView
StackView
VIew
VIew
VIew
LeftView
ImageView
StackView
ScrollView
StackView
VIew
VIew
VIew
LeftView
ImageView
Practice

48. Size変化によるlayout変更
Practice

49. Practice

50. Practice

51. Practice

52. Practice

53. static func cellSize(isPortrait: Bool,
parentSize: CGSize,
isRegularRegular: Bool,
safeArea: UIEdgeInsets) -> CGSize {
let nextContentRatio: Double = 0.2 // チラ見せ比率（適当）
let numberOfItems: Double = isPortrait ? 2 : 4 // (W:C, H:Rは)2つ、それ以外は4つ
let numberOfItemsFactor: Double = numberOfItems + nextContentRatio
let sideMargin: CGFloat = isRegularRegular ? 60 : 12
let cellSpace: CGFloat = 24
let margin = sideMargin + safeArea.left + safeArea.right
let totalCellSpace: CGFloat = margin + cellSpace * CGFloat(numberOfItems)
let remainWidth = parentSize.width - totalCellSpace
let width = remainWidth / CGFloat(numberOfItemsFactor)
let textAreaHeight: CGFloat = isRegularRegular ? 120 : 80
let thumbnailHeight = width / 16 * 9
let height = thumbnailHeight + textAreaHeight
return CGSize(width: width, height: height)
}
Practice
筋肉

54. static func cellSize(isPortrait: Bool,
parentSize: CGSize,
isRegularRegular: Bool,
safeArea: UIEdgeInsets) -> CGSize {
let nextContentRatio: Double = 0.2 // チラ見せ比率（適当）
let numberOfItems: Double = isPortrait ? 2 : 4 // (W:C, H:Rは)2つ、それ以外は4つ
let numberOfItemsFactor: Double = numberOfItems + nextContentRatio
let sideMargin: CGFloat = isRegularRegular ? 60 : 12
let cellSpace: CGFloat = 24
let margin = sideMargin + safeArea.left + safeArea.right
let totalCellSpace: CGFloat = margin + cellSpace * CGFloat(numberOfItems)
let remainWidth = parentSize.width - totalCellSpace
let width = remainWidth / CGFloat(numberOfItemsFactor)
let textAreaHeight: CGFloat = isRegularRegular ? 120 : 80
let thumbnailHeight = width / 16 * 9
let height = thumbnailHeight + textAreaHeight
return CGSize(width: width, height: height)
}
Practice

55. static func cellSize(isPortrait: Bool,
parentSize: CGSize,
isRegularRegular: Bool,
safeArea: UIEdgeInsets) -> CGSize {
let nextContentRatio: Double = 0.2 // チラ見せ比率（適当）
let numberOfItems: Double = isPortrait ? 2 : 4 // (W:C, H:Rは)2つ、それ以外は4つ
let numberOfItemsFactor: Double = numberOfItems + nextContentRatio
let sideMargin: CGFloat = isRegularRegular ? 60 : 12
let cellSpace: CGFloat = 24
let margin = sideMargin + safeArea.left + safeArea.right
let totalCellSpace: CGFloat = margin + cellSpace * CGFloat(numberOfItems)
let remainWidth = parentSize.width - totalCellSpace
let width = remainWidth / CGFloat(numberOfItemsFactor)
let textAreaHeight: CGFloat = isRegularRegular ? 120 : 80
let thumbnailHeight = width / 16 * 9
let height = thumbnailHeight + textAreaHeight
return CGSize(width: width, height: height)
}
Practice

56. static func cellSize(isPortrait: Bool,
parentSize: CGSize,
isRegularRegular: Bool,
safeArea: UIEdgeInsets) -> CGSize {
let nextContentRatio: Double = 0.2 // チラ見せ比率（適当）
let numberOfItems: Double = isPortrait ? 2 : 4 // (W:C, H:Rは)2つ、それ以外は4つ
let numberOfItemsFactor: Double = numberOfItems + nextContentRatio
let sideMargin: CGFloat = isRegularRegular ? 60 : 12
let cellSpace: CGFloat = 24
let margin = sideMargin + safeArea.left + safeArea.right
let totalCellSpace: CGFloat = margin + cellSpace * CGFloat(numberOfItems)
let remainWidth = parentSize.width - totalCellSpace
let width = remainWidth / CGFloat(numberOfItemsFactor)
let textAreaHeight: CGFloat = isRegularRegular ? 120 : 80
let thumbnailHeight = width / 16 * 9
let height = thumbnailHeight + textAreaHeight
return CGSize(width: width, height: height)
}
Practice

57. override func viewWillTransition(to size: CGSize,
with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
collectionView.reloadData()
}
Practice

58. iPadの縦横で異なるレイアウトにする
Practice

59. Practice

60. override func overrideTraitCollection(forChildViewController childViewController: UIViewController) -> UITraitCollection? {
if UIDevice.current.userInterfaceIdiom == .pad,
let rootViewController = UIApplication.shared.keyWindow?.rootViewController {
let portraitTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact),
UITraitCollection(verticalSizeClass: .regular)])
let landscapeTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact),
UITraitCollection(verticalSizeClass: .compact)])
let rootViewSize = rootViewController.view.bounds.size
let size = view.bounds.size
if isMultiTasking(rootViewSize: rootViewSize) {
if rootViewController.traitCollection.isRegularRegular {
return landscapeTraitCollection
} else {
return portraitTraitCollection
}
} else if size.width > size.height {
return landscapeTraitCollection
} else {
return portraitTraitCollection
}
}
return traitCollection
}
Practice

61. override func overrideTraitCollection(forChildViewController childViewController: UIViewController) -> UITraitCollection? {
if UIDevice.current.userInterfaceIdiom == .pad,
let rootViewController = UIApplication.shared.keyWindow?.rootViewController {
let portraitTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact),
UITraitCollection(verticalSizeClass: .regular)])
let landscapeTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact),
UITraitCollection(verticalSizeClass: .compact)])
let rootViewSize = rootViewController.view.bounds.size
let size = view.bounds.size
if isMultiTasking(rootViewSize: rootViewSize) {
if rootViewController.traitCollection.isRegularRegular {
return landscapeTraitCollection
} else {
return portraitTraitCollection
}
} else if size.width > size.height {
return landscapeTraitCollection
} else {
return portraitTraitCollection
}
}
return traitCollection
}
Practice

62. override func overrideTraitCollection(forChildViewController childViewController: UIViewController) -> UITraitCollection? {
if UIDevice.current.userInterfaceIdiom == .pad,
let rootViewController = UIApplication.shared.keyWindow?.rootViewController {
let portraitTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact),
UITraitCollection(verticalSizeClass: .regular)])
let landscapeTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact),
UITraitCollection(verticalSizeClass: .compact)])
let rootViewSize = rootViewController.view.bounds.size
let size = view.bounds.size
if isMultiTasking(rootViewSize: rootViewSize) {
if rootViewController.traitCollection.isRegularRegular {
return landscapeTraitCollection
} else {
return portraitTraitCollection
}
} else if size.width > size.height {
return landscapeTraitCollection
} else {
return portraitTraitCollection
}
}
return traitCollection
}
Practice

63. Practice

64. Practice

65. AbemaTVの対応例

66. AbemaTVの対応例
iPhone

67. AbemaTVの対応例
iPhone

68. AbemaTVの対応例
iPhone

69. AbemaTVの対応例
iPad

70. AbemaTVの対応例
iPad

71. AbemaTVの対応例
UISplitViewController

72. AbemaTVの対応例
iPhone iPad

73. まとめ

74. まとめ
Size ClassとTrait Collectionを理解する
Auto Layout × Size Class × UIStackView × 筋肉
開発・メンテナンス工数は増加するので事業的観点も重要

75. Thank you