Search code examples
swiftmapkituipangesturerecognizerside-menu

Side-menu is not working properly on mapView in swift


I'm building an application in swift which gets user's location and save it to access later. I have a problem about UI. I made a left-side menu on mapView. When I want to slide to open it, map is sliding but side-menu doesn't opening. Besides, I have a BarButtonItem on top bar and if I slide from there side-menu is opening. I mean, I think the problem is about sliding operation with map and any other thing are not working properly.

I slide it from bar button item in this picture.

enter image description here

enter image description here

override func viewDidLoad() {
    super.viewDidLoad()

    centerViewController = UIStoryboard.userMapViewController()
    centerViewController.delegate = self

    // wrap the centerViewController in a navigation controller, so we can push views to it
    // and display bar button items in the navigation bar
    centerNavigationController = UINavigationController(rootViewController: centerViewController)
    view.addSubview(centerNavigationController.view)
    addChild(centerNavigationController)

    centerNavigationController.didMove(toParent: self)

    let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
    centerNavigationController.view.addGestureRecognizer(panGestureRecognizer)
}

func toggleLeftPanel() {
    let notAlreadyExpanded = (currentState != .leftPanelExpanded)

    if notAlreadyExpanded {
        addLeftPanelViewController()
    }

    animateLeftPanel(shouldExpand: notAlreadyExpanded)
}

func addLeftPanelViewController() {
    guard leftViewController == nil else { return }

    if let vc = UIStoryboard.leftViewController() {
        addChildSidePanelController(vc)
        leftViewController = vc
    }
}

func animateLeftPanel(shouldExpand: Bool) {
    if shouldExpand {
        currentState = .leftPanelExpanded
        animateCenterPanelXPosition(
            targetPosition: centerNavigationController.view.frame.width - centerPanelExpandedOffset)
    } else {
        animateCenterPanelXPosition(targetPosition: 0) { _ in
            self.currentState = .leftPanelCollapsed
            self.leftViewController?.view.removeFromSuperview()
            self.leftViewController = nil
        }
    }
}

extension ContainerViewController: UIGestureRecognizerDelegate {
@objc func handlePanGesture(_ recognizer: UIPanGestureRecognizer) {
    let gestureIsDraggingFromLeftToRight = (recognizer.velocity(in: view).x > 0)

    switch recognizer.state {
    case .began:
        if currentState == .leftPanelCollapsed {
            if gestureIsDraggingFromLeftToRight {
                addLeftPanelViewController()
            }
            showShadowForCenterViewController(true)
        }

    case .changed:
        if let rview = recognizer.view {
            rview.center.x = rview.center.x + recognizer.translation(in: view).x
            recognizer.setTranslation(CGPoint.zero, in: view)
        }

    case .ended:
        if let _ = leftViewController,
            let rview = recognizer.view {
            // animate the side panel open or closed based on whether the view
            // has moved more or less than halfway
            let hasMovedGreaterThanHalfway = rview.center.x > view.bounds.size.width
            animateLeftPanel(shouldExpand: hasMovedGreaterThanHalfway)
        }
    default:
        break
    }
}

Solution

  • This is a common issue - the map view will 'consume' all touch events, meaning your gesture recognizer will never be triggered.

    The solution is to use a UIScreenEdgePanGestureRecognizer, the full solution is detailed below:

    https://stackoverflow.com/a/24887059