如何模仿iOS 10地图底部表单
任何人都可以告诉我怎样才能模仿在iOS 10的新地图应用程序的底部工作表？
在android中，你可以使用“BottomSheet”来模拟这种行为，但是我找不到像iOS那样的东西。
这是一个简单的滚动视图与内容embedded？ 所以search栏在底部？
我对iOS编程相当新，所以如果有人能帮我创build这个布局，将不胜感激。
这是我的意思是“底部表”：
我不知道新地图应用的底部表单如何响应用户交互。 但是您可以创build一个自定义视图，看起来像截图中的视图，并将其添加到主视图。
我假设你知道如何：
1-通过故事板或使用xib文件创build视图控制器。
2-使用谷歌地图或苹果的MapKit。
例
1-创build2个视图控制器，例如MapViewController和BottomSheetViewController 。 第一个控制器将主持地图，第二个控制器是底部表单本身。
configurationMapViewController
创build一个方法来添加底部工作表视图。
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() }
configurationBottomSheetViewController
1）准备背景
创build一个方法来添加模糊和活力效果
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）animationbottomSheet外观
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添加到您的视图。
在你的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) }
可滚动的底部图表：
如果您的自定义视图是滚动视图或任何其他inheritance的视图，那么您有两个select：
第一：
使用标题视图devise视图，并将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设置为animation选项（如示例项目中所示），则需要在用户向上滚动时启用animation完成闭合的滚动。
示例项目
我创build了一个样本项目，在这个回购中有更多的select，可以给你更好的见解如何定制stream程。
在演示中，addBottomSheetView（）函数控制哪个视图应该用作底部表单。
示例项目截图
– 部分视图
– FullView
– 可滚动视图
尝试滑轮 ：
滑轮是一个易于使用的抽屉库，旨在模仿iOS 10的地图应用程序中的抽屉。 它公开了一个简单的API，允许您使用任何UIViewController子类作为抽屉内容或主要内容。
