How is iPhone Contact app's detail View implemented

Question

I would like to implement a view similar to the detail view of Apple's own Contacts app where it displays the name, phone number, note, etc. and its Edit mode.

Can you dissect how the whole view is done? Is that view done with a UITableView or a UIScrollView?

Answer 1

You can use F-Script for exploring this. Here's a screenshot from the F-Script browser while browsing Address Book. Basically, it looks like a lot of custom views which all inherit from NSView.

To do this yourself:

1. Download F-Script from the link above
2. Follow the instructions in the extras/F-Script Anywhere directory for attaching to Address Book
3. Choose F-Script -> Open Object Browser from the Address Book menu
4. Click Select View
5. Highlight the Address Book View you want to explore and click it.
6. Navigate around to your heart's content.

Answer 2

My implementation uses a UITableView with custom header (for the "Add Photo" and edit name equivalents) and a custom footer (using the UISegmentedControl hack for a big button) for the "Delete" equivalent.

Answer 3

The contact details screen is actually quite simple to mimic.

Start with a UITableView and provide it with a UITableViewDataSource and UITableViewDelegate. You'll need to provide sections for all the data you want to present. This means 1 for the custom header, 1 for the custom footer (buttons / actions), and approximately 6 or so sections for the data (one section for phone numbers, another for e-mail addresses, and so on)

Inside of each section, a number of rows need to be provided from your datasource to indicate how much data there is for that section. For each row, a UITableViewCell can be used to display the actual contact data (fax label / fax number value, etc). You can get fancy if you like, but there doesn't seem to be a need. For things like ringtone you'll need to specify a disclosure indicator.

For the header you'll need a UIImageView and a UILabel, for the footer you'll need a few UIButtons. You can create a child of UITableViewCell in InterfaceBuilder with these views inside of it and wire it up like anything else. You can use NSBundle to load views from other xibs that are not already loaded.

An alternative is to dynamically generate the UI widgets at runtime with no xibs. It all depends on what you would rather manage (code or xibs), to me it seems about the same amount of effort either way. I highly recommend reading through the table view programming guide if you haven't already.