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

Adaptive Collection View

Yosuke Ishikawa
February 14, 2015
25k

Adaptive Collection View

Yosuke Ishikawa

February 14, 2015
Tweet

Transcript

  1. Adaptive Collection View
    ishkawa

    View full-size slide

  2. “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 full-size slide

  3. “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 full-size slide

  4. “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 full-size slide

  5. UICollectionView?

    View full-size slide

  6. UICollectionView
    UITableView

    View full-size slide

  7. UICollectionViewController
    UICollectionView
    UICollectionViewCell
    UITableViewController
    UITableView
    UITableViewCell

    View full-size slide

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

    View full-size slide

  9. େม͡ΌΜʜ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. UICollectionView
    UITableView

    View full-size slide

  13. UICollectionView
    UITableView?

    View full-size slide

  14. UICollectionView
    UICollectionView!

    View full-size slide

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

    View full-size slide

  16. UICollectionViewCell
    Decoration View

    View full-size slide

  17. UICollectionViewLayout

    View full-size slide

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

    View full-size slide

  19. class CollectionViewLayout: UICollectionViewFlowLayout

    View full-size slide

  20. ͭͷϞʔυΛ༻ҙ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 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 full-size slide

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

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  28. ΞμϓςΟϒʂ

    View full-size slide

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

    View full-size slide

  30. - Size Classes
    - ~ipad

    View full-size slide

  31. - Size Classes
    - ~ipad

    View full-size slide

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

    View full-size slide

  33. Self Sizing Cell
    introduced in iOS 8

    View full-size slide

  34. ✓ UITableView
    ✓ UICollectionView

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. ຊ౰ʹ͋ͬͨ࿩

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. l͑ͬz
    ੴ઒

    View full-size slide

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

    View full-size slide

  47. J1BE൛΋࣮૷͞Εͯͨ

    View full-size slide

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

    View full-size slide

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

    View full-size slide