How To Add a Slide-out Sidebar Menu in Your Apps
Editor’s note #1: This post has been updated for Xcode 6 and iOS 8. The demo app now supports the latest version of SWRevealViewController.
How can I create a slide-out sidebar menu in my app? This is one of the most frequently asked questions we got from our readers. So this week we’ll show you how create a slide-out navigation menu similar to the one you find in the Facebook app.
For those who are unfamiliar with slide out navigation menu, Ken Yarmost 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.
Since Facebook app introduced this slide-out sidebar design. it quickly becomes a standard way to implement navigation menu. You can easily find this design pattern in most of the popular content-related apps such as Path, Mailbox, Gmail, etc.
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.
With so many free pre-built solution on GitHub, we’re not going to build the slide-out navigation menu from scratch. Instead, we’ll make use of a library called SWRevealViewController. Developed by John Lluch, this excellent library provides a quick and easy way to put up a slide-out navigation menu and it’s available for free.
Read on and develop a demo app together.
A Glance at the Demo App
As usual, we’ll build a demo app to show you how to apply the SWRevealViewController. The app is very simple but not fully functional. The primary purpose of the app is to walk you through the implementation of slide-out navigation menu. The navigation menu will work like this:
- User triggers the menu by tapping the list button at the top-left of navigation bar.
- User can also bring up the menu by swiping right on the main content area.
- Once the menu appears, user can close it by tapping the list button again.
- User can also close the menu by dragging left on the content area.
Creating the Xcode Project
With a basic idea about what we’ll build, let’s move on. You can create the Xcode project from scratch and design the user interface similar to below:
However, to save your time from setting up the project, you can download the Xcode project template to start with.
The project already comes with:
- A pre-built storyboard with all the view controllers needed
- A pre-built view controller classes including MapViewController and PhotoViewController
- The MapViewController is implemented to display a map
- The PhotoViewController is implemented to display a photo in an image view
- All icons and images needed for the app (credit: thanks for the free icon from Pixeden )
Importing the SWRevealViewController Library
As mentioned, we’ll use the free SWRevealViewController library to implement the slide-out menu. So, first download the library from GitHub and extract the zipped file.
After you extract the file, you should find “SWRevealViewController.h” and “SWRevealViewController.m”. In the project navigator, right-click SidebarDemo folder and select “New Group”. Name the group “SWRevealViewController”. Import both files into the Xcode project and put them under “SWRevealViewController”.
Associate the Front View and Rear View Controller
One of the beauties of the SWRevealViewController library is that it provides the built-in support of Storyboard. When implementing sidebar menu using SWRevealViewController, developers have to associate the SWRevealViewController with a front and a rear view controller using segues. The front view controller is the main controller for displaying content. In our storyboard, it’s the navigation controller which associates with another view controller for presenting news content. Apparently, the rear view controller is the controller for showing the navigation menu. Typically the menu is implemented by using UITableViewController.
In the Xcode project template, we’ve pre-built the front and rear view controllers for you. What you have to do is to define segues between the SWRevealViewController and front/rear view controller.
First, select the initial view controller and change its class to “SWRevealViewController”.
Next, press and hold the control key. Click the SWRevealViewController and drag it to the Menu view controller. After releasing the button, you’ll see a context menu for segue selection. In this case, select “reveal view controller set segue”. This defines a custom segue “SWRevealViewControllerSetSegue”. This custom segue tells SWRevealViewController that the view controller connected is the initial view controller.
Note: If you’re using an older version of SWRevealViewController, please note that the SWRevealViewControllerSegue is now deprecated. You should use SWRevealViewControllerSetSegue instead.
Repeat the same procedures to connect SWRevealViewController with the navigation controller of the main view controller (containing News Frontpage).
Select the segue between SWRevealViewController and the navigation controller. In the attributes inspector, set the segue identifier to “sw_front”. This is the default identifier that indicates a transition of front view controller.
For the segue between SWRevealViewController and the sidebar view controller, set the segue identifier to “sw_rear”. This identifier tells SWRevealViewController that the controller represents the rear view (i.e. the sidebar menu).
If you compile and run the app, you’ll see an app displaying the “News Frontpage”. But that’s it. You won’t see the sidebar menu when tapping the list button. We haven’t implemented the action method yet.
Open “MainViewController.m”, which is the controller class of “News Frontpage”. Add the following import statement:Source: www.appcoda.com