谁能告诉我如何在 iOS 10 的新 Apple map 应用中模仿底部工作表？

在 Android 中，您可以使用模仿此行为的 BottomSheet，但我找不到适用于 iOS 的类似内容。

这是一个带有内容插入的简单 ScrollView ，以便搜索栏位于底部吗？

我是 iOS 编程的新手，所以如果有人可以帮助我创建这个布局，我将不胜感激。

这就是我所说的“底页”:

最佳答案

我不知道新 map 应用程序的底部表单如何准确响应用户交互。但是您可以创建一个看起来像屏幕截图中的自定义 View 并将其添加到主视图。

我假设你知道如何:

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

2- 使用 googleMaps 或 Apple 的 MapKit。

例子

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

配置 map View Controller

创建一个方法来添加底部工作 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) 将 Pan Gesture Recognizer 添加到您的 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 ，那么您有两个选择:

首先:

设计带有header view的view，并在header中添加panGesture。 (糟糕的用户体验)。

第二:

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

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

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

• View 部分可见。
• View 完全可见，scrollView contentOffset 属性为 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

关于ios - 我如何模仿 map 应用程序的底部工作表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37967555/