$30 off During Our Annual Pro Sale. View Details »

制約のなかでContainerViewControllerを
つくる方法

 制約のなかでContainerViewControllerを
つくる方法

ChildViewControllerが依存しあっているような制約のもとでも、汎用のContainerViewControllerを作る方法を詳解します

Mitsuyoshi Yamazaki

September 18, 2018
Tweet

More Decks by Mitsuyoshi Yamazaki

Other Decks in Technology

Transcript

  1. ੍໿ͷͳ͔Ͱ
    ContainerViewControllerΛ

    ͭ͘Δํ๏
    @vespid
    v2.2.1

    View Slide

  2. About me
    • Twitter: @vespid
    • GitHub: mitsuyoshi-yamazaki
    • SpeeeͰSwift։ൃ΍৽نࣄۀͷ

    ϢʔβʔΠϯλϏϡʔͳͲ

    View Slide

  3. ࡢ೥ॴଐ͍ͯͨ͠ࣄۀ෦
    • iOS։ൃऀͱͯ͠

    ඒ༰ΞϓϦΛ୲౰
    • TwitterͷϓϩϑΟʔϧ
    ը໘ͷ࠶ݱ

    View Slide

  4. ͍͍ײ͡ʹOSSԽͰ͖ͨ

    HJUIVCDPNTQFFF
    4DSPMMBCMF5BC$POUSPMMFS

    View Slide

  5. Έͳ͞Μ͸

    View Slide

  6. ᕒ਎ͷUI͕࠶ར༻Ͱ͖ͳ͍

    View Slide

  7. ͱ͍͏͜ͱ͸ͳ͍Ͱ͠ΐ͏͔

    View Slide

  8. ContainerViewControllerΛ

    ࢖ͬͨ͜ͱͷ͋Δํ͸

    ଟ͍ͱࢥ͍·͕͢

    View Slide

  9. ൚༻Խ͕೉͍͜͠ͱ΋

    View Slide

  10. ੍໿ͷͳ͔Ͱ
    ContainerViewControllerΛ

    ͭ͘Δํ๏ʹ͍ͭͯઆ໌͠·͢

    View Slide

  11. • εΫϩʔϧʹΑͬͯ

    ϔομʔ͕ॖΉ
    • ChildVC͸

    ϔομʔͱλϒͷத਎
    ྫɿTwitter UI

    View Slide

  12. Twitter UIͷ;ͨͭͷཁૉ
    1.ScrollViewΛ૊Έ߹ΘͤͨView
    • εΫϩʔϧͱಉظͨ͠Ξχϝʔγϣϯ
    2.൚༻ContainerViewController
    • ChildViewControllerಉ࢜ͷಠཱΛอͭ
    Twitter UIΛςʔϚʹબΜͩཧ༝ɿ

    View Slide

  13. Twitter UIͷ;ͨͭͷཁૉ
    1.ScrollViewΛ૊Έ߹ΘͤͨView
    • εΫϩʔϧͱಉظͨ͠Ξχϝʔγϣϯ
    2.൚༻ContainerViewController
    • ChildViewControllerಉ࢜ͷಠཱΛอͭ
    Twitter UIΛςʔϚʹબΜͩཧ༝ɿ
    ੍໿ͷ΋ͱ൚༻Խ͢Δͷ͕೉͍͠

    View Slide

  14. Ͳ͏ͭ͘Δ͔ʁ

    View Slide

  15. ContainerViewControllerͷઃܭ
    • ΠϯλʔϑΣʔεΛఆٛ͢Δ
    • ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ
    • ࣮૷্ͷ੍໿Λղܾ͢Δɿࠓճ͸ScrollViewؔ࿈

    View Slide

  16. ContainerViewControllerͷઃܭ
    • ΠϯλʔϑΣʔεΛఆٛ͢Δ
    • ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ
    • ࣮૷্ͷ੍໿Λղܾ͢Δɿࠓճ͸ScrollViewؔ࿈

    View Slide

  17. ΠϯλʔϑΣʔεΛఆٛ͢Δ
    • ཁ๬
    • ࢖͍΍͍͢ΠϯλʔϑΣʔεΛ༻ҙ͍ͨ͠
    • UIKit४ڌ

    View Slide

  18. ΠϯλʔϑΣʔεΛఆٛ͢Δ
    ϔομʔ
    λϒ
    εΫϩʔϧίϯςϯπ

    View Slide

  19. ΠϯλʔϑΣʔεΛఆٛ͢Δ
    class ScrollableViewController: UIViewController {
    var scrollView: UIScrollView
    }
    class ContainerViewController: UIViewController {
    var headerViewController: UIViewController // ϔομʔ
    var viewControllers: [ScrollableViewController] // εΫϩʔϧίϯςϯπ
    }
    εΫϩʔϧίϯςϯπ͸ScrollViewΛ΋͍ͬͯΔඞཁ͕͋Δ

    View Slide

  20. ContainerViewControllerͷઃܭ
    • ΠϯλʔϑΣʔεΛఆٛ͢Δ
    • ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ
    • ࣮૷্ͷ੍໿Λղܾ͢Δɿࠓճ͸ScrollViewؔ࿈

    View Slide

  21. ChildViewControllerͷ

    ಠཱੑΛ୲อ͢Δ
    • ཁ๬
    • ೚ҙͷChildViewControllerΛѻ͍͍ͨ

    View Slide

  22. class ScrollableViewController: UIViewController {
    var scrollView: UIScrollView
    }
    class ContainerViewController: UIViewController {
    var headerViewController: UIViewController // ϔομʔ
    var viewControllers: [ScrollableViewController] // εΫϩʔϧίϯςϯπ
    }
    ChildViewControllerͷ

    ಠཱੑΛ୲อ͢Δ
    ѻ͑ΔChildViewControllerʹ੍ݶ͕͔͔͍ͬͯΔ

    View Slide

  23. protocol Scrollable {
    var scrollView: UIScrollView! { get }
    }
    class ContainerViewController: UIViewController {
    var headerViewController: UIViewController // ϔομʔ
    var viewControllers: [UIViewController & Scrollable] // εΫϩʔϧίϯςϯπ
    }
    ChildViewControllerͷ

    ಠཱੑΛ୲อ͢Δ
    ඞਢͷ੍໿͸protocolʹ੾Γग़͢

    View Slide

  24. ContainerViewControllerͷઃܭ
    • ΠϯλʔϑΣʔεΛఆٛ͢Δ
    • ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ
    • ࣮૷্ͷ੍໿Λղܾ͢Δɿࠓճ͸ScrollViewؔ࿈

    View Slide

  25. • λϒͷίϯςϯπΛ

    εΫϩʔϧͰ͖Δ
    • ্·ͰεΫϩʔϧ͢Δͱ

    ࿈ଓతʹϔομʔ͕ॖΉ
    ScrollViewཁ݅

    View Slide

  26. ࣮૷Ҋ
    1. ScrollViewΛೖΕࢠʹ͢Δ
    2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
    3. ScrollView.contentInsetΛར༻͢Δ

    View Slide

  27. ࣮૷Ҋ
    1. ScrollViewΛೖΕࢠʹ͢Δ
    2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
    3. ScrollView.contentInsetΛར༻͢Δ



    View Slide

  28. ScrollView.contentInsetΛ

    ར༻͢Δ

    View Slide

  29. View Slide

  30. ࣮૷

    View Slide

  31. ScrollView.contentInsetΛར༻͢Δ
    ࣮૷
    tabContentViewController.scrollView.contentInset.top =
    headerViewController.maximumHeight
    tabContentViewController.scrollView.observe(\.contentOffset) { (_, change) in
    guard let offset = change.newValue else {
    return
    }
    self.headerHeightConstraint.constant = -(self.tabViewHeight + offset.y)
    }
    ContentOffsetͷมԽΛऔಘ͠ɺϔομʔߴ͞Λߋ৽

    View Slide

  32. contentOffsetΛऔಘ͢ΔͳΒ
    scrollViewDidScroll
    Λ࢖͑͹Α͍ͷͰ͸

    View Slide

  33. ScrollViewDelegateΛ

    ར༻͠ͳ͍ཧ༝
    • σϦήʔτʹઃఆͰ͖ΔΠϯελϯε͸

    ͻͱͭͳͷͰɺίϯςφଆͰར༻͢Δͱ
    ChildViewControllerͷσϦήʔτϝιου͕

    ݺ͹Εͳ͘ͳΔͨΊ

    View Slide

  34. ·ͱΊ
    • ΠϯλʔϑΣʔεΛઌʹߟ͑Δ
    • ChildViewControllerؒͷಠཱΛอͭʹ͸

    protocolΛ࢖͏
    • ScrollView͸ಛੑΛཧղͯ͠࢖͏
    • ChildViewControllerͷdelegateΛԣऔΓ͠ͳ͍

    View Slide

  35. !WFTQJE
    HJUIVCDPNTQFFF4DSPMMBCMF5BC$POUSPMMFS
    ੍໿ͷͳ͔Ͱ
    ContainerViewControllerΛ

    ͭ͘Δํ๏

    View Slide

  36. View Slide

  37. View Slide

  38. ิ଍ࢿྉ

    View Slide

  39. ScrollView࣮૷

    Ҋ

    View Slide

  40. 1. ScrollViewΛೖΕࢠʹ͢Δ

    View Slide

  41. 1. ScrollViewΛೖΕࢠʹ͢Δ
    ϔομʔ
    λϒ
    εΫϩʔϧίϯςϯπ

    View Slide

  42. 1. ScrollViewΛೖΕࢠʹ͢Δ
    • ࿈ଓͯ͠εΫϩʔϧ

    Ͱ͖ͳ͍

    View Slide

  43. 1. ScrollViewΛೖΕࢠʹ͢Δ

    આ໌ɿ
    • ͻͱͭͷScrollView͕εϫΠϓδΣενϟʔΛ

    ड͚औΔͱɺͦͷεΫϩʔϧ͕ऴΘΔ·Ͱ

    ଞͷScrollViewʹδΣενϟʔ͕·ΘΒͳ͍ͨΊ

    View Slide

  44. 2. εΫϩʔϧͰScrollView.frameΛ
    ߋ৽͢Δ

    View Slide

  45. 2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
    ϔομʔ
    λϒ
    εΫϩʔϧίϯςϯπ

    View Slide

  46. 2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
    • ʮϔομʔ͕ॖΉʯͷ͕ཁ݅
    • ͦΕ͸ʮϔομʔҎ֎͕޿͕Δʯͱಉ͡
    • εΫϩʔϧʹΑͬͯScrollView.frame.heightΛ

    มߋ͢Ε͹࣮ݱͰ͖ΔͷͰ͸ͳ͍͔ʁ

    View Slide

  47. 2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
    આ໌ɿ
    • εΫϩʔϧதʹScrollView.frame͕ߋ৽͞ΕΔͱ

    ʮϢʔβʔ͕৮͍ͬͯΔ஍఺(contentOffset)ʯ͕

    มΘͬͯ͠·͏
    • frameߋ৽ˠcontentOffsetߋ৽ˠframeߋ৽…

    ͷϧʔϓͰεΫϩʔϧ଎౓͕͓͔͘͠ͳΔ

    View Slide