Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Ae276805027a01983503c3edafbdb6b2?s=47 Taiki Suzuki
September 28, 2016

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

Ae276805027a01983503c3edafbdb6b2?s=128

Taiki Suzuki

September 28, 2016
Tweet

More Decks by Taiki Suzuki

Other Decks in Programming

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

  4. None
  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

  28. None
  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