If you followed my first tutorial on UITableView (link | source code), you now have a very simple app that shows a list of DVD titles and clicking any of the titles shows you a detail view page with more information about the DVD.  That’s all nice but we really want to make it a little bit prettier. We could display the length of each movie right on the listing page. Also, we have this coverImage field in our data set, let’s use it.

What we want is for our home screen to look like this:

We can accomplish that by customizing UITableViewCell. There are 2 ways of going about it:

1. Using Interface Builder
2. Programmatically

In reality, you can also choose a hybrid approach where you create some UI elements in the Interface Builder and some programmatically.

Which option to choose?

The two approaches both bring some advantages and disadvantages with them.

Interface Builder

If you decide to go the Interface Builder route, you’ll find it very easy to create and customize your cells. Any subsequent edits can also be done quite easily since you’re simply rearranging elements visually. The downside is speed and performance since the system needs to render each view in a cell individually. If your table view has thousands of rows in it, this may/may not affect the performance of your app, depending how complicated your cell is.

Programmatically

This one involves a lot more work. You are responsible for creating each UI element by hand in the code. That can be very tedious and any edits you need to make in the future require code changes. Also, you’ll need to set up all the autosizing masks yourself. The upside is performance. Since the system will draw each cell as one view, the performance gain can be very significant.

(more…)

Ok, let’s start with something really simple. We’ll be creating an app to keep track of your DVD library. The app will have a table view, a detail view and some basic navigational components.

Pre-requisites

I assume you have Xcode and iPhone SDK 3.x already installed (I’m using version Xcode 3.1, with 3.2 being the newest at the time of this writing). I also assume you know how to create a project so I’m not going to cover those little things here. Lastly, I assume you have some knowledge Objective-C, its principles, syntax and paradigms.

1. Set up your project

Create a “Navigation-based Application” and name it “TableViewApp.” Right off the bat, you’ll have an empty app, which is pretty much useless. You can run it using Cmd+R.

2. Create a dummy data set

Right-click on the Resources folder and choose Add -> New File. Under Other category, choose Property List. Name it TestData.plist. This is basically an XML file that will have an empty Dictionary in it by default. Change Dictionary to Array since we’re going to be adding numerous “DVDs” which will be described as individual Dictionaries.

You can add data to it by simply clicking the little button to the right of the Value column. We will be adding information about your DVD collection to it so the schema of your data set could be something like this:

• Title – String
• Cover image – String
• Feature length  - Number (in minutes)
• Release date – Date

Of course, this could be extended to more fields such as director, genre, aspect ratio, etc.

Following this schema, add a few items to your dummy data set. You’ll eventually want to have your file looking something like this:

If you don’t feel like typing all this info in, you can download the file here: TestData.plist.

(more…)