UITableViewのスクロールに合わせて、UIViewControllerを縦方向にページングする

potatotips #33で発表した資料になります
http://potatotips.connpass.com/event/38557/

Qiitaの記事:
http://qiita.com/marty-suzuki/items/f6630543142c34d442ed

MisterFusion:
https://github.com/marty-suzuki/MisterFusion

HoverConversion:
https://github.com/marty-suzuki/HoverConversion

MartyJunior:
https://github.com/marty-suzuki/MartyJunior

Back to the futureな発表はここからです
https://speakerdeck.com/martysuzuki/uitableviewfalsesukurorunihe-wasete-uiviewcontrollerwozong-fang-xiang-nipezingusuru?slide=25

Transcript

1. UITableViewͷεΫϩʔϧʹ߹Θͤͯ UIViewControllerΛॎํ޲ʹ ϖʔδϯά͢Δ marty-suzuki
2. ࣗݾ঺հ Github: https://github.com/marty- suzuki Twitter: https://twitter.com/ marty_suzuki
3. MisterFusion https://github.com/marty-suzuki/ MisterFusion • Support Swift2.3 • Support Swift3
5. 755ͷϗʔϜ <-> τʔΫϧʔϜͷભҠ • ϗʔϜͷϑΥϩʔϦετ͔ΒτʔΫ ϧʔϜ΁ભҠ • ϑΥϩʔϦετͷॱʹ࿈ಈͯ͠ɺॎ ํ޲ʹViewControllerΛભҠ
6. ͜ͷભҠΛϥΠϒϥϦԽ͠·ͨ͠
7. HoverConversion https://github.com/marty-suzuki/ HoverConversion • ϢʔβʔϦετ͔ΒϢʔβʔͷTweet Ұཡ΁ભҠ • ϢʔβʔϦετͷॱʹ࿈ಈͯ͠ɺॎ ํ޲ʹViewControllerΛભҠ
8. ViewControllerͷߏ੒
9. HCContentViewController • HCPagingViewController্ʹදࣔ͞ ΕΔίϯςϯπΛѻ͏ViewController • UITableView͕viewʹରͯ͠ addSubview͞Ε͍ͯΔ
10. HCPagingViewController • ContainerViewΛ3͍ͭ࣋ͬͯΔ • addSubview͞Ε͍ͯΔॱ൪͸ɺ centerɺupperɺlower • HCPagingViewControllerͷviewͷ.height ͱ.widthʹରͯ͠.equalͷConstraint • upperͷ.bottom͕centerͷ.topʹର͠ ͯ.equalͰ0ͷConstraint • lowerͷ.top͕centerͷ.bottomʹର͠ ͯ.equalͰ0ͷConstraint
11. HCPagingViewController • ͦΕͧΕͷContainerViewʹ HCContentViewControllerͷview͕ addSubview͞Ε͍ͯΔ • ͦΕͧΕͷContainerView ʹ.topɺ.leftɺ.rightɺ.bottomʹର ͯ͠0ͷConstraint
12. ॎํ޲ͷભҠ • HCContentViewControllerͷ UITableViewΛ࠷Լ෦·ͰεΫϩʔϧ ͠ɺbounce͕30px΄Ͳͩͬͨͱ͢Δ • ͦͷࡍʹɺlowerͷ HCContentViewControllerͷ view.frame.origin.yΛ-30px1ʹ͢Δ 1 bounceྔ = tableView.contentOffset.y - (tableView.contentSize.height - tableview.bounds.size.height)
13. ॎํ޲ͷભҠ • ࿮ͰғΘΕͨ෦෼͕ը໘ʹදࣔ͞Εͯ ͍Δ෦෼ • upperͱcenterͷ HCContentViewControllerͷ view.frame.origin.y͸ม͑ͳ͍ • centerͷHCContentViewControllerͷ UITableView͕bounce͍ͯ͠Δ෦෼ ʹɺlowerͷHCContentViewController ͷview͕ॏͳ͍ͬͯΔͷͰɺ࿈ಈͯ͠ ͍ΔΑ͏ʹݟ͑Δ
14. ॎํ޲ͷભҠ • ContainerView͸centerɺupperɺ lowerͷॱͰaddSubview͞Ε͍ͯΔ ͷͰɺHCContentViewControllerͷ view΋ͦͷॱͰॏͳΔ
15. Ξχϝʔγϣϯ • centerͷHCContentViewController ͷUITableViewͷcontentOffset͸ݻ ఆͨ͠··ɺ͢΂ͯͷ HCContentViewControllerͷviewΛ bounceʹରͯ͠ద౰ͳ஋2ͰΞχϝʔ γϣϯͤ͞Δ 2 Ξχϝʔγϣϯͤ͞Δpx਺ = tableview.bounds.size.height - bounceྔ1
16. Ξχϝʔγϣϯ׬ྃޙ • ͢΂ͯͷHCContentViewController ͷviewΛremoveFromSuperview • lowerʹ͋ͬͨ HCContentViewControllerͷviewΛ centerʹaddSubview • centerʹ͋ͬͨ HCContentViewControllerͷviewΛ upperʹaddSubview
17. Ξχϝʔγϣϯ׬ྃޙ • HCPagingViewControllerDataSource ͔ΒindexPathʹ֘౰͢Δ HCContentViewControllerΛऔಘ ͠ɺͦͷviewΛlowerʹ addSubview
18. HoverConversion • ϢʔβʔͷTweetҰཡ͔ΒϢʔβʔϦ ετ΁ભҠ • ໭Δࡍ͸ViewControllerʹඥ෇͍ͨ Cell͕ϋΠϥΠτ͞ΕΔ
19. ViewControllerͷߏ੒
20. HCRootViewController • Ϧετ͔ΒHCPagingViewController Λදࣔ͢ΔͨΊͷViewController • UITableView͕viewʹରͯ͠ addSubview͞Ε͍ͯΔ
21. BackϘλϯͰͷભҠ class HCRootAnimatedTransitioning: NSObject, UIViewControllerAnimatedTransitioning { @objc func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { //লུ var initialFrame: CGRect? if let rootVC = toVC as? HCRootViewController, let pagingVC = fromVC as? HCPagingViewController { let indexPath = pagingVC.currentIndexPath //֘౰ͷcell͕ը໘಺ʹଘࡏ͠ͳ͍৔߹͸ɺͦͷcell·ͰΞχϝʔγϣϯͳ͠ͰεΫϩʔϧʢলུʣ if let cell = rootVC.tableView?.cellForRow(at: indexPath) { //ը໘ʹରͯ͠ͷ֘౰ͷcellͷҐஔΛऔಘ if let superview = rootVC.view, let point = cell.superview?.convert(cell.frame.origin, to: superview) { initialFrame = CGRect(origin: point, size: cell.bounds.size) ɹɹɹɹɹ } ɹɹɹɹɹɹɹ} rootVC.tableView?.selectRow(at: indexPath, animated: false, scrollPosition: .none) //֘౰ͷcellΛબ୒ঢ়ଶʹ͢Δ } //লུ //HCPagingViewControllerͷview͕initialFrameʹͳΔΞχϝʔγϣϯΛ࣮ߦʢলུʣ } }
22. ΤοδεϫΠϓͰͷભҠ HCDefaultAnimatedTransitioning: NSObject, UIViewControllerAnimatedTransitioning { @objc func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { //লུ if let pagingVC = fromVC as? HCPagingViewController, let rootVC = toVC as? HCRootViewController { let indexPath = pagingVC.currentIndexPath //֘౰ͷcell͕ը໘಺ʹଘࡏ͠ͳ͍৔߹͸ɺͦͷcell·ͰΞχϝʔγϣϯͳ͠ͰεΫϩʔϧ if rootVC.tableView?.cellForRow(at: indexPath) == nil { rootVC.tableView?.scrollToRowAtIndexPath( indexPath, atScrollPosition: pagingVC.scrollDirection, animated: false) } //֘౰ͷcellΛબ୒ঢ়ଶʹ͢Δ rootVC.tableView?.selectRow(at: indexPath, animated: false, scrollPosition: .none) } //লུ //ΤοδεϫΠϓͰભҠ͢ΔΞχϝʔγϣϯΛ࣮ߦʢলུʣ } }
23. Qiita http://qiita.com/marty-suzuki/items/ f6630543142c34d442ed
24. ༨ஊͰ͕͢...
25. MisterFusion3 3 MisterFusion is Swift DSL for AutoLayout. It is the extremely clear, but concise syntax. https://github.com/marty-suzuki/MisterFusion
26. MartyJunior4 4 You can change tab contents with swipe gesture on middle of UITableView. https://github.com/marty-suzuki/MartyJunior
27. HoverConversion5 5 HoverConversion realized vertical paging with UITableView. https://github.com/marty-suzuki/HoverConversion
29. ࡞Ζ͏ͱͯ͠·ͨ͠
30. iOS9 "Back to app button" Ú Back to The Future !
31. iOS10 "Back to app button" Ú The Future !
32. iOS10Ͱ Back to the futureʹ ͳΒͳ͘ͳͬͨͷͰஅ೦
33. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ marty-suzuki