How to combine tab bars and navigation controllers?

Question

I'm working on an iPhone app for musicians. It allows you to import songs from several sources, select one and do different things with it, like display its lyrics, control playback and other things. The best way to structure these things would probably be using a tab bar, as there are 4+ separate views that I want to display.

Somehow I have to allow the user to select the song he wants to play, before he can use any of all those tabs. I've thought about presenting the songs in a list, and then pushing the tab bar view from the right. But apparently pushing tab bars is not allowed as they should always be the root view when used.

Then I thought of making the tab bar view the main one and adding a "Songs" button on the top left (where the "< Songs" back button would be, if the tab view was pushed) and presenting the song list modally from the bottom. But then, what do I do on first launch? Display a confusing empty playback view? Take over control and present the song list automatically? Or just launch in the song list view?

An other issue would be, where to put global app settings and contact information? Wouldn't it be confusing the put that into a tab? Usually, tabs display the same information in different ways, or information that is related. That would imply that those settings are on a per song level, instead of being global app settings.

Answer 1

If the song needs several editing modes, then you can use a UISegmentedControl - place this in a view controller and push this view controller on. You can style the segmented control to be a bit more customized if you need it to look like a tab bar.

As for the tab bar - like you said it is a root level container controller which means that its best used when the entire app can be separated into large logical activities. In this context I would definitely add a "Settings" type page on the tab bar. Too bad I don't think this is actually what you want.

For app settings without a tab bar, keep it in a less frequently used area, but still easy to get to.

Answer 2

Ok several things here:

Somehow I have to allow the user to select the song he wants to play, before he can use any of all those tabs.

Below is an example of using a menu with submenu. You could try something similar as the entire nested menu can animate downward to show only the submenu - to conserve space. The user can then "swipe upward" to bring the primary menu back. It also shows an example of how your user can save the settings as well.

But then, what do I do on first launch?

I think your third option about displaying the song view on first launch makes the most sense. No matter what you mention that you need to select a song first.

where to put global app settings and contact information?

A lot of apps with settings pages appear on the initial first page and not as a static main menu item.

You can also toggle your navigation with a hamburger icon. This example is great too at showing an "intro to the interface" function that opens on first launch.