Side Menu Within MapView XCode

Question

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

Muhammad Nadeem · Accepted Answer · 2018-04-04T05:37:05.077

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.

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

Thanks Muhammad! Do you happen to have a sample code or direct me to a tutorial on this? — rengineer, Apr 03 '18 at 21:47
I have updated the answer also mentioned the link of tutorial @rengineer — Muhammad Nadeem, Apr 04 '18 at 05:43
Thanks Muhammad! I tried that but cannot seem to get it to work correctly. Do you think I can take a look at the project code that is in the above screen shots? My email is : rnh96821117@gmail.com. Thanks for your help. Sorry for the inconvenience. — rengineer, Apr 04 '18 at 06:50

Side Menu Within MapView XCode

1 Answers1