Adaptive Collection View

Transcript

1. Adaptive Collection View
   ishkawa
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. Adaptivity
   

   View Slide

6. “Supporting any size display or orientation of a device
   allows you to create a great user experience with your
   app. With the latest advancements with View Controllers
   in iOS 8 and Auto Layout in Xcode, it’s now even easier
   for you to adapt your user interface to context and
   different sized devices.”
   

   View Slide

7. “Supporting any size display or orientation of a device
   allows you to create a great user experience with your
   app. With the latest advancements with View Controllers
   in iOS 8 and Auto Layout in Xcode, it’s now even easier
   for you to adapt your user interface to context and
   different sized devices.”
   

   View Slide

8. “Supporting any size display or orientation of a device
   allows you to create a great user experience with your
   app. With the latest advancements with View Controllers
   in iOS 8 and Auto Layout in Xcode, it’s now even easier
   for you to adapt your user interface to context and
   different sized devices.”
   

   View Slide

9. UICollectionView?
   

   View Slide

10. View Slide

11. View Slide

12. UICollectionView
    UITableView
    

    View Slide

13. UICollectionViewController
    UICollectionView
    UICollectionViewCell
    UITableViewController
    UITableView
    UITableViewCell
    

    View Slide

14. UICollectionViewDelegate
    UICollectionViewController
    UICollectionView
    UICollectionViewCell
    UICollectionViewDataSource
    UITableViewDelegate
    UITableViewController
    UITableView
    UITableViewCell
    UITableViewDataSource
    

    View Slide

15. େม͡ΌΜʜ
    

    View Slide

16. ಉ͡Α͏ͳίʔυΛ
    ճॻ͘ඞཁ͕͋Δʜ
    

    View Slide

17. ͭͷมߋΛՕॴʹ
    ద༻͢Δඞཁ͕͋Δʜ
    

    View Slide

18. UICollectionView
    UITableView
    

    View Slide

19. UICollectionView
    UITableView?
    

    View Slide

20. UICollectionView
    UICollectionView!
    

    View Slide

21. 6*$PMMFDUJPO7JFXͰ
    6*5BCMF7JFXͬΆ͍΋ͷΛ
    ࣮૷͢Δͷ͸࣮͸؆୯
    

    View Slide

22. View Slide

23. UICollectionViewCell
    Decoration View
    

    View Slide

24. UICollectionViewLayout
    

    View Slide

25. 6*$PMMFDUJPO7JFX'MPX-BZPVU
    ͱ͍͏ศརͳ΋ͷ͕͋Δ
    

    View Slide

26. class CollectionViewLayout: UICollectionViewFlowLayout
    

    View Slide

27. ͭͷϞʔυΛ༻ҙ
    

    View Slide

28. class CollectionViewLayout: UICollectionViewFlowLayout {
    enum Mode {
    case Table
    case Flow
    }
    var mode: Mode = (UIDevice.currentDevice().userInterfaceIdiom
    == .Pad) ? .Flow : .Table
    }
    

    View Slide

29. ϞʔυʹԠͨ͡
    FTUJNBUFE*UFN4J[FΛઃఆ
    ߴ͕͞ݻఆͷ৔߹͸JUFN4J[FΛઃఆ
    

    View Slide

30. override var estimatedItemSize: CGSize {
    get {
    let spacing = minimumLineSpacing
    var size = super.estimatedItemSize
    if let width = collectionView?.frame.size.width {
    switch mode {
    case .Table: size.width = width
    case .Flow: size.width = width / 2.0 - spacing
    }
    }
    return size
    }
    set {
    super.estimatedItemSize = newValue
    }
    }
    

    View Slide

31. 6*$PMMFDUJPO7JFX
    -BZPVU"UUSJCVUFΛ
    6*5BCMF7JFXʹࣅͤΔ
    mode == .Tableͷ৔߹
    

    View Slide

32. override func layoutAttributesForElementsInRect(rect: CGRect) -> [
    var attributes = [UICollectionViewLayoutAttributes]()
    if let superAttributes = super.layoutAttributesForElementsInRe
    for attributes in superAttributes {
    attributes.frame.origin.x = 0.0
    }
    attributes += superAttributes
    }
    return attributes
    }
    override func layoutAttributesForItemAtIndexPath(indexPath: NSInde
    let attributes = super.layoutAttributesForItemAtIndexPath(inde
    if mode == .Table {
    attributes.frame.origin.x = 0.0
    }
    return attributes
    }
    

    View Slide

33. Ҏ্
    

    View Slide

34. Demo
    https://github.com/ishkawa/sandbox/tree/master/Adaptive
    

    View Slide

35. ͭͷ7JFX$POUSPMMFS $FMMͰ
    J1IPOF J1BEʹରԠͰ͖Δ
    

    View Slide

36. ΞμϓςΟϒʂ
    

    View Slide

37. View Slide

38. ηϧ΋ग़͠෼͚͍ͨ৔߹͸ʁ
    

    View Slide

39. - Size Classes
    - ~ipad
    

    View Slide

40. - Size Classes
    - ~ipad
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. ηϧαΠζͷܭࢉ͸
    Ͳ͏ͳͬͯΔͷʁ
    

    View Slide

46. Self Sizing Cell
    introduced in iOS 8
    

    View Slide

47. ✓ UITableView
    ✓ UICollectionView
    

    View Slide

48. /4-BZPVU$POTUSBJOUΛ
    ద੾ʹ഑ஔ͢Δͱηϧͷ
    େ͖͞Λࣗಈతʹܭࢉ
    

    View Slide

49. ίʔυෆཁ
    UICollectionViewͷ৔߹͸ඞཁͳ৔߹΋͋Δ
    

    View Slide

50. ࠷ߴʂ
    

    View Slide

51. ͨͩ͠
    

    View Slide

52. 6*$PMMFDUJPO7JFXͷ৔߹
    ᠘͕ͨ͘͞Μ͋ΔͷͰ
    ֮ޛ͕ඞཁ
    

    View Slide

53. View Slide

54. J04͸ʁ
    

    View Slide

55. 4FMG4J[JOH$FMMΛ
    ਅࣅ͠Α͏
    

    View Slide

56. TZTUFN-BZPVU4J[F
    'JUUJOH4J[FΛ
    JUFN4J[F'PS*OEFY1BUI
    Ͱݺ΂͹0,
    ηϧͷग़͠෼͚͸Interface BuilderͰ׬݁ͯ͠Δ͸ͣ
    

    View Slide

57. View Slide

58. ຊ౰ʹ͋ͬͨ࿩
    

    View Slide

59. lੴ઒͞ΜɺJ1IPOF͚ͩͰ͍͍ͷͰ
    ͜ͷػೳΛ͜ͷόʔδϣϯʹ৐͍ͤͯͩ͘͞z
    اըऀ
    

    View Slide

60. l͕Μ͹Γ·͢ʂz
    ੴ઒
    

    View Slide

61. lͰ͖·ͨ͠ʂ֬ೝΛ͓ئ͍͠·͢ʂz
    ੴ઒
    

    View Slide

62. lJ1BE΋࣮૷ͯ͘͠ΕͨΜͰ͢Ͷʂ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂz
    اըऀ
    

    View Slide

63. l͑ͬz
    ੴ઒
    

    View Slide

64. "EBQUJWF$PMMFDUJPO7JFXΛ
    ࢖ͬͯJ1IPOF൛ͷ࣮૷Λͨ͠Β
    

    View Slide

65. J1BE൛΋࣮૷͞Εͯͨ
    

    View Slide

66. View Slide

67. ·ͱΊ
    

    View Slide

68. ✓ UITableView͸UICollectionView
    ✓ iPhone͸iPad
    ✓ ಉ͡ίʔυ͸2౓ॻ͔ͳ͍
    

    View Slide

69. ໌೔͔ΒAdaptiveʹ
    ͳΓ·͠ΐ͏
    

    View Slide

70. View Slide