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

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

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