如何模仿地图应用程序的底部工作表？

我不知道新地图应用程序的底页究竟如何响应用户交互。但是您可以创建一个类似于屏幕截图中的自定义视图并将其添加到主视图中。

我假设你知道如何：

1-通过情节提要或使用 xib 文件创建视图控制器。

2- 使用 googleMaps 或 Apple 的 MapKit。

例子

1- 创建 2 个视图控制器，例如 MapViewController 和 BottomSheetViewController。第一个控制器将托管地图，第二个控制器是底部工作表本身。

配置 MapViewController

创建一个方法来添加底部工作表视图。

func addBottomSheetView() {
    // 1- Init bottomSheetVC
    let bottomSheetVC = BottomSheetViewController()

    // 2- Add bottomSheetVC as a child view 
    self.addChildViewController(bottomSheetVC)
    self.view.addSubview(bottomSheetVC.view)
    bottomSheetVC.didMoveToParentViewController(self)

    // 3- Adjust bottomSheet frame and initial position.
    let height = view.frame.height
    let width  = view.frame.width
    bottomSheetVC.view.frame = CGRectMake(0, self.view.frame.maxY, width, height)
}

并在 viewDidAppear 方法中调用它：

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    addBottomSheetView()
}

配置 BottomSheetViewController

1) 准备背景

创建一种方法来添加模糊和活力效果

func prepareBackgroundView(){
    let blurEffect = UIBlurEffect.init(style: .Dark)
    let visualEffect = UIVisualEffectView.init(effect: blurEffect)
    let bluredView = UIVisualEffectView.init(effect: blurEffect)
    bluredView.contentView.addSubview(visualEffect)

    visualEffect.frame = UIScreen.mainScreen().bounds
    bluredView.frame = UIScreen.mainScreen().bounds

    view.insertSubview(bluredView, atIndex: 0)
}

在你的 viewWillAppear 中调用这个方法

override func viewWillAppear(animated: Bool) {
   super.viewWillAppear(animated)
   prepareBackgroundView()
}

确保控制器的视图背景颜色为 clearColor。

2）动画bottomSheet外观

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)

    UIView.animateWithDuration(0.3) { [weak self] in
        let frame = self?.view.frame
        let yComponent = UIScreen.mainScreen().bounds.height - 200
        self?.view.frame = CGRectMake(0, yComponent, frame!.width, frame!.height)
    }
}

3）根据需要修改您的xib。

4) 将平移手势识别器添加到您的视图中。

在您的 viewDidLoad 方法中添加 UIPanGestureRecognizer。

override func viewDidLoad() {
    super.viewDidLoad()

    let gesture = UIPanGestureRecognizer.init(target: self, action: #selector(BottomSheetViewController.panGesture))
    view.addGestureRecognizer(gesture)

}

并实现你的手势行为：

func panGesture(recognizer: UIPanGestureRecognizer) {
    let translation = recognizer.translationInView(self.view)
    let y = self.view.frame.minY
    self.view.frame = CGRectMake(0, y + translation.y, view.frame.width, view.frame.height)
     recognizer.setTranslation(CGPointZero, inView: self.view)
}

可滚动的底页：

如果您的自定义视图是滚动视图或任何其他继承自的视图，那么您有两种选择：

第一的：

设计带有标题视图的视图并将 panGesture 添加到标题中。 （糟糕的用户体验）。

第二：

1 - 将 panGesture 添加到底部工作表视图。

2 - 实现 UIGestureRecognizerDelegate 并将 panGesture 委托设置为控制器。

3- 实现 shouldRecognizeSimultaneouslyWith 委托函数并在两种情况下禁用 scrollView isScrollEnabled 属性：

该视图是部分可见的。

视图完全可见，scrollView contentOffset 属性为 0，用户正在向下拖动视图。

否则启用滚动。

  func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
      let gesture = (gestureRecognizer as! UIPanGestureRecognizer)
      let direction = gesture.velocity(in: view).y

      let y = view.frame.minY
      if (y == fullView && tableView.contentOffset.y == 0 && direction > 0) || (y == partialView) {
          tableView.isScrollEnabled = false
      } else {
        tableView.isScrollEnabled = true
      }

      return false
  }

笔记

如果您将 .allowUserInteraction 设置为动画选项，例如在示例项目中，so you need to enable scrolling on the animation completion closure if the user is scrolling up.

示例项目

我在 this 存储库上创建了一个包含更多选项的示例项目，它可以让您更好地了解如何自定义流程。

In the demo, addBottomSheetView() function controls which view should be used as a bottom sheet.

示例项目截图

局部视图

https://i.stack.imgur.com/AQ7fW.png

全视图

https://i.stack.imgur.com/YVOPS.png

可滚动视图

https://i.stack.imgur.com/GoN5K.png

---

更新 iOS 15

在 iOS 15 中，您现在可以使用原生 UISheetPresentationController。

if let sheet = viewControllerToPresent.sheetPresentationController {
    sheet.detents = [.medium(), .large()]
    // your sheet setup
}
present(viewControllerToPresent, animated: true, completion: nil)

请注意，您甚至可以使用 overcurrentcontext 演示模式重现其导航堆栈：

let nextViewControllerToPresent: UIViewController = ...
nextViewControllerToPresent.modalPresentationStyle = .overCurrentContext
viewControllerToPresent.present(nextViewControllerToPresent, animated: true, completion: nil)

遗产

我根据下面的回答发布了 library。

它模仿快捷方式应用程序覆盖。有关详细信息，请参阅 this article。

库的主要组件是 OverlayContainerViewController。它定义了一个可以上下拖动视图控制器、隐藏或显示其下方内容的区域。

let contentController = MapsViewController()
let overlayController = SearchViewController()

let containerController = OverlayContainerViewController()
containerController.delegate = self
containerController.viewControllers = [
    contentController,
    overlayController
]

window?.rootViewController = containerController

实施 OverlayContainerViewControllerDelegate 以指定希望的缺口数：

enum OverlayNotch: Int, CaseIterable {
    case minimum, medium, maximum
}

func numberOfNotches(in containerViewController: OverlayContainerViewController) -> Int {
    return OverlayNotch.allCases.count
}

func overlayContainerViewController(_ containerViewController: OverlayContainerViewController,
                                    heightForNotchAt index: Int,
                                    availableSpace: CGFloat) -> CGFloat {
    switch OverlayNotch.allCases[index] {
        case .maximum:
            return availableSpace * 3 / 4
        case .medium:
            return availableSpace / 2
        case .minimum:
            return availableSpace * 1 / 4
    }
}

SwiftUI (12/29/20)

该库的 SwiftUI version 现在可用。

Color.red.dynamicOverlay(Color.green)

上一个答案

我认为建议的解决方案中没有处理一个重要的点：滚动和翻译之间的过渡。

https://i.stack.imgur.com/BqlYi.gif

在 Maps 中，您可能已经注意到，当 tableView 到达 contentOffset.y == 0 时，底部工作表要么向上滑动，要么向下滑动。

这一点很棘手，因为当我们的平移手势开始翻译时，我们不能简单地启用/禁用滚动。它会停止滚动，直到新的触摸开始。此处提出的大多数解决方案都是这种情况。

这是我实施这一议案的尝试。

起点：地图应用

为了开始我们的研究，让我们可视化 Maps 的视图层次结构（在模拟器上启动 Maps 并在 Xcode 9 中选择 Debug > Attach to process by PID or Name > Maps）。

https://i.stack.imgur.com/0qlJx.png

它没有说明动作是如何工作的，但它帮助我理解了它的逻辑。您可以使用 lldb 和视图层次结构调试器。

我们的视图控制器堆栈

让我们创建 Maps ViewController 架构的基本版本。

我们从 BackgroundViewController（我们的地图视图）开始：

class BackgroundViewController: UIViewController {
    override func loadView() {
        view = MKMapView()
    }
}

我们将 tableView 放在专用的 UIViewController 中：

class OverlayViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    lazy var tableView = UITableView()

    override func loadView() {
        view = tableView
        tableView.dataSource = self
        tableView.delegate = self
    }

    [...]
}

现在，我们需要一个 VC 来嵌入覆盖并管理它的翻译。为了简化问题，我们认为它可以将叠加层从一个静态点 OverlayPosition.maximum 转换到另一个 OverlayPosition.minimum。

目前它只有一个公共方法来动画位置变化，它有一个透明的视图：

enum OverlayPosition {
    case maximum, minimum
}

class OverlayContainerViewController: UIViewController {

    let overlayViewController: OverlayViewController
    var translatedViewHeightContraint = ...

    override func loadView() {
        view = UIView()
    }

    func moveOverlay(to position: OverlayPosition) {
        [...]
    }
}

最后，我们需要一个 ViewController 来嵌入所有内容：

class StackViewController: UIViewController {

    private var viewControllers: [UIViewController]

    override func viewDidLoad() {
        super.viewDidLoad()
        viewControllers.forEach { gz_addChild($0, in: view) }
    }
}

在我们的 AppDelegate 中，我们的启动顺序如下所示：

let overlay = OverlayViewController()
let containerViewController = OverlayContainerViewController(overlayViewController: overlay)
let backgroundViewController = BackgroundViewController()
window?.rootViewController = StackViewController(viewControllers: [backgroundViewController, containerViewController])

叠加翻译背后的难点

现在，如何翻译我们的叠加层？

大多数提议的解决方案都使用专用的平移手势识别器，但实际上我们已经有了一个：表格视图的平移手势。此外，我们需要保持滚动和翻译同步，UIScrollViewDelegate 包含我们需要的所有事件！

一个简单的实现会使用第二个平移手势并在转换发生时尝试重置表格视图的 contentOffset：

func panGestureAction(_ recognizer: UIPanGestureRecognizer) {
    if isTranslating {
        tableView.contentOffset = .zero
    }
}

但它不起作用。当它自己的平移手势识别器动作触发或调用它的 displayLink 回调时，tableView 会更新它的 contentOffset。我们的识别器不可能在成功覆盖 contentOffset 之后立即触发。我们唯一的机会是参与布局阶段（通过在滚动视图的每一帧覆盖滚动视图调用的 layoutSubviews）或响应每次 contentOffset 调用的委托的 didScroll 方法被修改。让我们试试这个。

翻译实施

我们向 OverlayVC 添加一个委托，以将滚动视图的事件分派给我们的翻译处理程序 OverlayContainerViewController：

protocol OverlayViewControllerDelegate: class {
    func scrollViewDidScroll(_ scrollView: UIScrollView)
    func scrollViewDidStopScrolling(_ scrollView: UIScrollView)
}

class OverlayViewController: UIViewController {

    [...]

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        delegate?.scrollViewDidScroll(scrollView)
    }

    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        delegate?.scrollViewDidStopScrolling(scrollView)
    }
}

在我们的容器中，我们使用枚举来跟踪翻译：

enum OverlayInFlightPosition {
    case minimum
    case maximum
    case progressing
}

当前位置计算如下所示：

private var overlayInFlightPosition: OverlayInFlightPosition {
    let height = translatedViewHeightContraint.constant
    if height == maximumHeight {
        return .maximum
    } else if height == minimumHeight {
        return .minimum
    } else {
        return .progressing
    }
}

我们需要 3 种方法来处理翻译：

第一个告诉我们是否需要开始翻译。

private func shouldTranslateView(following scrollView: UIScrollView) -> Bool {
    guard scrollView.isTracking else { return false }
    let offset = scrollView.contentOffset.y
    switch overlayInFlightPosition {
    case .maximum:
        return offset < 0
    case .minimum:
        return offset > 0
    case .progressing:
        return true
    }
}

第二个执行翻译。它使用 scrollView 的平移手势的 translation(in:) 方法。

private func translateView(following scrollView: UIScrollView) {
    scrollView.contentOffset = .zero
    let translation = translatedViewTargetHeight - scrollView.panGestureRecognizer.translation(in: view).y
    translatedViewHeightContraint.constant = max(
        Constant.minimumHeight,
        min(translation, Constant.maximumHeight)
    )
}

当用户松开手指时，第三个动画结束翻译。我们使用速度和视图的当前位置来计算位置。

private func animateTranslationEnd() {
    let position: OverlayPosition =  // ... calculation based on the current overlay position & velocity
    moveOverlay(to: position)
}

我们的叠加层的委托实现看起来像：

class OverlayContainerViewController: UIViewController {

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        guard shouldTranslateView(following: scrollView) else { return }
        translateView(following: scrollView)
    }

    func scrollViewDidStopScrolling(_ scrollView: UIScrollView) {
        // prevent scroll animation when the translation animation ends
        scrollView.isEnabled = false
        scrollView.isEnabled = true
        animateTranslationEnd()
    }
}

最后一个问题：调度覆盖容器的触摸

现在翻译效率很高。但是还有最后一个问题：触摸没有传递到我们的背景视图。它们都被覆盖容器的视图拦截。我们不能将 isUserInteractionEnabled 设置为 false，因为它也会禁用我们表格视图中的交互。该解决方案是地图应用程序中大量使用的解决方案，PassThroughView：

class PassThroughView: UIView {
    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        let view = super.hitTest(point, with: event)
        if view == self {
            return nil
        }
        return view
    }
}

它将自己从响应者链中移除。

在 OverlayContainerViewController 中：

override func loadView() {
    view = PassThroughView()
}

结果

结果如下：

https://i.stack.imgur.com/fihVW.gif

您可以找到代码 here。

如果您发现任何错误，请告诉我！请注意，您的实现当然可以使用第二个平移手势，特别是如果您在叠加层中添加标题。

更新 23/08/18

当用户结束拖动时，我们可以将 scrollViewDidEndDragging 替换为 willEndScrollingWithVelocity 而不是 enabling/disabling 滚动：

func scrollView(_ scrollView: UIScrollView,
                willEndScrollingWithVelocity velocity: CGPoint,
                targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    switch overlayInFlightPosition {
    case .maximum:
        break
    case .minimum, .progressing:
        targetContentOffset.pointee = .zero
    }
    animateTranslationEnd(following: scrollView)
}

我们可以使用弹簧动画并在动画制作时允许用户交互以使运动流更好：

func moveOverlay(to position: OverlayPosition,
                 duration: TimeInterval,
                 velocity: CGPoint) {
    overlayPosition = position
    translatedViewHeightContraint.constant = translatedViewTargetHeight
    UIView.animate(
        withDuration: duration,
        delay: 0,
        usingSpringWithDamping: velocity.y == 0 ? 1 : 0.6,
        initialSpringVelocity: abs(velocity.y),
        options: [.allowUserInteraction],
        animations: {
            self.view.layoutIfNeeded()
    }, completion: nil)
}

---