UIs for Hierachical iPad Apps

If you're in a hurry: tl;dr version

At factis research we developed FRLayeredNavigationController, a view controller compositor which enables you to develop -- as we think -- great iPad apps. Influenced by the UI of the Twitter and Soundcloud iPad apps we designed a new navigation concept for our product Checkpad MED. Since we love open source software and know what we owe the community we'll again try to give something back: FRLayeredNavigationController gives iPad developers a simple drop-in replacement for UINavigationController for great UIs. This screencast shows a very simplistic app made with FRLayeredNavigationController.

Full-blown post

Motivation

The Apple iPad is a great mobile device which is due to its big screen capable of displaying a lot of content at the same time. This capability makes the iPad a great device for apps with complex, structured data. A question Apple leaves to its developers is how to guide the users through deeply hierachical content.

On the iPhone the usual way is to use UINavigationControllers. Because of the small screen, UINavigationControllers are great on the iPhone, only the currently most relevant information is displayed. The sole trace of the navigation path from app start to the current content is the title of the second-to-last view controller in the back button at the upper left side of the screen.

On the iPad UINavigationControllers alone are fine, too, when all your view controllers really have an iPad-screenful of content. But, most apps have some kind of low-content view controllers which are primararilly made to bring the users to the actual content, stepping through several layers of the hierarchy. Often, these controllers are simple UITableViews which look bad when they are displayed fullscreen on the iPad. To solve this problem, Apple gave us UISplitViewController: the navigation-only part on the smaller left side (or even in a UIPopoverController) and the content right next to the navigation in a somewhat bigger frame. This concept works great and looks good as demonstrated at least by the iPad Settings and Mail apps. Compare them to their iPhone counterparts and you will see how nicely they work on these very different devices with minor changes only.

UISplitViewControllers work great when your content hierarchy's depth is two: One navigation layer and one content layer. Three layers is still okay, since you can use a UINavigationController inside the left or right side of the UISplitViewController. But if the depth of your content hierarchy exceeds three, it does not fit nicely in the UISplitviewController somehow, you have to go other ways.

At factis research we particularily liked the Twitter and Soundcloud iPad apps and decided to go a similar path with our product Checkpad MED. We called our solution FRLayeredNavigationController because it enables developers to build schrieblesque apps with multiple hierarchy layers.

How does it work?

The basic idea is not to completely hide a view controller when a new view controller is being shown.  FRLayeredNavigationController still shows some pixels of the view controllers the user passed through until reaching the currently active one. This will give the user a good idea of where (s)he currently is in the navigation hierarchy. If the user should need more information of these partly covered view controllers, (s)he can always reveal the covered pixels by intuitive pan gestures. The user will think of a stack of paper and has similar interaction options. Probably you get a better idea when looking at these screenshots:

regular view

after revealing more information in the level-2 view controller (the "Teams" view controller) by swiping  to the right

Also watch these two iPad screencasts to get the idea: http://youtu.be/v_tXD_mL05E and http://youtu.be/q66HX2td_uc .

Technically, it uses view controller composition as introduced in iOS 5. It manages multiple "Layers" which are UIViewControllers you provide. The moving of the layers is triggered by a UIPanGestureRecognizer and some logic when to move which layer. It looks and feels very nice due to the nice iOS animation support.

Can I use FRLayeredViewController, too?

Sure, it's open sourced and available at GitHub! If you have any problems, feel free to contact us.

What is the API like?

Have a look at the API documentation, it's quite similar to UINavigationController's API from Apple.

Say, you have a UIViewController and you're using UINavigationController from Apple. To show a new layer to the user, you would do:

[self.navigationController pushViewController:test animated:YES];

with FRLayeredNavigationController it's quite similar:

[self.layeredNavigationController pushViewController:test
                                           inFrontOf:self
                                        maximumWidth:NO
                                            animated:YES];

The maximumWidth parameter is how you tell FRLayeredNavigationController whether the new view controller is content (give it the maximal width still available) or not.

Just as UINavigationController, it also supports UIBarItems and a configurable title view. For example, a UIViewController which has been pushed onto a FRLayeredNavigationController could have the following viewWillAppear method to add a back button on the upper left corner:

- (void)viewWillAppear:(BOOL)animated
{
    self.layeredNavigationItem.leftBarButtonItem =
        [[UIBarButtonItem alloc]
         initWithImage:[UIImage imageNamed:@"back-button.png"]
                 style:UIBarButtonItemStylePlain
                target:self
                action:@selector(backButtonClicked)];

    self.layeredNavigationItem.leftBarButtonItem.style =
        UIBarButtonItemStyleBordered;
}

Have a look at FRLayeredNavigationController and FRLayeredNavigationItem to see what's possible with FRLayeredNavigationController.

How can I embed FRLayeredViewController in my project?

It's explained step-by-step in the README file and in this screencast.