An iOS Catalogue/Store App Template

One of the more challenging things about iOS development is moving past simple examples to something more complex. Unlike web development, iOS apps are not just a bunch of views which can arbitrarily link to each other. It’s more structured. Putting together an application which has the right kind of UI elements in the right places all working together is not trivial. Table views are easy enough to understand by themselves. Navigation controllers go hand-in-hand with table views. A tab bar is easy to understand on its own too. But what if you want to combine the two? What if you want to have a segmented button in your navigation controller like the built-in iTunes app?

It took me a couple of weeks of research and trial and error but I finally put together an iOS app template for an application where individual tabs can contain a navigation controller and table view. Furthermore, the detail view of the table has a segmented control in the navigation bar used to switch between different detail views. This is similar to (but not exactly the same as) Apple’s “store” apps like iTunes, App Store and Apple Store. It can be useful for a store or catalogue application if you want to stick to standard iOS UI elements and conventions.

There is no .xib file for the main view. The UITabBarController is setup programmatically in AppDelegate.m. In order to place a UINavigationController as the contents of a tab instead of a vanilla UIViewController you must create a UINavigationController with the desired UIViewController as its root view controller.

AppDelegate.m

The segmented control in the detail view uses large portions of the great example by Marcus Crafter. I opted to use his older example which requires a container view. Marcus has a more recent example which doesn’t require a container view and is generally cleaner. However, I couldn’t quite figure out how to get that to work in this particular context.

The full XCode project is available on GitHub.