iOS Adaptive UI - 解像度の異なるデバイスや画面の向きに対応する 最適なレイアウトへ -

iOS Adaptive UI - To the optimum layout corresponding to devices and screen orientations with different resolutions -

Transcript

1. "EBQUJWF
   6*
   ղ૾౓ͷҟͳΔσόΠε΍ը໘ͷ޲͖ʹରԠ͢Δ
   ࠷దͳϨΠΞ΢τ΁ :VKJ
   )BUP Զίϯ
   
   4VNNFS
   
   %BZ
   
2. Yuji Hato CyberAgent, Inc. / AbemaTV, Inc. dekatotoro @dekatotoro Contributed services "CPVU
   NF
3. "EBQUJWF
   6* Size Clases "CFNB57ͷରԠྫ 1SBDUJDF "HFOEB
4. "EBQUJWF
   6*
5. "EBQUJWF
   6* IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED %FWJDF
   4J[F
6. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED "EBQUJWF
   6* %FWJDF
   4J[F
   º
   %JSFDUJPO
7. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED "EBQUJWF
   6* %FWJDF
   4J[F
   º
   %JSFDUJPO
   º
   .VMUJUBTLJOH
8. IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTWJTVBMEFTJHOBEBQUJWJUZBOEMBZPVU "EBQUJWF
   6* %FWJDF
   4J[F
9. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED "EBQUJWF
   6* %FWJDF
   4J[F
   º
   %JSFDUJPO
   º
   .VMUJUBTLJOH
10. σόΠεͷαΠζ΍޲͖ɺঢ়ଶʹ߹Θͤͯ
    ࠷దͳϨΠΞ΢τʹ͢Δ "EBQUJWF
    6*
11. 4J[F
    $MBTTFT
12. 4J[F
    $MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED $PNQBDU
    º
    3FRVMBS
    
    QBUUFSO
13. 4J[F
    $MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED $PNQBDU
    º
    3FRVMBS
    
    QBUUFSO
14. 4J[F
    $MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED %FWJDF
    4J[F
    º
    %JSFDUJPO
    º
    .VMUJUBTLJOH
15. 4J[F
    $MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED "QQMZ
    UP
    TJ[F
    DMBTT
16. IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTWJTVBMEFTJHOBEBQUJWJUZBOEMBZPVU 4J[F
    $MBTTFT %FGJOJUJPO
17. IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTWJTVBMEFTJHOBEBQUJWJUZBOEMBZPVU 4J[F
    $MBTTFT %FGJOJUJPO
    GPS
    .VMUJUBTLJOH
18. IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO8JOEPXT7JFXT$PODFQUVBM"EPQUJOH.VMUJUBTLJOH0OJ1BE 2VJDL4UBSU'PS4MJEF0WFS"OE4QMJU7JFXIUNMBQQMF@SFGEPDVJE51$)48 4J[F
    $MBTTFT %FGJOJUJPO
    GPS
    .VMUJUBTLJOH
19. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4J[F
    $MBTTFT .BOZ
    DPNCJOBUJPOT
    ˠ
    
    QBUUFSO
20. public protocol UITraitEnvironment : NSObjectProtocol { @available(iOS 8.0, *) public var traitCollection: UITraitCollection { get } @available(iOS 8.0, *) public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) } 4J[F
    $MBTTFT
21. open class UIView : UIResponder, NSCoding, UIAppearance, UIAppearanceContainer, UIDynamicItem, UITraitEnvironment, UICoordinateSpace, UIFocusItem, CALayerDelegate { open class UIViewController : UIResponder, NSCoding, UIAppearanceContainer, UITraitEnvironment, UIContentContainer, UIFocusEnvironment { 4J[F
    $MBTTFT
22. public protocol UITraitEnvironment : NSObjectProtocol { @available(iOS 8.0, *) public var traitCollection: UITraitCollection { get } @available(iOS 8.0, *) public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) } 4J[F
    $MBTTFT
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 } … } 4J[F
    $MBTTFT
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 } … } 4J[F
    $MBTTFT
25. 4J[F
    $MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED $PNQBDU
    º
    3FRVMBS
    
    QBUUFSO
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 } } 4J[F
    $MBTTFT
27. public protocol UITraitEnvironment : NSObjectProtocol { @available(iOS 8.0, *) public var traitCollection: UITraitCollection { get } @available(iOS 8.0, *) public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) } 4J[F
    $MBTTFT
28. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4J[F
    $MBTTFT
29. IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4J[F
    $MBTTFT
30. 4J[F
    $MBTTFT 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. 4J[F
    $MBTTFT 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. 1SBDUJDF
33. 6*5SBJU$PMMFDUJPOͷมԽʹΑΔ MBZPVUมߋ 1SBDUJDF
34. 1SBDUJDF
35. 1SBDUJDF 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX
36. 1SBDUJDF
37. 1SBDUJDF
38. 1SBDUJDF
39. 1SBDUJDF
40. 1SBDUJDF
41. 1SBDUJDF
42. TDSPMM͕ԼͷΈʹͳΔ 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 1SBDUJDF
43. શͯ4DSPMM͍ͤͨ͞ 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 1SBDUJDF
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) } } } 1SBDUJDF
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) } } } 1SBDUJDF
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) } } } 1SBDUJDF
47. 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 1SBDUJDF
48. 4J[FมԽʹΑΔMBZPVUมߋ 1SBDUJDF
49. 1SBDUJDF
50. 1SBDUJDF
51. 1SBDUJDF
52. 1SBDUJDF
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) } 1SBDUJDF ے೑
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) } 1SBDUJDF
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) } 1SBDUJDF
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) } 1SBDUJDF
57. override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { super.viewWillTransition(to: size, with: coordinator) collectionView.reloadData() } 1SBDUJDF
58. J1BEͷॎԣͰҟͳΔϨΠΞ΢τʹ͢Δ 1SBDUJDF
59. 1SBDUJDF
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 } 1SBDUJDF
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 } 1SBDUJDF
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 } 1SBDUJDF
63. 1SBDUJDF
64. 1SBDUJDF
65. "CFNB57ͷରԠྫ
66. "CFNB57ͷରԠྫ J1IPOF
    
67. "CFNB57ͷରԠྫ J1IPOF
    
68. "CFNB57ͷରԠྫ J1IPOF
    
69. "CFNB57ͷରԠྫ J1BE
    
70. "CFNB57ͷରԠྫ J1BE
    
71. "CFNB57ͷରԠྫ 6*4QMJU7JFX$POUSPMMFS
72. "CFNB57ͷରԠྫ J1IPOF J1BE
73. ·ͱΊ
74. ·ͱΊ 4J[F
    $MBTTͱ5SBJU
    $PMMFDUJPOΛཧղ͢Δ "VUP
    -BZPVU
    º
    4J[F
    $MBTT
    º
    6*4UBDL7JFX
    º
    ے೑ ։ൃɾϝϯςφϯε޻਺͸૿Ճ͢ΔͷͰࣄۀత؍఺΋ॏཁ
75. 5IBOL
    ZPV