Search code examples
iosxcodemkmapviewswrevealviewcontrollerside-menu

Side Menu Within MapView XCode


How do I add a functioning side menu that is within a map like Uber when you open it? I want to be able to click the "side menu" which displays the options. The main thing I am having trouble i being able to "drag" the menu to collapse it, like the homepage of an Uber app. I used the "SWRevealViewController" to create the the side menu.

The following was what I tried:

    override func viewDidLoad() {
        super.viewDidLoad()

        self.MapView.showsUserLocation = true

        self.revealViewController().tapGestureRecognizer()

menuButton.target = revealViewController()
            menuButton.action = 

#selector(SWRevealViewController.revealToggle(_:))
                view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())


       self.MapView.isZoomEnabled = false;
            self.MapView.isScrollEnabled = false;
            self.MapView.isUserInteractionEnabled = false
    }

The side menu comes out when the menuButton is pressed, but I cannot seem to be able to "drag" it to collapse it.Im thinking that the map's function(such as zoom, moving, etc) needs to be disabled somehow so it doesn't interfere with the "dragging" of the side menu


Solution

  • For this you can use SlideMenuControllerSwift instead of SWRevealViewController

    It will be working fine in any case your case is very simple pan gesture is using for map already so when your trying to use for menu its not working.

    For Implementation of SlideMenuControllerSwift you need to do like following,

    Add pod in your pod file,

    pod 'SlideMenuControllerSwift'
    

    After successfull install add two View controllers YourMapVC and LeftMenuVC and in your AppDelegate file add the following method,

    func createMenu() {
    
            let storyboard = UIStoryboard(name: "Main", bundle: nil)
            let yourMapVC = storyboard.instantiateViewController(withIdentifier: "YourMapVC") as! YourMapVC
            let leftMenuVC = storyboard.instantiateViewController(withIdentifier: "LeftMenuVC") as! LeftMenuVC
    
            let nvc = UINavigationController(rootViewController: yourMapVC)
    
            let slideMenuController = SlideMenuController(mainViewController: nvc, leftMenuViewController: leftMenuVC, rightMenuViewController: UIViewController())
            slideMenuController.automaticallyAdjustsScrollViewInsets = true
            self.window?.backgroundColor = UIColor(red: 236.0, green: 238.0, blue: 241.0, alpha: 1.0)
            self.window?.rootViewController = slideMenuController
            self.window?.makeKeyAndVisible()
        }
    

    After that call above method in your didFinishLaunchingWithOptions method of AppDelegate like below,

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
            // Override point for customization after application launch.
    
            self.createMenu()
            return true
        }
    

    For Adding the Menu Button In UINavigationBar place following extension anywhere in your project.

    extension UIViewController {
    
        func setupNagivationBar() {
    
            self.removeNavigationBarItem()
            self.setNavigationBarItem()
    
        }
    
        func setNavigationBarItem() {
    
            self.slideMenuController()?.removeLeftGestures()
            self.slideMenuController()?.removeRightGestures()
    
    
            self.addLeftBarButtonWithImage(UIImage(named: "icon_menu")!)
            self.slideMenuController()?.addLeftGestures()
            self.slideMenuController()?.removeRightGestures()
            self.slideMenuController()?.closeRight()
    
            self.navigationController?.navigationBar.barTintColor = UIColor.gray
        }
    
    
    
        func removeNavigationBarItem() {
            self.navigationItem.leftBarButtonItem = nil
            self.navigationItem.rightBarButtonItem = nil
            self.slideMenuController()?.removeLeftGestures()
            self.slideMenuController()?.removeRightGestures()
        }
    
    
    }
    

    and call the setupNagivationBar() method inside your YourMapVC viewDidLoad method.

    class YourMapVC: UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            self.setupNagivationBar()
    
        }
    
    }
    

    Also you need to put the icon_menu image in your project.

    Below is the Result you can see in screenshots.

    YourMapVC

    LeftMenuVC

    Following is the Tutorial Link, https://github.com/dekatotoro/SlideMenuControllerSwift