Chapter 22
Using Objective-C Libraries to Build Slide Out Sidebar Menus
In this chapter, I will show you how to create a slide-out navigation menu similar to the one you find in the Gmail app. If you're unfamiliar with slide-out navigation menus, take a look at the figure above. Ken Yarmost (http://kenyarmosh.com/ios-pattern-slide-out-navigation/) gave a good explanation and defined it as follows:
Slide-out navigation consists of a panel that slides out from underneath the left or the right of the main content area, revealing a vertically independent scroll view that serves as the primary navigation for the application.
The slide-out sidebar menu (also known as a hamburger menu) has been around for a few years now. It was first introduced by Facebook in 2011. Since then it has become a standard way to implement a navigation menu. The slide-out design pattern lets you build a navigation menu in your apps but without wasting the screen real estate. Normally, the navigation menu is hidden behind the front view. The menu can then be triggered by tapping a list button in the navigation bar. Once the menu is expanded and becomes visible, users can close it by using the list button or simply swiping left on the content area.
In recent years, there were some debates (https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/) about this kind of menu that it doesn't provide a good user experience and less efficient. In most cases, you should prefer tab bars over sidebar menus for navigation. Being that said, you can still easily find this design pattern in some popular content-related apps, including Google Maps, LinkedIn, etc. The purpose of this chapter is not to discuss with you whether you should kill the hamburger menu. There are already a lot of discussions out there:
- Kill The Hamburger Button (http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/)
- Why and How to Avoid Hamburger Menus by Luis Abreu (https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/)
- Hamburger vs Menu: The Final AB Test (http://exisweb.net/menu-eats-hamburger)
So our focus in this chapter is on how. I want to show you how to create a slide-out sidebar menu using a free library.
You can build the sidebar menu from the ground up. But with so many free pre-built solutions on GitHub, we're not going to build it from scratch. Instead, we'll make use of a library called SWRevealViewController (https://github.com/John-Lluch/SWRevealViewController). Developed by John Lluch, this excellent library provides a quick and easy way to put up a slide-out navigation menu in your apps. Best of all, the library is available for free.
The library was written in Objective-C. This is also one of the reasons I chose this library, though it is a bit dated. By going through the tutorial, you will also learn how to use Objective-C in a Swift project.
A Glance at the Demo App
As usual, we'll build a demo app to show you how to apply SWRevealViewController. This app is very simple but not fully functional. The primary purpose of this app is to walk you through the implementation of the slide-out navigation menu. The navigation menu will work like this:
- The user triggers the menu by tapping the list button at the top-left of the navigation bar.
- The user can also bring up the menu by swiping right on the main content area.
- Once the menu appears, the user can close it by tapping the list button again.
- The user can also close the menu by dragging left on the content area.
To continue reading and access the full version of the book, please get the full copy here. You will also be able to access the full source code of the project.