微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

我假设你知道如何:

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

2- 使用 googleMaps 或 Apple 的 MapKit。

例子

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

配置 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 - 实现 并将 panGesture 委托设置为控制器。

3- 实现 委托功能并在两种情况下 scrollView 属性

  • 该视图是部分可见的。
  • 视图完全可见,scrollView 属性为 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
  }

如果您将 设置为动画选项,就像在示例项目中一样,因此如果用户向上滚动,您需要在动画完成关闭上启用滚动。

示例项目

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

在演示中,addBottomSheetView() 函数控制应将哪个视图用作底页。

示例项目截图

- 局部视图

在此处输入图像描述

- 全视图

在此处输入图像描述

- 可滚动视图

在此处输入图像描述

解决方法

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

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

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

我对 iOS 编程相当陌生,所以如果有人可以帮助我创建这个布局,那将不胜感激。

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

地图中折叠的底部工作表的屏幕截图
地图中展开的底部工作表的屏幕截图

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。