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

Transcript

1. 1.

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

2. 2.

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


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

   ࡢ೥ॴଐ͍ͯͨ͠ࣄۀ෦ • iOS։ൃऀͱͯ͠
 ඒ༰ΞϓϦΛ୲౰ • TwitterͷϓϩϑΟʔϧ ը໘ͷ࠶ݱ

4. 4.

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

5. 5.

   Έͳ͞Μ͸

6. 6.

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

7. 7.

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

8. 8.

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

9. 9.

   ൚༻Խ͕೉͍͜͠ͱ΋

10. 10.

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

11. 11.

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

12. 12.

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

13. 13.

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

    ੍໿ͷ΋ͱ൚༻Խ͢Δͷ͕೉͍͠
14. 14.

    Ͳ͏ͭ͘Δ͔ʁ

15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

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

    ContainerViewController: UIViewController { var headerViewController: UIViewController // ϔομʔ var viewControllers: [ScrollableViewController] // εΫϩʔϧίϯςϯπ } εΫϩʔϧίϯςϯπ͸ScrollViewΛ΋͍ͬͯΔඞཁ͕͋Δ
20. 20.

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

21. 21.

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

22. 22.

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

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

    protocol Scrollable { var scrollView: UIScrollView! { get } }

    class ContainerViewController: UIViewController { var headerViewController: UIViewController // ϔομʔ var viewControllers: [UIViewController & Scrollable] // εΫϩʔϧίϯςϯπ } ChildViewControllerͷ
 ಠཱੑΛ୲อ͢Δ ඞਢͷ੍໿͸protocolʹ੾Γग़͢
24. 24.

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

25. 25.

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

26. 26.

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

27. 27.

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

28. 28.

    ScrollView.contentInsetΛ
 ར༻͢Δ

29. 29.

    None
30. 30.

    ࣮૷

31. 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. 32.

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

33. 33.

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

34. 34.

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

35. 35.

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

36. 36.

    None
37. 37.

    None
38. 38.

    ิ଍ࢿྉ

39. 39.

    ScrollView࣮૷
 Ҋ

40. 40.

    1. ScrollViewΛೖΕࢠʹ͢Δ

41. 41.

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

42. 42.

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

43. 43.

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

44. 44.

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

45. 45.

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

46. 46.

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

47. 47.

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