Progressive Degradation

Everyone that has built an iPhone application has at one time or another worked with UITableViews. They are pretty much at the heart of most data intensive applications from Twitter clients to just your standard news app. One thing that’s not too clear is how do you get more from your tables without jamming (usually with a sledgehammer and your trusty shoe horn) them into a header of a table section header. There isn’t much information on the net (at least that I found in my multiple searches) that really goes into how to accomplish this as well.

Starting out

Wireframe of what your business wants

So, you’ve been looking to build a view that is mainly a table, yet has something, maybe some instructional text or even a little description of what the view is for, more to make that view easily understood by the user, but you don’t want to sacrifice the use of your table header either. Of course, this probably came as a result of some sort of downfall you had seen in a previous application that does similar things, so you’re sold on this being the “right” way to do it.

But how do you actually do this and ensure that the view scrolls not just the table, but everything in that view? This was something I struggled with for a few hours, Trying time and time again to manpulate a UIScrollView XIB with a UITableView nested inside. All that did was override the scroll features of the UIScrollView to the UITableView, making the only thing you can scroll the table; not the entire view as desired. Before you lose all of your hair as to why, it’s basically due to the UITableView being a subclass of UIScrollView.

How it’s done

OK, now that we’re past trying to get our way through force, let’s get try some finesse. Given that we’re really trying to add more information to a UITableView, so why don’t we try something along those lines. First, we need to create the classes and XIB that will be our view when we’re done. Do this as you normally would by choosing File -> New File or Command-N if you’re keyboard motivated. When the New File screen comes up, choose Cocoa Touch Class under the iPhone OS section, then UIViewController subclass. Make sure you check the two options available; UITableViewController subclass and With XIB for user interface. Choose Next, and create the .m and .h files.

Now you should have three files available to you: your .m, .h and .xib file so it’s time to make the XIB do what we want. Open the XIB file either by double-clicking it in XCode, or manually by opening Interface Builder, finding the file and opening the XIB file. To add in the necessary label which is the root of all this additional work, we simply need to do only two more things.

The two steps

The first thing to do is to add a UIView as a child of your Table View. Easy enough, just find the UIView in the Library within Interface Builder and drag it into your XIB view where you’re looking to drop it. Simple enough. The next step is just as simple. We need to add the label. Again, find the Label in the Library and drag it under your UIView that you just added.

I’m sure you’re thinking, “It can’t be that simple, can it?” Well, believe it or not, it is. When I figured this out, it was just a shot in the dark as I had first tried everything I could think of by using a UIScrollView and embedding a table inside of it.

There is still a little formatting you will need to do to ensure your view and it’s label have enough space at the top of your view. But, once you’re done though, you should have the view of your XIB looking like the image below. You can also add another view and using simple positioning, place it at the bottom of your view, creating the same effect after your table.

In close

There are drawbacks, of course. Yes, everything has to have some drawback, nothing is free. The one that you need to be aware of is that you cannot build your code for an iPhone OS under 3.0. If you’re still building apps for 2.2.1 or below, this would be a great opportunity to change that.

If you’re wondering what spurred me into finding a solution for the problem at the beginning of this article, it was for an application where the “My Profile” tab is able to be updated by the server, so we needed a short label informing users that they can download their profile, but changes are not reflected at the server and a button to start the (potential) login and download processes.