如何模仿地图应用程序的底部工作表? [英] How can I mimic the bottom sheet from the Maps app?

问题描述

谁能告诉我如何在 iOS 10 的新 Apple Maps 应用程序中模仿底部工作表?

在 Android 中，您可以使用模仿这种行为的 BottomSheet，但我在 iOS 中找不到类似的东西.

这是一个带有内容插入的简单滚动视图，以便搜索栏位于底部?

我对 iOS 编程还很陌生，所以如果有人能帮我创建这个布局，我将不胜感激.

这就是我所说的底页":

解决方案

我不知道新地图应用的底部工作表如何响应用户交互.但是您可以创建一个与屏幕截图中的视图类似的自定义视图，并将其添加到主视图中.

我假设您知道如何:

1- 通过故事板或使用 xib 文件创建视图控制器.

2- 使用 googleMaps 或 Apple 的 MapKit.

示例

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

配置 MapViewController

创建添加底部工作表视图的方法.

func addBottomSheetView() {//1- 初始化bottomSheetVC让 bottomSheetVC = BottomSheetViewController()//2- 添加bottomSheetVC 作为子视图self.addChildViewController(bottomSheetVC)self.view.addSubview(bottomSheetVC.view)bottomSheetVC.didMoveToParentViewController(self)//3- 调整bottomSheet 框架和初始位置.让高度 = view.frame.height让宽度 = view.frame.widthbottomSheetVC.view.frame = CGRectMake(0, self.view.frame.maxY, width, height)}

并在 viewDidAppear 方法中调用它:

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

配置BottomSheetViewController

1) 准备背景

创建一种添加模糊和鲜艳效果的方法

func prepareBackgroundView(){让 blurEffect = UIBlurEffect.init(style: .Dark)让visualEffect = UIVisualEffectView.init(效果:blurEffect)让 bluredView = UIVisualEffectView.init(effect: blurEffect)bluredView.contentView.addSubview(visualEffect)visualEffect.frame = UIScreen.mainScreen().boundsbluredView.frame = UIScreen.mainScreen().boundsview.insertSubview(bluredView, atIndex: 0)}

在你的 viewWillAppear 中调用这个方法

override func viewWillAppear(animated: Bool) {super.viewWillAppear(动画)准备背景视图()}

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

2) 动画bottomSheet外观

override func viewDidAppear(animated: Bool) {super.viewDidAppear(动画)UIView.animateWithDuration(0.3) { [weak self] in让框架 = self?.view.frame让 yComponent = UIScreen.mainScreen().bounds.height - 200self?.view.frame = CGRectMake(0, yComponent, frame!.width, frame!.height)}}

3) 根据需要修改您的 xib.

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

在您的 viewDidLoad 方法中添加 UIPanGestureRecognizer.

override func viewDidLoad() {super.viewDidLoad()让手势 = UIPanGestureRecognizer.init(target: self, action: #selector(BottomSheetViewController.panGesture))view.addGestureRecognizer(手势)}

并实现您的手势行为:

func panGesture(recognizer: UIPanGestureRecognizer) {让翻译 = 识别器.translationInView(self.view)让 y = self.view.frame.minYself.view.frame = CGRectMake(0, y + translation.y, view.frame.width, view.frame.height)识别器.setTranslation(CGPointZero, inView: self.view)}

可滚动的底部工作表:

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

首先:

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

第二:

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

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

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

• 该视图部分可见.
• 视图完全可见，scrollView contentOffset 属性为 0，并且用户正在向下拖动视图.

否则启用滚动.

 funcgestureRecognizer(_gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) ->布尔{让手势 = (gestureRecognizer as! UIPanGestureRecognizer)让方向 = 手势.速度(在:视图).y让 y = view.frame.minYif (y == fullView && tableView.contentOffset.y == 0 && 方向 > 0) ||(y == 部分视图) {tableView.isScrollEnabled = false} 别的 {tableView.isScrollEnabled = true}返回假}

注意

如果您将 .allowUserInteraction 设置为动画选项，例如在示例项目中，

- 全视图

- 可滚动视图

Can anyone tell me how I can mimic the bottom sheet in the new Apple Maps app in iOS 10?

In Android, you can use a BottomSheet which mimics this behaviour, but I could not find anything like that for iOS.

Is that a simple scroll view with a content inset, so that the search bar is at the bottom?

I am fairly new to iOS programming so if someone could help me creating this layout, that would be highly appreciated.

This is what I mean by "bottom sheet":

解决方案

I don't know how exactly the bottom sheet of the new Maps app, responds to user interactions. But you can create a custom view that looks like the one in the screenshots and add it to the main view.

I assume you know how to:

1- create view controllers either by storyboards or using xib files.

2- use googleMaps or Apple's MapKit.

Example

1- Create 2 view controllers e.g, MapViewController and BottomSheetViewController. The first controller will host the map and the second is the bottom sheet itself.

Configure MapViewController

Create a method to add the bottom sheet view.

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

And call it in viewDidAppear method:

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

Configure BottomSheetViewController

1) Prepare background

Create a method to add blur and vibrancy effects

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

call this method in your viewWillAppear

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

Make sure that your controller's view background color is clearColor.

2) Animate bottomSheet appearance

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) Modify your xib as you want.

4) Add Pan Gesture Recognizer to your view.

In your viewDidLoad method add UIPanGestureRecognizer.

override func viewDidLoad() {
    super.viewDidLoad()

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

}

And implement your gesture behaviour:

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

Scrollable Bottom Sheet:

If your custom view is a scroll view or any other view that inherits from, so you have two options:

First:

Design the view with a header view and add the panGesture to the header. (bad user experience).

Second:

1 - Add the panGesture to the bottom sheet view.

2 - Implement the UIGestureRecognizerDelegate and set the panGesture delegate to the controller.

3- Implement shouldRecognizeSimultaneouslyWith delegate function and disable the scrollView isScrollEnabled property in two case:

• The view is partially visible.
• The view is totally visible, the scrollView contentOffset property is 0 and the user is dragging the view downwards.

Otherwise enable scrolling.

  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
  }

NOTE

In case you set .allowUserInteraction as an animation option, like in the sample project, so you need to enable scrolling on the animation completion closure if the user is scrolling up.

Sample Project

I created a sample project with more options on this repo which may give you better insights about how to customise the flow.

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

Sample Project Screenshots

- Partial View

- FullView

- Scrollable View

这篇关于如何模仿地图应用程序的底部工作表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！