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

iosdc_2017.pdf

Kyohei Ito
September 17, 2017
780

 iosdc_2017.pdf

Kyohei Ito

September 17, 2017
Tweet

Transcript

  1. ࠷ۙ࿩୊ͷ͋ͷαʔϏεͷ
    ൪૊දͷ࣮૷Λඥղ͘
    2017/09/17 iOSDC

    View full-size slide

  2. About Me
    ҏ౻ɹګฏ
    Github : KyoheiG3
    Twitter : @KyoheiG3

    View full-size slide

  3. ։ൃ౰ॳͷཁ݅
    • 300νϟϯωϧදࣔ
    • ԣεΫϩʔϧͷίϯςϯπͷϧʔϓʢແݶεΫϩʔϧʣ

    View full-size slide

  4. ΍ͬͨ͜ͱ
    • UIScrollView on UITableView
    • UICollectionView
    • UIScrollView on UIScrollView
    • UIScrollView

    View full-size slide

  5. UIScrollView on UITableView

    View full-size slide

  6. UIScrollView on UITableView
    • શνϟϯωϧ෼ͷUITableViewΛฒ΂Δ
    • ݟ͍͑ͯΔ෦෼͚ͩUITableViewΛฒ΂Δ

    View full-size slide

  7. શνϟϯωϧ෼ͷUITableViewΛฒ΂Δ
    Good
    • ࣮૷ͷΠϝʔδ͕͠қ͍
    • ݁ߏαΫοͱͰ͖Δ

    View full-size slide

  8. શνϟϯωϧ෼ͷUITableViewΛฒ΂Δ
    Bad
    • ϝϞϦ͕ࢮ͵
    • ॎεΫϩʔϧ͕ॏ͍

    View full-size slide

  9. ݟ͍͑ͯΔ෦෼͚ͩUITableViewΛฒ΂Δ
    Good
    • ϝϞϦͷ࢖༻ྔΛ࡟ݮͰ͖Δ

    View full-size slide

  10. ݟ͍͑ͯΔ෦෼͚ͩUITableViewΛฒ΂Δ
    Bad
    • UITableViewͷ࠶ར༻͕ॏ͍
    • ࣮૷͕ෳࡶʹͳΔ

    View full-size slide

  11. ແݶεΫϩʔϧ
    • UITableViewͷxҐஔมߋͰରԠ͸Ͱ͖ͦ͏

    View full-size slide

  12. UITableView͸ॏ͍..

    View full-size slide

  13. UICollectionView

    View full-size slide

  14. https://github.com/KyoheiG3/CollectionViewGridLayout

    View full-size slide

  15. CollectionViewGridLayout
    Good
    • Cellͷෑ͖٧Ίࣗମ͸݁ߏ͍͍ײ͡
    • isPrefetchingEnabled͸falseʹ͢Δ

    View full-size slide

  16. isPrefetchingEnabled
    දࣔൣғΑΓ޿ൣғʹCellΛ४උ

    View full-size slide

  17. isPrefetchingEnabled
    දࣔൣғΑΓ޿ൣғʹCellΛ४උ

    View full-size slide

  18. CollectionViewGridLayout
    Bad
    • CellͷαΠζมߋΛ͢ΔΑ͏ͳΞχϝʔγϣϯ͕໘౗
    • ແݶεΫϩʔϧ͕Πέͯͳ͍

    View full-size slide

  19. ແݶεΫϩʔϧ
    delegateͱdataSourceଆͰͦΕΛҙࣝͤ͟ΔΛಘͳ͍

    View full-size slide

  20. let list: [String] = ["1", "2", "3", "4", "5"]
    func collectionView(_ collectionView: UICollectionView,
    numberOfItemsInSection section: Int) -> Int {
    return list.count * 2
    }
    func collectionView(_ collectionView: UICollectionView,
    cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
    for: indexPath) as! CollectionViewCell
    cell.label.text = list[indexPath.item % list.count]
    return cell
    }

    View full-size slide

  21. ແݶεΫϩʔϧ

    View full-size slide

  22. ແݶεΫϩʔϧ

    View full-size slide

  23. UICollectionView͸Cellͷ࠶ར༻Λ࠷దԽͰ͖ͳ͍...

    View full-size slide

  24. UIScrollView on UIScrollView

    View full-size slide

  25. https://github.com/KyoheiG3/InfiniteView

    View full-size slide

  26. InfiniteView
    • UIScrollViewͰ࡞੒ͨ͠UITableViewͷΑ͏ͳ΋ͷ
    • Cellͷ࠶ར༻Λ͢΂ͯ؅ཧ
    • CellͷϨΠΞ΢τʹAutoLayoutΛར༻
    • ΠϯλʔϑΣΠε͸UICollectionViewͷΑ͏ͳײ͡

    View full-size slide

  27. InfiniteView
    Good
    • ΞχϝʔγϣϯͳͲAutoLayoutશ։Ͱ࣮૷Ͱ͖ͨ
    • ίϯτϩʔϥʔଆ͸εοΩϦ
    • ແݶεΫϩʔϧ

    View full-size slide

  28. InfiniteView
    Bad
    • Cellͷ࠶ར༻ͳͲ௿ϨΠϠʔͳ෦෼ͷ࣮૷ͳͲෳࡶͩͬͨ
    • CellͷαΠζมߋͷΞχϝʔγϣϯ͕ෳࡶͩͬͨ
    • ͱʹ͔͘ෳࡶͩͬͨ

    View full-size slide

  29. ॳ৺ʹؼΖ͏

    View full-size slide

  30. UIScrollView

    View full-size slide

  31. https://github.com/KyoheiG3/GridView

    View full-size slide

  32. ཁ݅
    • εϜʔζͳεΫϩʔϧΛՄೳʹ͢Δ
    • CellͷαΠζΛΞχϝʔγϣϯͰมߋ͢Δ͜ͱ͕Ͱ͖Δ
    • ͳΜͳΒ֦ॖ͍ͨ͠Μ͚ͩͲͱ͍͏ཁ๬ʹ౴͑Δ
    • ϖʔδϯά΋Ͱ͖ΔΑ͏ʹ͢Δ

    View full-size slide

  33. ֓ཁ
    • 1ຕͷUIScrollViewͷ্ʹCellͷView͕ࡌ͍ͬͯΔ͚ͩ
    • AutoLayoutະ࢖༻
    • ແݶεΫϩʔϧ͸Cellͷframeͷมߋ

    View full-size slide

  34. ॲཧ
    • contentOffsetมߋલͱมߋޙͷࠩ෼ܭࢉ
    • ֦ॖͷ৔߹΋ࠩ෼ܭࢉ
    • ճస΍֦ॖͷΞχϝʔγϣϯ࣌΋ࠩ෼ܭࢉ

    View full-size slide

  35. ࠩ෼ܭࢉ
    1. දࣔൣғͷCell৘ใΛArrayͰอ࣋
    2. contentOffset͕มߋ͞Εͨ͋ͱͷ
    දࣔൣғͷCell৘ใΛܭࢉ
    3. ඞཁແ͘ͳͬͨCellΛ࡟আ
    4. ৽ͨʹද͕ࣔඞཁʹͳΔCellͷ௥Ճ

    View full-size slide

  36. ࠩ෼ܭࢉ
    1. දࣔൣғͷCell৘ใΛArrayͰอ࣋
    2. contentOffset͕มߋ͞Εͨ͋ͱͷ
    දࣔൣғͷCell৘ใΛܭࢉ
    3. ඞཁແ͘ͳͬͨCellΛ࡟আ
    4. ৽ͨʹද͕ࣔඞཁʹͳΔCellͷ௥Ճ

    View full-size slide

  37. ࠩ෼ܭࢉ
    1. දࣔൣғͷCell৘ใΛArrayͰอ࣋
    2. contentOffset͕มߋ͞Εͨ͋ͱͷ
    දࣔൣғͷCell৘ใΛܭࢉ
    3. ඞཁແ͘ͳͬͨCellΛ࡟আ
    4. ৽ͨʹද͕ࣔඞཁʹͳΔCellͷ௥Ճ

    View full-size slide

  38. ൪૊දʹ૊ΈࠐΉ

    View full-size slide

  39. UILabelͷattributedTextͬͯ͘͢͝ॏ͍
    • AttributedLabelͬͯͷΛ࡞ͬͨ

    View full-size slide

  40. AttributedLabelͷύϑΥʔϚϯε
    • Viewʹ௚઀draw
    • intrinsicContentSizeͷݺͼग़͠Λඞཁ࠷௿ݶ

    View full-size slide

  41. intrinsicContentSizeͱ͸
    • ίϯςϯπͷ಺༰ʹԠͯ͡αΠζ͕ࣗಈతʹมΘΔViewΛ࡞
    ੒Ͱ͖Δ
    • UILabel΍UIButton͕͜ΕʹରԠ͍ͯ͠Δ

    View full-size slide

  42. UILabelͷڍಈ
    • invalidateIntrinsicContentSizeͷݺͼग़͠
    var text: String? {
    didSet {
    invalidateIntrinsicContentSize()
    }
    }
    var font: UIFont! {
    didSet {
    invalidateIntrinsicContentSize()
    }
    }

    View full-size slide

  43. UILabelͷڍಈ
    • ίϯςϯπͷදࣔൣғΛࣗಈܭࢉ
    override var intrinsicContentSize: CGSize {
    // ίϯςϯπͷදࣔൣғΛܭࢉͯ͠ฦ͢
    }

    View full-size slide

  44. UILabelͷύϑΥʔϚϯε
    • දࣔαΠζ͕ܾ·͍ͬͯΔ৔߹͸ͦͷαΠζΛฦ͢1
    override var intrinsicContentSize: CGSize {
    return bounds.size
    }
    1 UITableViewCellͳͲͷࣗಈܭࢉॲཧ͸͏·͘ಈ͔ͳ͘ͳΓ·͢ɻ

    View full-size slide

  45. UILabelͷύϑΥʔϚϯε
    • AttributedLabelΛར༻͢Δ !

    View full-size slide

  46. AbemaTVͷ൪૊දͷCell
    • αΠζͷมߋ͕໌֬ͳ৔߹ʹ
    invalidateIntrinsicContentSize
    ΛݺͿ
    • intrinsicContentSize͕ࢀর͞Ε
    ͨΒsizeThatFitsͰαΠζΛܭࢉ͠
    ͯฦ͢

    View full-size slide

  47. ϨΠΞ΢τॲཧΛ஗Ԇ͢Δ

    View full-size slide

  48. ϨΠΞ΢τͷ஗Ԇॲཧ
    • දࣔʹؔ͢ΔॲཧΛαϒεϨουͰߦ͏͜ͱ͸Ͱ͖ͳ͍
    • Cell͕දࣔ͞Ε͔ͯΒLabelΛϨΠΞ΢τ͢Δ·Ͱͷ࣌ؒΛ
    গ͚ͩ͠σΟϨΠ

    View full-size slide

  49. viewModel.currentContent
    .debounce(0.1, scheduler: MainScheduler.instance)
    .do(onNext: { [weak self] slot in
    guard let me = self else { return }
    me.timeLabel.text = "00"
    me.titleLabel.attributedText = "Title"
    me.detailLabel.text = "Detail"
    })
    .subscribe(onNext: { [weak self] content in
    guard let me = self else { return }
    me.titleLabel.invalidateIntrinsicContentSize()
    me.detailLabel.invalidateIntrinsicContentSize()
    me.layoutIfNeeded()
    })
    .disposed(by: disposeBag)

    View full-size slide

  50. ύϑΥʔϚϯεΛ޲্͢Δʹ͸
    • intrinsicContentSizeΛ੍ޚ
    • ඞཁʹԠͯ͡஗Ԇॲཧ

    View full-size slide

  51. ࠷ۙ࿩୊ͷ͋ͷαʔϏεͷ൪૊දͷ࣮૷Λඥղ͘
    https://github.com/KyoheiG3/CollectionViewGridLayout
    https://github.com/KyoheiG3/InfiniteView
    https://github.com/KyoheiG3/GridView
    Github : KyoheiG3
    Twitter : @KyoheiG3

    View full-size slide