Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adaptive Collection View

Yosuke Ishikawa
February 14, 2015
24k

Adaptive Collection View

Yosuke Ishikawa

February 14, 2015
Tweet

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