The TableView is a common way to display data on an iPhone. For example, news apps like Wall Street Journal, New York Times and Huffington Post all use a table view to display a list of stories. When you click on one of those stories, you see the full news story in a detail view. At the top of these apps, you see a navigation bar that allows you to navigate back to the list of stories, and at the bottom, a tab bar that lets you select among different app functions or topics, for example.
Combining a tab bar with a table view and navigation bar isn't very difficult, but it took me forever to figure out how to do it properly. I found the explanation of how to combine tab bars and navigation bars on Apple's website woefully inadequate. I spent some time studying one of the examples that comes with the Apple documentation for Tab Bar Controllers, called TheElements, which builds this kind of app programmatically. After studying that for a while, it started to make more sense, but I really wanted to figure out how to do it using Interface Builder. I posted a couple of questions to the cocoadev mailing list, and got some really helpful answers and was eventually able to figure it out.
I've created an example to demonstrate how to build this kind of app and recorded a screencast partly so I'd never forget again, and also to help anyone else out there who might be struggling with this same challenge. There are lots of little steps that you have to do in just the right order to get it all working. A screencast seemed like the perfect way to demonstrate these steps since a lot of the work happens in Interface Builder and it's much easier to show what actions to take than it is to describe them in text or even with pictures.
If you try to build this app yourself by following the screencast, I'd love to hear how it goes and if the screencast was helpful for you. And if you have any feedback on the process I'm using to build this app, I'd love to hear that too.
Or, to follow along more closely with the code, Click here to view or download the original high resolution .mov file. [254 Mb]
Update: Here's the downloadable code sample