如何解决如何模仿地图应用程序的底部工作表?
我不知道新地图应用程序的底页究竟如何响应用户交互。但是您可以创建一个类似于屏幕截图中的自定义视图并将其添加到主视图中。
我假设你知道如何:
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)
}
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)
}
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 添加到标题中。 。
2 - 实现 并将 panGesture 委托设置为控制器。
3- 实现 委托功能并在两种情况下 scrollView 属性:
否则启用滚动。
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() 函数控制应将哪个视图用作底页。
示例项目截图
- 局部视图
- 全视图
- 可滚动视图
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。