desk with left drawer


Update (3/25/2016): Check out this updated blog post which uses a better approach to creating slideout menus.



Organizing Your Desk

When setting up a new project, is it better to go with the 5 tabs at the bottom? Or a hamburger (menu) icon that opens a slideout menu? Let’s use a desk and drawer analogy to better understand this debate.

Frequently used items belong on the desk, always at the ready. An iMac and keyboard, an iPhone, maybe a pen and pad.

Everything else can go in the junk drawer — out of sight, out of mind. Extra Post-It notes, the big pink eraser from high school, maybe even a compass. But one of these days, that compass might come in handy to sketch a wireframe when inspiration strikes.

The same applies to mobile apps. Frequently used items should appear in the Tab Bar for immediate access. Seldom used features like settings, or a lengthy Table of Contents can be hidden away in a slideout menu.

amazon kindle left menu    wwdc tab bar
Left: Amazon Kindle left slideout menu. Right: Tab Bar found in most of Apple’s apps

Recently though, the left slideout menu seems to be falling out of favor. Some would argue that the hamburger button introduces an unnecessary click, while hiding a significant number of features behind an overlooked button. I’m starting to see more apps put the menu in the fifth Tab. Regardless of your stance on this issue, there are still legitimate use cases for slideout menus. And depending on the project, someone else may have already made this design decision for you.

Searching for a Swift Solution

I recently worked on a Swift project that required the use of both a Tab Bar Controller and a slideout menu. In researching how to do this, I found the resources online to be pretty good. There are mature modules like SWRevealViewController with a great Swift tutorial for project integration. And there are useful Swift tutorials online for creating slideout menus from scratch, with a downloadable working code sample.

As good as these resources are, they were not the best fit for my development style nor how I wanted to design my project. In the age-old Code vs Storyboard debate, I fall in the Storyboard camp. I believe UI (structure and style) should be moved from code to configuration (XML) whenever possible. And for module use, I try to leverage the existing API to its fullest extent, using modules as a last resort to extend API limitations. The overall goal is to reduce code maintenance costs.

A challenge with Storyboards though is reuse. Code can be copied, but Storyboard configuration is abstracted into a complicated auto-generated XML file. This makes it hard to port work between projects without having to follow a manual checklist of checking boxes and dragging constraints. For this reason, it’s a challenge to create Storyboard based tutorials because of the many steps involved for readers to integrate them into their own projects.

With that said, here is a GitHub repo for creating your own Tab Bar Application with left slideout menu. There are step-by-step instructions in the README for recreating this manually using the Storyboard, for the most part. There’s also a working project you can use to check your work, or use as a template for your own test projects.

animated gif left menu slideout

How the Left Menu Slideout Tab Bar Combo Works

To understand the approach, let’s first state the pain point. Let’s face it, the Tab Bar Controller is a top level object. You can’t nest a Tab Bar Controller inside a View. In fact, Tab Bar Controllers eat Views for breakfast, and have no problem chasing it down with a View Controller for lunch and a Navigation Controller for dinner. So how do you embed a Tab Bar Controller so that it can be siblings with a left menu? The secret is the Container View.

UIContainerView is no respecter of persons, and will grab hold of the Tab Bar Controller by its View and treat it like any other View. So you can wrap entire View Controllers in these Containers, as if they were subViews.

Using a ScrollView for Movement

laundry cart
Oceanstar 2-Bag Rolling Laundry Sorter, Bronze, on Amazon

Now that the slideout menu and Tab Bar Controller are reduced to subViews, we wrap both inside a ScrollView so that the whole thing slides back and forth. Think of a the main View Controller as a laundry sorter cart. The cart frame is like a ScrollView on wheels. The bag for delicates & lights is the slideout menu, and the bag for darks is your Tab Bar Controller.

A benefit of using the ScrollView is the built-in pan gesture. You can even enable Paging to coerce the menu into either an open or closed state.

device left menu

Basically, the Container View allows the Left Slideout Menu to exist alongside the main body of the app. The ScrollView takes care of the sliding motion. And most of this can be done in the Storyboard, with minimal code.

Again, feel free to check out the GitHub repo and give the tutorial a try. And good luck!

Like this post? Please share it! Then follow us on Twitter @thorntech or join our mailing list below for future updates.