ios - 如何模仿 map 应用程序的底部工作表？

Question

谁能告诉我如何在 iOS 10 的新 Apple Maps 应用程序中模仿底部工作表？
在 Android 中，您可以使用 BottomSheet它模仿了这种行为，但我在 iOS 上找不到类似的东西。
这是一个带有内容插入的简单 ScrollView ，因此搜索栏位于底部？
我对 iOS 编程相当陌生，所以如果有人可以帮助我创建这个布局，我将不胜感激。
这就是我所说的“底页”:

Answer 1

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

我假设你知道如何:

1-通过 Storyboard 或使用 xib 文件创建 View Controller 。

2- 使用 googleMaps 或 Apple 的 MapKit。

例子

1- 创建 2 个 View Controller ，例如 map View Controller 和 BottomSheetViewController .第一个 Controller 将托管 map ，第二个 Controller 是底部工作表本身。

配置 MapViewController

创建一个方法来添加底部工作 TableView 。

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()
}

确保 Controller 的 View 背景颜色为 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) 将平移手势识别器添加到您的 View 中。

在您的 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)
}

可滚动的底页:

如果您的自定义 View 是 ScrollView 或任何其他继承自的 View ，那么您有两种选择:

第一:

设计带有标题 View 的 View 并将 panGesture 添加到标题中。 (糟糕的用户体验) .

二:

1 - 将 panGesture 添加到底部工作 TableView 。

2 - 实现 UIGestureRecognizerDelegate 并将 panGesture 委托(delegate)设置为 Controller 。

3- 实现 应该同时识别 委托(delegate)函数和 禁用 ScrollView isScrollEnabled 两种情况下的属性:

该 View 是部分可见的。

View 完全可见， ScrollView 内容偏移 属性为 0 并且用户正在向下拖动 View 。

否则启用滚动。

  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 上创建了一个带有更多选项的示例项目repo，它可以让您更好地了解如何自定义流程。

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

示例项目截图

- 局部 View



- 全 View



- 可 ScrollView