Slide 1
Slide 1 text
੍ͷͳ͔Ͱ
ContainerViewControllerΛ
ͭ͘Δํ๏
@vespid
v2.2.1
Slide 2
Slide 2 text
About me
• Twitter: @vespid
• GitHub: mitsuyoshi-yamazaki
• SpeeeͰSwift։ൃ৽نࣄۀͷ
ϢʔβʔΠϯλϏϡʔͳͲ
Slide 3
Slide 3 text
ࡢॴଐ͍ͯͨ͠ࣄۀ෦
• iOS։ൃऀͱͯ͠
ඒ༰ΞϓϦΛ୲
• TwitterͷϓϩϑΟʔϧ
ը໘ͷ࠶ݱ
Slide 4
Slide 4 text
͍͍ײ͡ʹOSSԽͰ͖ͨ
HJUIVCDPNTQFFF
4DSPMMBCMF5BC$POUSPMMFS
Slide 5
Slide 5 text
Έͳ͞Μ
Slide 6
Slide 6 text
ᕒͷUI͕࠶ར༻Ͱ͖ͳ͍
Slide 7
Slide 7 text
ͱ͍͏͜ͱͳ͍Ͱ͠ΐ͏͔
Slide 8
Slide 8 text
ContainerViewControllerΛ
ͬͨ͜ͱͷ͋Δํ
ଟ͍ͱࢥ͍·͕͢
Slide 9
Slide 9 text
൚༻Խ͕͍͜͠ͱ
Slide 10
Slide 10 text
੍ͷͳ͔Ͱ
ContainerViewControllerΛ
ͭ͘Δํ๏ʹ͍ͭͯઆ໌͠·͢
Slide 11
Slide 11 text
• εΫϩʔϧʹΑͬͯ
ϔομʔ͕ॖΉ
• ChildVC
ϔομʔͱλϒͷத
ྫɿTwitter UI
Slide 12
Slide 12 text
Twitter UIͷ;ͨͭͷཁૉ
1.ScrollViewΛΈ߹ΘͤͨView
• εΫϩʔϧͱಉظͨ͠Ξχϝʔγϣϯ
2.൚༻ContainerViewController
• ChildViewControllerಉ࢜ͷಠཱΛอͭ
Twitter UIΛςʔϚʹબΜͩཧ༝ɿ
Slide 13
Slide 13 text
Twitter UIͷ;ͨͭͷཁૉ
1.ScrollViewΛΈ߹ΘͤͨView
• εΫϩʔϧͱಉظͨ͠Ξχϝʔγϣϯ
2.൚༻ContainerViewController
• ChildViewControllerಉ࢜ͷಠཱΛอͭ
Twitter UIΛςʔϚʹબΜͩཧ༝ɿ
੍ͷͱ൚༻Խ͢Δͷ͕͍͠
Slide 14
Slide 14 text
Ͳ͏ͭ͘Δ͔ʁ
Slide 15
Slide 15 text
ContainerViewControllerͷઃܭ
• ΠϯλʔϑΣʔεΛఆٛ͢Δ
• ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ
• ্࣮ͷ੍Λղܾ͢ΔɿࠓճScrollViewؔ࿈
Slide 16
Slide 16 text
ContainerViewControllerͷઃܭ
• ΠϯλʔϑΣʔεΛఆٛ͢Δ
• ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ
• ্࣮ͷ੍Λղܾ͢ΔɿࠓճScrollViewؔ࿈
Slide 17
Slide 17 text
ΠϯλʔϑΣʔεΛఆٛ͢Δ
• ཁ
• ͍͍͢ΠϯλʔϑΣʔεΛ༻ҙ͍ͨ͠
• UIKit४ڌ
Slide 18
Slide 18 text
ΠϯλʔϑΣʔεΛఆٛ͢Δ
ϔομʔ
λϒ
εΫϩʔϧίϯςϯπ
Slide 19
Slide 19 text
ΠϯλʔϑΣʔεΛఆٛ͢Δ
class ScrollableViewController: UIViewController {
var scrollView: UIScrollView
}
class ContainerViewController: UIViewController {
var headerViewController: UIViewController // ϔομʔ
var viewControllers: [ScrollableViewController] // εΫϩʔϧίϯςϯπ
}
εΫϩʔϧίϯςϯπScrollViewΛ͍ͬͯΔඞཁ͕͋Δ
Slide 20
Slide 20 text
ContainerViewControllerͷઃܭ
• ΠϯλʔϑΣʔεΛఆٛ͢Δ
• ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ
• ্࣮ͷ੍Λղܾ͢ΔɿࠓճScrollViewؔ࿈
Slide 21
Slide 21 text
ChildViewControllerͷ
ಠཱੑΛ୲อ͢Δ
• ཁ
• ҙͷChildViewControllerΛѻ͍͍ͨ
Slide 22
Slide 22 text
class ScrollableViewController: UIViewController {
var scrollView: UIScrollView
}
class ContainerViewController: UIViewController {
var headerViewController: UIViewController // ϔομʔ
var viewControllers: [ScrollableViewController] // εΫϩʔϧίϯςϯπ
}
ChildViewControllerͷ
ಠཱੑΛ୲อ͢Δ
ѻ͑ΔChildViewControllerʹ੍ݶ͕͔͔͍ͬͯΔ
Slide 23
Slide 23 text
protocol Scrollable {
var scrollView: UIScrollView! { get }
}
class ContainerViewController: UIViewController {
var headerViewController: UIViewController // ϔομʔ
var viewControllers: [UIViewController & Scrollable] // εΫϩʔϧίϯςϯπ
}
ChildViewControllerͷ
ಠཱੑΛ୲อ͢Δ
ඞਢͷ੍protocolʹΓग़͢
Slide 24
Slide 24 text
ContainerViewControllerͷઃܭ
• ΠϯλʔϑΣʔεΛఆٛ͢Δ
• ChildViewControllerؒͷಠཱੑΛ୲อ͢Δ
• ্࣮ͷ੍Λղܾ͢ΔɿࠓճScrollViewؔ࿈
Slide 25
Slide 25 text
• λϒͷίϯςϯπΛ
εΫϩʔϧͰ͖Δ
• ্·ͰεΫϩʔϧ͢Δͱ
࿈ଓతʹϔομʔ͕ॖΉ
ScrollViewཁ݅
Slide 26
Slide 26 text
࣮Ҋ
1. ScrollViewΛೖΕࢠʹ͢Δ
2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
3. ScrollView.contentInsetΛར༻͢Δ
Slide 27
Slide 27 text
࣮Ҋ
1. ScrollViewΛೖΕࢠʹ͢Δ
2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
3. ScrollView.contentInsetΛར༻͢Δ
Slide 28
Slide 28 text
ScrollView.contentInsetΛ
ར༻͢Δ
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
࣮
Slide 31
Slide 31 text
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ͷมԽΛऔಘ͠ɺϔομʔߴ͞Λߋ৽
Slide 32
Slide 32 text
contentOffsetΛऔಘ͢ΔͳΒ
scrollViewDidScroll
Λ͑Α͍ͷͰ
Slide 33
Slide 33 text
ScrollViewDelegateΛ
ར༻͠ͳ͍ཧ༝
• σϦήʔτʹઃఆͰ͖ΔΠϯελϯε
ͻͱͭͳͷͰɺίϯςφଆͰར༻͢Δͱ
ChildViewControllerͷσϦήʔτϝιου͕
ݺΕͳ͘ͳΔͨΊ
Slide 34
Slide 34 text
·ͱΊ
• ΠϯλʔϑΣʔεΛઌʹߟ͑Δ
• ChildViewControllerؒͷಠཱΛอͭʹ
protocolΛ͏
• ScrollViewಛੑΛཧղͯ͠͏
• ChildViewControllerͷdelegateΛԣऔΓ͠ͳ͍
Slide 35
Slide 35 text
!WFTQJE
HJUIVCDPNTQFFF4DSPMMBCMF5BC$POUSPMMFS
੍ͷͳ͔Ͱ
ContainerViewControllerΛ
ͭ͘Δํ๏
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
ิࢿྉ
Slide 39
Slide 39 text
ScrollView࣮
Ҋ
Slide 40
Slide 40 text
1. ScrollViewΛೖΕࢠʹ͢Δ
Slide 41
Slide 41 text
1. ScrollViewΛೖΕࢠʹ͢Δ
ϔομʔ
λϒ
εΫϩʔϧίϯςϯπ
Slide 42
Slide 42 text
1. ScrollViewΛೖΕࢠʹ͢Δ
• ࿈ଓͯ͠εΫϩʔϧ
Ͱ͖ͳ͍
Slide 43
Slide 43 text
1. ScrollViewΛೖΕࢠʹ͢Δ
આ໌ɿ
• ͻͱͭͷScrollView͕εϫΠϓδΣενϟʔΛ
ड͚औΔͱɺͦͷεΫϩʔϧ͕ऴΘΔ·Ͱ
ଞͷScrollViewʹδΣενϟʔ͕·ΘΒͳ͍ͨΊ
Slide 44
Slide 44 text
2. εΫϩʔϧͰScrollView.frameΛ
ߋ৽͢Δ
Slide 45
Slide 45 text
2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
ϔομʔ
λϒ
εΫϩʔϧίϯςϯπ
Slide 46
Slide 46 text
2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
• ʮϔομʔ͕ॖΉʯͷ͕ཁ݅
• ͦΕʮϔομʔҎ֎͕͕Δʯͱಉ͡
• εΫϩʔϧʹΑͬͯScrollView.frame.heightΛ
มߋ͢Ε࣮ݱͰ͖ΔͷͰͳ͍͔ʁ
Slide 47
Slide 47 text
2. εΫϩʔϧͰScrollView.frameΛߋ৽͢Δ
આ໌ɿ
• εΫϩʔϧதʹScrollView.frame͕ߋ৽͞ΕΔͱ
ʮϢʔβʔ͕৮͍ͬͯΔ(contentOffset)ʯ͕
มΘͬͯ͠·͏
• frameߋ৽ˠcontentOffsetߋ৽ˠframeߋ৽…
ͷϧʔϓͰεΫϩʔϧ͕͓͔͘͠ͳΔ