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

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ߋ৽…  ͷϧʔϓͰεΫϩʔϧ଎౓͕͓͔͘͠ͳΔ