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

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

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

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

B6a0c6df530da0ebd7a4f24e6c4643b9?s=128

Mitsuyoshi Yamazaki

September 18, 2018
Tweet

Transcript

  1. ੍໿ͷͳ͔Ͱ ContainerViewControllerΛ
 ͭ͘Δํ๏ @vespid v2.2.1

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


    ϢʔβʔΠϯλϏϡʔͳͲ
  3. ࡢ೥ॴଐ͍ͯͨ͠ࣄۀ෦ • iOS։ൃऀͱͯ͠
 ඒ༰ΞϓϦΛ୲౰ • TwitterͷϓϩϑΟʔϧ ը໘ͷ࠶ݱ

  4. ͍͍ײ͡ʹOSSԽͰ͖ͨ HJUIVCDPNTQFFF 4DSPMMBCMF5BC$POUSPMMFS

  5. Έͳ͞Μ͸

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

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

  8. ContainerViewControllerΛ
 ࢖ͬͨ͜ͱͷ͋Δํ͸
 ଟ͍ͱࢥ͍·͕͢

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

  10. ੍໿ͷͳ͔Ͱ ContainerViewControllerΛ
 ͭ͘Δํ๏ʹ͍ͭͯઆ໌͠·͢

  11. • εΫϩʔϧʹΑͬͯ
 ϔομʔ͕ॖΉ • ChildVC͸
 ϔομʔͱλϒͷத਎ ྫɿTwitter UI

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

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

    ੍໿ͷ΋ͱ൚༻Խ͢Δͷ͕೉͍͠
  14. Ͳ͏ͭ͘Δ͔ʁ

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

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

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

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

  19. ΠϯλʔϑΣʔεΛఆٛ͢Δ class ScrollableViewController: UIViewController { var scrollView: UIScrollView } class

    ContainerViewController: UIViewController { var headerViewController: UIViewController // ϔομʔ var viewControllers: [ScrollableViewController] // εΫϩʔϧίϯςϯπ } εΫϩʔϧίϯςϯπ͸ScrollViewΛ΋͍ͬͯΔඞཁ͕͋Δ
  20. ContainerViewControllerͷઃܭ • ΠϯλʔϑΣʔεΛఆٛ͢Δ • ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ • ࣮૷্ͷ੍໿Λղܾ͢Δɿࠓճ͸ScrollViewؔ࿈

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

  22. class ScrollableViewController: UIViewController { var scrollView: UIScrollView } class ContainerViewController:

    UIViewController { var headerViewController: UIViewController // ϔομʔ var viewControllers: [ScrollableViewController] // εΫϩʔϧίϯςϯπ } ChildViewControllerͷ
 ಠཱੑΛ୲อ͢Δ ѻ͑ΔChildViewControllerʹ੍ݶ͕͔͔͍ͬͯΔ
  23. protocol Scrollable { var scrollView: UIScrollView! { get } }

    class ContainerViewController: UIViewController { var headerViewController: UIViewController // ϔομʔ var viewControllers: [UIViewController & Scrollable] // εΫϩʔϧίϯςϯπ } ChildViewControllerͷ
 ಠཱੑΛ୲อ͢Δ ඞਢͷ੍໿͸protocolʹ੾Γग़͢
  24. ContainerViewControllerͷઃܭ • ΠϯλʔϑΣʔεΛఆٛ͢Δ • ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ • ࣮૷্ͷ੍໿Λղܾ͢Δɿࠓճ͸ScrollViewؔ࿈

  25. • λϒͷίϯςϯπΛ
 εΫϩʔϧͰ͖Δ • ্·ͰεΫϩʔϧ͢Δͱ
 ࿈ଓతʹϔομʔ͕ॖΉ ScrollViewཁ݅

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

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

  28. ScrollView.contentInsetΛ
 ར༻͢Δ

  29. None
  30. ࣮૷

  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ͷมԽΛऔಘ͠ɺϔομʔߴ͞Λߋ৽
  32. contentOffsetΛऔಘ͢ΔͳΒ scrollViewDidScroll Λ࢖͑͹Α͍ͷͰ͸

  33. ScrollViewDelegateΛ
 ར༻͠ͳ͍ཧ༝ • σϦήʔτʹઃఆͰ͖ΔΠϯελϯε͸
 ͻͱͭͳͷͰɺίϯςφଆͰར༻͢Δͱ ChildViewControllerͷσϦήʔτϝιου͕
 ݺ͹Εͳ͘ͳΔͨΊ

  34. ·ͱΊ • ΠϯλʔϑΣʔεΛઌʹߟ͑Δ • ChildViewControllerؒͷಠཱΛอͭʹ͸
 protocolΛ࢖͏ • ScrollView͸ಛੑΛཧղͯ͠࢖͏ • ChildViewControllerͷdelegateΛԣऔΓ͠ͳ͍

  35. !WFTQJE HJUIVCDPNTQFFF4DSPMMBCMF5BC$POUSPMMFS ੍໿ͷͳ͔Ͱ ContainerViewControllerΛ
 ͭ͘Δํ๏

  36. None
  37. None
  38. ิ଍ࢿྉ

  39. ScrollView࣮૷
 Ҋ

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

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

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

  43. 1. ScrollViewΛೖΕࢠʹ͢Δ 
 આ໌ɿ • ͻͱͭͷScrollView͕εϫΠϓδΣενϟʔΛ
 ड͚औΔͱɺͦͷεΫϩʔϧ͕ऴΘΔ·Ͱ
 ଞͷScrollViewʹδΣενϟʔ͕·ΘΒͳ͍ͨΊ

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

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

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

  47. 2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ આ໌ɿ • εΫϩʔϧதʹScrollView.frame͕ߋ৽͞ΕΔͱ
 ʮϢʔβʔ͕৮͍ͬͯΔ஍఺(contentOffset)ʯ͕
 มΘͬͯ͠·͏ • frameߋ৽ˠcontentOffsetߋ৽ˠframeߋ৽…
 ͷϧʔϓͰεΫϩʔϧ଎౓͕͓͔͘͠ͳΔ