使用(自定义，交互式)视图控制器演示和解雇滚动视图 [英] Handling scroll views with (custom, interactive) view controller presentation and dismissal

查看：123
本文介绍了使用(自定义，交互式)视图控制器演示和解雇滚动视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在尝试自定义交互式视图控制器的显示和关闭(使用UIPresentationController，UIPercentDrivenInteractiveTransition，UIViewControllerAnimatedTransitioning和UIViewControllerTransitioningDelegate的组合)，并且大多数情况下都能满足我的需求.

但是，在我所阅读的任何教程或文档中，都没有找到一种常见的解决方案，导致我遇到以下问题:

...

当关闭的视图包含UIScrollView(即UITableView，UICollectionView，WKWebView等)时，通过平移手势处理自定义交互式视图控制器的正确方法是什么?

...

基本上，我想要的是以下内容:

    通过平移

  1. 视图控制器，可以交互方式禁用它们.这是许多应用程序中常见的UX.

  2. 如果解雇的视图控制器包含一个(垂直滚动)滚动视图，则按预期的方向向下滚动该视图，直到用户到达顶部为止，此后滚动停止并发生平移至解雇". /p>

  3. 否则滚动视图应表现正常.

我知道这在技术上是可能的-我已经在其他应用(例如Overcast和Apple自己的音乐应用)中看到了这一点-但我无法找到协调协调的关键平移手势和滚动视图的手势行为.

我自己的大多数尝试都集中在尝试在滚动并让视图控制器解雇的平移手势识别器从那里接管时，基于其contentOffset.y有条件地启用/禁用滚动视图(或其关联的平移手势识别器)，但这一直到处都是问题，我担心自己想得太深了.

我觉得秘密主要在于以下平移手势识别器委托方法:

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
   // ...
}

我创建了一个简化的示例项目，该项目应该更清楚地演示该方案.任何代码建议都非常欢迎！

https://github.com/Darchmare/SlidePanel-iOS

解决方案

解决方案

  • 使scrollView在达到顶部后停止滚动，方法是使用 UIScrollView的弹回属性和 scrollViewDidScroll(_ :) 方法. /p> 

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
    scrollView.bounces = (scrollView.contentOffset.y > 10);
}

    别忘了设置scrollView.delegate = self

  • 仅当scrollView到达顶部时才处理panGestureRecognizer-这意味着scrollView.contentOffset.y == 0使用协议时.

    protocol PanelAnimationControllerDelegate {
    func shouldHandlePanelInteractionGesture() -> Bool
}

    ViewController 

    func shouldHandlePanelInteractionGesture() -> Bool {
    return (scrollView.contentOffset.y == 0);
}

    PanelInteractionController 

    class PanelInteractionController: ... {

  var startY:CGFloat = 0

  private weak var viewController: (UIViewController & PanelAnimationControllerDelegate)?

  @objc func handlePanGestureRecognizer(_ gestureRecognizer: UIPanGestureRecognizer) {
    switch gestureRecognizer.state {
    case .began:
      break
    case .changed:
      let translation    = gestureRecognizer.translation(in: gestureRecognizer.view!.superview!)
      let velocity    = gestureRecognizer.velocity(in: gestureRecognizer.view!.superview)
      let state      = gestureRecognizer.state

      // Don't do anything when |scrollView| is scrolling
      if !(viewController?.shouldHandlePanelInteractionGesture())! && percentComplete == 0 {
        return;
      }

      var rawProgress    = CGFloat(0.0)

      rawProgress    = ((translation.y - startTransitionY) / gestureRecognizer.view!.bounds.size.height)

      let progress    = CGFloat(fminf(fmaxf(Float(rawProgress), 0.0), 1.0))

      if abs(velocity.x) > abs(velocity.y) && state == .began {
        // If the user attempts a pan and it looks like it's going to be mostly horizontal, bail - we don't want it... - JAC
        return
      }

      if !self.interactionInProgress {
        // Start to pan |viewController| down
        self.interactionInProgress = true
        startTransitionY = translation.y;
        self.viewController?.dismiss(animated: true, completion: nil)
      } else {
        // If the user gets to a certain point within the dismissal and releases the panel, allow the dismissal to complete... - JAC
        self.shouldCompleteTransition = progress > 0.2

        update(progress)
      }
    case .cancelled:
      self.interactionInProgress = false
      startTransitionY = 0

      cancel()
    case .ended:
      self.interactionInProgress = false
      startTransitionY = 0

      if self.shouldCompleteTransition == false {
        cancel()
      } else {
        finish()
      }
    case .failed:
      self.interactionInProgress = false
      startTransitionY = 0

      cancel()
    default:
      break;
    }
  }
}

结果

有关更多详细信息，您可以查看我的示例项目

I have been experimenting with custom interactive view controller presentation and dismissal (using a combination of UIPresentationController, UIPercentDrivenInteractiveTransition, UIViewControllerAnimatedTransitioning, and UIViewControllerTransitioningDelegate) and have mostly gotten things working well for my needs.

However, there is one common scenario that I've yet to find addressed in any of the tutorials or documentation that I've read, leading me to the following question:

...

What is the proper way of handling custom interactive view controller dismissal, via a pan gesture, when the dismissed view contains a UIScrollView (ie. UITableView, UICollectionView, WKWebView, etc)?

...

Basically, what I'd like is for the following:

  1. View controllers are interactively dismissible by panning them down. This is common UX in many apps.

  2. If the dismissed view controller contains a (vertically-scrolling) scroll view, panning down scrolls that view as expected until the user reaches the top, after which the scrolling ceases and the pan-to-dismiss occurs.

  3. Scroll views should otherwise behave as normal.

I know that this is technically possible - I've seen it in other apps, such as Overcast and Apple's own Music app - but I've not been able to find the key to coordinating the behavior of my pan gesture with that of the scroll view(s).

Most of my own attempts center on trying to conditionally enable/disable the scrollview (or its associated pan gesture recognizer) based on its contentOffset.y while scrolling and having the view controller dismissal's pan gesture recognizer take over from there, but this has been fraught with problems and I fear that I am overthinking it.

I feel like the secret mostly lies in the following pan gesture recognizer delegate method:

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
   // ...
}

I have created a reduced sample project which should demonstrate the scenario more clearly. Any code suggestions are highly welcome!

https://github.com/Darchmare/SlidePanel-iOS

解决方案

Solution

  • Make scrollView stop scrolling after it reached top by using UIScrollView's bounces property and scrollViewDidScroll(_:) method.

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
    scrollView.bounces = (scrollView.contentOffset.y > 10);
}

    Don't forget to set scrollView.delegate = self

  • Only handle panGestureRecognizer when scrollView reached top - It means when scrollView.contentOffset.y == 0 by using a protocol.

    protocol PanelAnimationControllerDelegate {
    func shouldHandlePanelInteractionGesture() -> Bool
}

    ViewController

    func shouldHandlePanelInteractionGesture() -> Bool {
    return (scrollView.contentOffset.y == 0);
}

    PanelInteractionController

    class PanelInteractionController: ... {

  var startY:CGFloat = 0

  private weak var viewController: (UIViewController & PanelAnimationControllerDelegate)?

  @objc func handlePanGestureRecognizer(_ gestureRecognizer: UIPanGestureRecognizer) {
    switch gestureRecognizer.state {
    case .began:
      break
    case .changed:
      let translation    = gestureRecognizer.translation(in: gestureRecognizer.view!.superview!)
      let velocity    = gestureRecognizer.velocity(in: gestureRecognizer.view!.superview)
      let state      = gestureRecognizer.state

      // Don't do anything when |scrollView| is scrolling
      if !(viewController?.shouldHandlePanelInteractionGesture())! && percentComplete == 0 {
        return;
      }

      var rawProgress    = CGFloat(0.0)

      rawProgress    = ((translation.y - startTransitionY) / gestureRecognizer.view!.bounds.size.height)

      let progress    = CGFloat(fminf(fmaxf(Float(rawProgress), 0.0), 1.0))

      if abs(velocity.x) > abs(velocity.y) && state == .began {
        // If the user attempts a pan and it looks like it's going to be mostly horizontal, bail - we don't want it... - JAC
        return
      }

      if !self.interactionInProgress {
        // Start to pan |viewController| down
        self.interactionInProgress = true
        startTransitionY = translation.y;
        self.viewController?.dismiss(animated: true, completion: nil)
      } else {
        // If the user gets to a certain point within the dismissal and releases the panel, allow the dismissal to complete... - JAC
        self.shouldCompleteTransition = progress > 0.2

        update(progress)
      }
    case .cancelled:
      self.interactionInProgress = false
      startTransitionY = 0

      cancel()
    case .ended:
      self.interactionInProgress = false
      startTransitionY = 0

      if self.shouldCompleteTransition == false {
        cancel()
      } else {
        finish()
      }
    case .failed:
      self.interactionInProgress = false
      startTransitionY = 0

      cancel()
    default:
      break;
    }
  }
}

Result

For more detail, you can take a look at my sample project

这篇关于使用(自定义，交互式)视图控制器演示和解雇滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆