問題描述

我一直在嘗試自定義交互式視圖控制器的展示和解除(使用 UIPresentationController、UIPercentDrivenInteractiveTransition、UIViewControllerAnimatedTransitioning 和 的組合>UIViewControllerTransitioningDelegate) 并且大多數情況下都可以很好地滿足我的需求.

但是，在我閱讀的任何教程或文檔中，我還沒有找到一種常見的情況，這導致我提出以下問題:

...

當被解除的視圖包含 UIScrollView(即 UITableView、UICollectionView、WKWebView 等)時，通過平移手勢處理自定義交互式視圖控制器解除的正確方法是什么?

...

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

1. 視圖控制器可以通過向下平移以交互方式關閉.這是許多應用程序中常見的用戶體驗.

2. 如果關閉的視圖控制器包含(垂直滾動)滾動視圖，則向下平移會按預期滾動該視圖，直到用戶到達頂部，然后滾動停止并發生平移關閉.

3. 滾動視圖應該正常運行.

我知道這在技術上是可能的 - 我在其他應用程序中看到過它，例如 Overcast 和 Apple 自己的音樂應用程序 - 但我無法找到協調我的平移手勢的行為與滾動視圖的行為.

我自己的大部分嘗試都集中在嘗試在滾動時根據其 contentOffset.y 有條件地啟用/禁用滾動視圖(或其關聯的平移手勢識別器)并讓視圖控制器解除的平移手勢識別器從那里接管，但這充滿了問題，我擔心我想多了.

我覺得秘密主要在于以下平移手勢識別器委托方法:

funcgestureRecognizer(_gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) ->布爾 {//...}

我創建了一個簡化的示例項目，它應該更清楚地展示場景.非常歡迎任何代碼建議！

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

這篇關于使用(自定義、交互式)視圖控制器呈現和解除處理滾動視圖的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！