Hamburger Menu on iOS Done Right

Hamburger menus are always a hot debate even in 2017. They are often necessary but not the most effective in presenting overflowing menu items.

If you’re developing apps on both Android and iOS, you sometimes need to implement hamburger menus in iOS. Because hamburger menu is not a native iOS component/UX, it can be quite difficult to develop hamburger menu properly so that it doesn’t stick out like a sore thumb among other native iOS components in your app.

So let’s get started, shall we?

You first need two overlapping UIViews (viewMenu and viewBlack) that are on both in the root UIView.

1. viewMenu will contain all your menu item – so it can be UITableView or UICollectionView. Make reference of the left constraint (constraintMenuLeft) and the width constraint (constraintMenuWidth).
2. viewBlack’s purpose is to add the shadow effect while the viewMenu is visible as well as hold various gestures related to dismissing the viewMenu.

In addition to the two UIViews, you need three UIGestures:

1. UIScreenEdgePanGesture
2. UITapGesture
3. UIPanGesture

UIScreenEdgePanGesture is used to detect and move the viewMenu onto your screen based on users’ finger movement. This gesture needs to be made reference of so that we can disable it when viewMenu is opened and enable it when it is closed. Add this gesture to the root view.

*edit (09/21/2017): In Attribution Inspection of UIScreenEdgePanGesture, make sure “Left” edge is selected.

UITapGesture will detect single tap outside of the viewMenu then dismiss it. Outside of viewMenu basically will be viewBlack so add this gesture to the viewBlack.

UIPanGesture will detect panning outside of viewMenu and close the viewMenu if the user is attempting to close the viewMenu. Add this gesture to the viewBlack as well.

Don’t forget to connect each gestures selectors to your source file!

Your Storyboard should look something like this:

Let’s start coding!

You’ll need to setup initial values in viewDidLoad

• Hide the viewMenu initially by offsetting its constraintMenuLeft by it’s entire constraintMenuWidth:

constraintMenuLeft.constant = -constraintMenuWidth.constant

• Also, hide the viewBlack using both the alpha and isHidden properties:

viewBlack.alpha = 0
viewBlack.isHidden = true

Next, let’s set up two convenience functions for opening and closing viewMenu: openMenu and closeMenu.

The step by step logic instructions are in code comments!

Now let’s build the behavior when user drags the viewMenu from the left edge of the screen.

When opening menu, you want to create a “dimming” effect on the page behind the viewMenu based on the amount it’s been dragged. To achieve this, you’ll need to monitor three things:

1. Whether the dragging has begun — the status of the gesture from the left edge of the screen.
2. The x value of the viewMenu (amount dragged), which is basically constraintMenuLeft.
3. Whether the dragging has ended at which point, you will determine to dismiss or fully open the viewMenu.

They can all be detected and monitored by UIScreenEdgePanGesture:

Dragged the other way once viewMenu is already opened?

Once the viewMenu is opened, you can allow user to tuck it away using gesture. UIPanGestureRecognizer connected to viewBlack will allow you to achieve this. The logic is very similar to when viewMenu is being dragged out from the left edge of the screen — the parameters are simply backwards.

Lastly, dismiss viewMenu when user taps outside of viewMenu — a.k.a. viewBlack

You also want user to be able to dismiss viewMenu when they tap outside of the viewMenu. If you have connected UITapGesture to viewBlack, you can call the convenience function for closing viewMenu and everything should work smoothly.

That’s all there is to it. Here’s the full source code just as an added bonus for this week.