By qwertz


2016-06-22 12:06:55 8 Comments

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":

screenshot of the collapsed bottom sheet in Maps

screenshot of the expanded bottom sheet in Maps

6 comments

@GaétanZ 2018-08-09 13:21:28

Update 4 december 2018

I released a library based on this solution https://github.com/applidium/ADOverlayContainer.

It mimics the Shortcuts app's overlay. See this article for details.

The main component of the library is the OverlayContainerViewController. It defines an area where a view controller can be dragged up and down, hiding or revealing the content underneath it.

let contentController = MapsViewController()
let overlayController = SearchViewController()

let containerController = OverlayContainerViewController()
containerController.delegate = self
containerController.viewControllers = [
    contentController,
    overlayController
]

window?.rootViewController = containerController

Implement OverlayContainerViewControllerDelegate to specify the number of notches wished:

enum OverlayNotch: Int, CaseIterable {
    case minimum, medium, maximum
}

func numberOfNotches(in containerViewController: OverlayContainerViewController) -> Int {
    return OverlayNotch.allCases.count
}

func overlayContainerViewController(_ containerViewController: OverlayContainerViewController,
                                    heightForNotchAt index: Int,
                                    availableSpace: CGFloat) -> CGFloat {
    switch OverlayNotch.allCases[index] {
        case .maximum:
            return availableSpace * 3 / 4
        case .medium:
            return availableSpace / 2
        case .minimum:
            return availableSpace * 1 / 4
    }
}

Previous answer

I think there is a significant point that is not treated in the suggested solutions : the transition between the scroll and the translation.

Maps transition between the scroll and the translation

In Maps, as you may have noticed, when the tableView reaches contentOffset.y == 0, the bottom sheet either slides up or goes down.

The point is tricky because we can not simply enable/disable the scroll when our pan gesture begins the translation. It would stop the scroll until a new touch begins. This is the case in most of the proposed solutions here.

Here is my try to implement this motion.

Starting point : Maps App

To start our investigation, let's visualize the view hierarchy of Maps (start Maps on a simulator and select Debug > Attach to process by PID or Name > Maps in Xcode 9).

Maps debug view hierarchy

It doesn't tell how the motion works, but it helped me to understand the logic of it. You can play with the lldb and the view hierarchy debugger.

Our ViewController stacks

Let's create a basic version of the Maps ViewController architecture.

We start with a BackgroundViewController (our map view) :

class BackgroundViewController: UIViewController {
    override func loadView() {
        view = MKMapView()
    }
}

We put the tableView in a dedicated UIViewController :

class OverlayViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    lazy var tableView = UITableView()

    override func loadView() {
        view = tableView
        tableView.dataSource = self
        tableView.delegate = self
    }

    [...]
}

Now, we need a VC to embed the overlay and manage its translation. To simplify the problem, we consider that it can translate the overlay from one static point OverlayPosition.maximum to another OverlayPosition.minimum.

For now it only has one public method to animate the position change and it has a transparent view :

enum OverlayPosition {
    case maximum, minimum
}

class OverlayContainerViewController: UIViewController {

    let overlayViewController: OverlayViewController
    var translatedViewHeightContraint = ...

    override func loadView() {
        view = UIView()
    }

    func moveOverlay(to position: OverlayPosition) {
        [...]
    }
}

Finally we need a ViewController to embed the all :

class StackViewController: UIViewController {

    private var viewControllers: [UIViewController]

    override func viewDidLoad() {
        super.viewDidLoad()
        viewControllers.forEach { gz_addChild($0, in: view) }
    }
}

In our AppDelegate, our startup sequence looks like :

let overlay = OverlayViewController()
let containerViewController = OverlayContainerViewController(overlayViewController: overlay)
let backgroundViewController = BackgroundViewController()
window?.rootViewController = StackViewController(viewControllers: [backgroundViewController, containerViewController])

The difficulty behind the overlay translation

Now, how to translate our overlay ?

Most of the proposed solutions use a dedicated pan gesture recognizer, but we actually already have one : the pan gesture of the table view. Moreover, we need to keep the scroll and the translation synchronised and the UIScrollViewDelegate has all the events we need !

A naive implementation would use a second pan Gesture and try to reset the contentOffset of the table view when the translation occurs :

func panGestureAction(_ recognizer: UIPanGestureRecognizer) {
    if isTranslating {
        tableView.contentOffset = .zero
    }
}

But it does not work. The tableView updates its contentOffset when its own pan gesture recognizer action triggers or when its displayLink callback is called. There is no chance that our recognizer triggers right after those to successfully override the contentOffset. Our only chance is either to take part of the layout phase (by overriding layoutSubviews of the scroll view calls at each frame of the scroll view) or to respond to the didScroll method of the delegate called each time the contentOffset is modified. Let's try this one.

The translation Implementation

We add a delegate to our OverlayVC to dispatch the scrollview's events to our translation handler, the OverlayContainerViewController :

protocol OverlayViewControllerDelegate: class {
    func scrollViewDidScroll(_ scrollView: UIScrollView)
    func scrollViewDidStopScrolling(_ scrollView: UIScrollView)
}

class OverlayViewController: UIViewController {

    [...]

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        delegate?.scrollViewDidScroll(scrollView)
    }

    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        delegate?.scrollViewDidStopScrolling(scrollView)
    }
}

In our container, we keep track of the translation using a enum :

enum OverlayInFlightPosition {
    case minimum
    case maximum
    case progressing
}

The current position calculation looks like :

private var overlayInFlightPosition: OverlayInFlightPosition {
    let height = translatedViewHeightContraint.constant
    if height == maximumHeight {
        return .maximum
    } else if height == minimumHeight {
        return .minimum
    } else {
        return .progressing
    }
}

We need 3 methods to handle the translation :

The first one tells us if we need to start the translation.

private func shouldTranslateView(following scrollView: UIScrollView) -> Bool {
    guard scrollView.isTracking else { return false }
    let offset = scrollView.contentOffset.y
    switch overlayInFlightPosition {
    case .maximum:
        return offset < 0
    case .minimum:
        return offset > 0
    case .progressing:
        return true
    }
}

The second one performs the translation. It uses the translation(in:) method of the scrollView's pan gesture.

private func translateView(following scrollView: UIScrollView) {
    scrollView.contentOffset = .zero
    let translation = translatedViewTargetHeight - scrollView.panGestureRecognizer.translation(in: view).y
    translatedViewHeightContraint.constant = max(
        Constant.minimumHeight,
        min(translation, Constant.maximumHeight)
    )
}

The third one animates the end of the translation when the user releases its finger. We calculate the position using the velocity & the current position of the view.

private func animateTranslationEnd() {
    let position: OverlayPosition =  // ... calculation based on the current overlay position & velocity
    moveOverlay(to: position)
}

Our overlay's delegate implementation simply looks like :

class OverlayContainerViewController: UIViewController {

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        guard shouldTranslateView(following: scrollView) else { return }
        translateView(following: scrollView)
    }

    func scrollViewDidStopScrolling(_ scrollView: UIScrollView) {
        // prevent scroll animation when the translation animation ends
        scrollView.isEnabled = false
        scrollView.isEnabled = true
        animateTranslationEnd()
    }
}

Final problem : dispatch the overlay container's touches

The translation is now pretty efficient. But there is still a final problem : the touches are not delivered to our background view. They are all intercepted by the overlay container's view. We can not set isUserInteractionEnabled to false because it would also disable the interaction in our table view. The solution is the one used massively in the Maps app, PassThroughView :

class PassThroughView: UIView {
    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        let view = super.hitTest(point, with: event)
        if view == self {
            return nil
        }
        return view
    }
}

It removes itself from the responder chain.

In OverlayContainerViewController :

override func loadView() {
    view = PassThroughView()
}

Result

Here is the result :

Result

You can find the code here.

Please if you see any bugs, let me know ! Note that your implementation can of course use a second pan gesture, specially if you add a header in your overlay.

Update 23/08/18

We can replace scrollViewDidEndDragging with willEndScrollingWithVelocity rather than enable/disable the scroll when the user ends dragging :

func scrollView(_ scrollView: UIScrollView,
                willEndScrollingWithVelocity velocity: CGPoint,
                targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    switch overlayInFlightPosition {
    case .maximum:
        break
    case .minimum, .progressing:
        targetContentOffset.pointee = .zero
    }
    animateTranslationEnd(following: scrollView)
}

We can use a spring animation and allow user interaction while animating to make the motion flow better :

func moveOverlay(to position: OverlayPosition,
                 duration: TimeInterval,
                 velocity: CGPoint) {
    overlayPosition = position
    translatedViewHeightContraint.constant = translatedViewTargetHeight
    UIView.animate(
        withDuration: duration,
        delay: 0,
        usingSpringWithDamping: velocity.y == 0 ? 1 : 0.6,
        initialSpringVelocity: abs(velocity.y),
        options: [.allowUserInteraction],
        animations: {
            self.view.layoutIfNeeded()
    }, completion: nil)
}

@aust 2018-09-24 16:39:40

This approach is not interactive during the animation stages. For example, in Maps, I can catch the sheet with my finger as it's expanding. I can then scrub the animation by panning up or down. It will return to whichever spot is closest. I believe this can be solved using UIViewPropertyAnimator (which has the ability to pause), then use the fractionComplete property to perform the scrub.

@GaétanZ 2018-09-24 17:08:16

You're right @aust. I forgot to push my previous change. It should be good now. Thanks.

@Jakub Truhlář 2018-09-25 13:13:04

This is a great idea, however I can see one problem right away. In the translateView(following:) method you calculate the height based on the translation, but that could start from a different value than 0.0 (e.g. The table view is scrolled a little bit and the overlay is maximized when you start dragging). That would result in the initial jump. You could solve this by the scrollViewWillBeginDragging callback where you would remember the initial contentOffset of the table view and use it in the translateView(following:)'s calculation.

@aust 2018-09-25 17:31:32

If the scroll view offset is other than 0.0 while maximized, the overlay won't start moving until the offset gets to 0.0, otherwise you wouldn't be able to determine if the user intends to scroll the scroll view or interact with the overlay.

@Mihail Salari 2018-11-16 07:21:40

This should be the first answer.

@matm 2018-12-10 14:22:22

@GaétanZ I was interested in attaching debugger to Maps.app on Simulator too, but get an error "Could not attach to pid : “9276”" followed with "Ensure “Maps” is not already running, and <username> has permission to debug it." - How did you trick Xcode to allow attaching to Maps.app?

@GaétanZ 2018-12-10 14:35:33

@matm unfortunately it looks like the trick does not work anymore with Xcode 10

@valdyr 2019-11-06 14:06:37

@matm @GaétanZ worked for me on Xcode 10.1/Mojave -> just need to disable to disable System Integrity Protection (SIP). You need to: 1) Restart your mac; 2) Hold down cmd+R; 3) From the menu select Utilities then Terminal; 4) In the Terminal window type: csrutil disable && reboot. You will then have all the powers that root should normally give you including being able to attach to an Apple process.

@Ahmad Elassuty 2016-07-01 19:10:34

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

enter image description here

- FullView

enter image description here

- Scrollable View

enter image description here

@tymac 2016-07-04 21:00:24

This is actually a good tutorial for childViews and subViews. Thank you :)

@nikhil nangia 2016-08-25 11:20:27

@AhmedElassuty how can i add tableview in xib and load as bottom sheet ?if you could help would be great Thanks in advance!

@Ahmad Elassuty 2016-10-16 00:14:34

@nikhilnangia I just updated the repo with another viewController "ScrollableBottomSheetViewController.swift" that contains a tableView. I will update the answer as soon as possible. Check this too github.com/AhmedElassuty/IOS-BottomSheet/issues/1

@Amjad Husseini 2017-02-15 09:43:40

for ScrollableBottomSheet careful to use UITableViewController you will end up with none scrollable table view, you have to change it to UIViewController and have UITableView in it.

@Wesley Skeen 2017-03-18 16:30:20

@AhmedElassuty this is amazing. Learned a lot by looking at your repo. Thanks again

@Tarvo Mäesepp 2017-03-19 11:02:32

Hey! Awesome explanation but can you tell me, why the "sheet" loses its pan gesture if you add it as subview on the mapview?

@Hos Ap 2017-04-15 07:49:00

any chance to put it below navigation bar and drag it down?

@Stoph 2017-06-28 19:18:25

I noticed that the Apple Maps bottom sheet handles transitioning from the sheet drag gesture to the scroll view scroll gesture in one smooth motion, i.e. the user doesn't need to stop one gesture and start a new one in order to start scrolling the view. Your example does not do this. Do you have any thoughts on how that might be accomplished? Thanks, and thanks a ton for posting the example in a repo!

@Ahmad Elassuty 2017-06-30 15:35:33

@Stoph Thank you for your feedback. Please run the new demo of the develop branch, I think the demo is more responsive now. All what I did is that i changed my implementation of the gesture delegate methods to this.

@mehdok 2017-10-04 07:12:46

@AhmadElassuty this is wonderful, but i'm troubling implement it for top sheet, any idea would be appreciated.

@Heisenberg 2018-04-11 11:46:24

Anyone knows how to use it in react native?

@Ahmad Elassuty 2018-05-10 09:37:39

@RafaelaLourenço I’m really happy that you found my answer helpful! Thank you!

@Sagar Snehi 2018-07-24 13:45:25

@AhmadElassuty can you update same thing in objective-c? please help me I want in objective -c

@Liam Bolling 2018-09-08 20:28:11

This is extremely helpful. Also helps out understanding the pan gesture. Make a Medium article out of it 😊

@Christopher Smit 2019-05-24 06:59:07

Any reason why a tableview parent's separator lines are displaying over the bottom sheet? Everything else on a cell is hidden by the sheet except for the separators... :(

@unixb0y 2019-06-04 23:18:24

I used this as a template and rewrote it completely in Swift 5 without storyboards / IB but using AutoLayout. If anyone is interested I could copy & paste together a little "sample App" like in this solution :)

@StephenT 2019-08-21 20:44:18

Thanks for this :) I found I needed to change the equality test of tableView.contentOffset.y == 0.0 to tableView.contentOffset.y == -tableView.adjustedContentInset.top (You would not need this change, I think, if tableView.contentInsetAdjustmentBehavior were set to .never).

@Jay 2019-08-30 23:41:43

@unixb0y can you please post your sample project? I"m trying to do that, because the problem with this solution is that the background viewcontroller is not clickable.... anyone know how to solve that problem?

@Noah Omdal 2019-11-15 15:06:05

Why does the color not appear as expected? It's all darkened, no matter what color I make the bottom view?

@SCENEE 2018-10-17 03:55:02

You can try my answer https://github.com/SCENEE/FloatingPanel. It provides a container view controller to display a "bottom sheet" interface.

It's easy to use and you don't mind any gesture recognizer handling! Also you can track a scroll view's(or the sibling view) in a bottom sheet if needed.

This is a simple example. Please note that you need to prepare a view controller to display your content in a bottom sheet.

import UIKit
import FloatingPanel

class ViewController: UIViewController {
    var fpc: FloatingPanelController!

    override func viewDidLoad() {
        super.viewDidLoad()

        fpc = FloatingPanelController()

        // Add "bottom sheet" in self.view.
        fpc.add(toParent: self)

        // Add a view controller to display your contents in "bottom sheet".
        let contentVC = ContentViewController()
        fpc.set(contentViewController: contentVC)

        // Track a scroll view in "bottom sheet" content if needed.
        fpc.track(scrollView: contentVC.tableView)    
    }
    ...
}

Here is another example code to display a bottom sheet to search a location like Apple Maps.

Sample App like Apple Maps

@Faris Muhammed 2019-01-11 18:24:21

fpc.set(contentViewController: newsVC) , method missing in the library

@SCENEE 2019-01-12 09:52:45

Thanks, @FarisMuhammed! I've updated the post.

@ugur 2018-08-19 07:34:03

None of the above works for me because the panning both the tableview and the outer view simultaneously is not work smooth. So i wrote my own code to achieve the intended behaviour in ios Maps app.

https://github.com/OfTheWolf/UBottomSheet

ubottom sheet

@Jay 2019-08-31 00:16:01

THIS should be the selected answer, since you can still click on the VC behind the popup.

@day 2017-12-14 07:32:02

Maybe you can try my answer https://github.com/AnYuan/AYPannel, inspired by Pulley. Smooth transition from moving the drawer to scrolling the list. I added a pan gesture on the container scroll view, and set shouldRecognizeSimultaneouslyWithGestureRecognizer to return YES. More detail in my github link above. Wish to help.

@pirho 2017-12-14 07:50:35

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.

@Rajee Jones 2017-07-11 17:37:05

Try Pulley:

Pulley is an easy to use drawer library meant to imitate the drawer in iOS 10's Maps app. It exposes a simple API that allows you to use any UIViewController subclass as the drawer content or the primary content.

Pulley Preview

https://github.com/52inc/Pulley

@Richard Lindhout 2017-07-24 20:41:47

Does it support scrolling in the underlying list?

@Stoph 2017-08-29 21:38:31

@RichardLindhout - After running the demo it looks like it supports scrolling, but not the smooth transition from moving the drawer to scrolling the list.

@Gerd Castan 2018-09-08 21:48:30

The example appears to hide Apples legal link in the bottom left.

Related Questions

Sponsored Content

93 Answered Questions

17 Answered Questions

[SOLVED] How do I call Objective-C code from Swift?

  • 2014-06-02 20:05:42
  • David Mulder
  • 275423 View
  • 941 Score
  • 17 Answer
  • Tags:   objective-c swift

30 Answered Questions

[SOLVED] UIScrollView Scrollable Content Size Ambiguity

40 Answered Questions

[SOLVED] How can I develop for iPhone using a Windows development machine?

  • 2008-08-22 13:35:01
  • ryan
  • 1102184 View
  • 1164 Score
  • 40 Answer
  • Tags:   ios iphone windows

35 Answered Questions

[SOLVED] How to change the name of an iOS app?

  • 2008-10-27 03:07:03
  • Robert Gould
  • 455533 View
  • 965 Score
  • 35 Answer
  • Tags:   ios xcode

38 Answered Questions

[SOLVED] How can I disable the UITableView selection?

2 Answered Questions

[SOLVED] How to reproduce iOS 11 maps bottom sheet with React Native

0 Answered Questions

iOS Multiple Bottom-Sheets

0 Answered Questions

Swift multiple bottom sheets

1 Answered Questions

[SOLVED] Can you set the scroll view insets for container controllers?

Sponsored Content