如何从地图应用程序模仿底部工作表？ [英] How can I mimic the bottom sheet from the Maps app?
问题描述
有谁可以告诉我如何在iOS 10中的新地图应用中模仿底页？
在Android中，您可以使用 BottomSheet 来模仿这种行为，但我找不到类似的内容iOS版。
这是一个带有内容插入的简单滚动视图，以便搜索栏位于底部吗？
我对iOS编程很新，所以如果有人可以帮我创建这个版面，那将非常感激。
这就是我所说的底页：
中展开式底部工作表的屏幕截图
我不知道新地图应用程序的底页是如何响应用户交互的。但是您可以创建一个类似于截图中的自定义视图并将其添加到主视图中。
我假设您知道如何：
1-通过故事板或使用xib文件创建视图控制器。
2-使用googleMaps或Apple的MapKit。
示例
1-创建2个视图控制器，例如 MapViewController 和 BottomSheetViewController 。第一个控制器将托管地图，第二个是底部工作表。
配置MapViewController
创建一个添加底部工作表视图的方法。
func addBottomSheetView（）{
// 1- Init bottomSheetVC
let bottomSheetVC = BottomSheetViewController（）
// 2-将bottomSheetVC添加为子视图
self.addChildViewController（bottomSheetVC）
self.view.addSubview（bottomSheetVC.view）
bottomSheetVC.didMoveToParentViewController（self）
// 3-调整bottomSheet框架和初始位置。
let height = view.frame.height
let width = view.frame.width
bottomSheetVC.view.frame = CGRectMake（0，self.view.frame.maxY，width，height）
}
并在viewDidAppear方法中调用它：
覆盖func viewDidAppear（动画：Bool）{
super.viewDidAppear（动画）
addBottomSheetView（）
}
配置BottomSheetViewController
1）准备背景
创建一种添加模糊和活力效果的方法
func prepareBackgroundView（）{
让blurEffect = UIBlurEffect.init（style：.Dark）
让visualEffect = UIVisualEffectView.init（效果：blurEffect）
让bluredView = UIVisualEffectView.init（效果：blurEffect）
bluredView .contentView.addSubview（visualEffect）
visualEffect.frame = UIScreen.mainScreen（）。bounds
bluredView.frame = UIScreen.mainScreen （）.bounds
view.insertSubview（bluredView，atIndex：0）
}
在viewWillAppear中调用此方法
覆盖func viewWillAppear（动画：Bool）{
super .viewWillAppear（动画）
prepareBackgroundView（）
}
确保你的controller的视图背景颜色是clearColor。
2）动画bottomSheet外观
override func viewDidAppear（animated：Bool）{
super.viewDidAppear（animated）
UIView.animateWithDuration（0.3）{$ weak self in
let frame = self？。 view.frame
让yComponent = UIScreen.mainScreen（）。bounds.height - 200
self？.view.frame = CGRectMake（0，yComponent，frame！.width，frame！.height）
}
}
3）根据需要修改你的xib。
4）将Pan Gesture识别器添加到您的视图中。
在viewDidLoad方法中添加UIPanGestureRecognizer。
覆盖func viewDidLoad（）{
super.viewDidLoad（ ）
let gesture = UIPanGestureRecognizer.init（target：self，action：#selector（BottomSheetViewController.panGesture））
view.addGestureRecognizer（gesture）
}
并实施您的手势行为：
func panGesture（识别器：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 - 实现 UIGestureRecognizerDelegate 并将panGesture委托设置为控制器。 / p>
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 设置为动画选项，就像在示例项目中一样，
- FullView
- 可滚动视图
Can anyone tell me how I can mimic the bottom sheet in the new 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屋！
