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?

Convex

Answer 1

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.

Epigrammatize

Answer 2

Or you could use Apple's own ABPersonViewController:

http://developer.apple.com/library/ios/#documentation/AddressBookUI/Reference/ABPersonViewController_Class/Reference/Reference.html

The allowsEditing property specifies whether the user can edit the person’s information.

Oto

Answer 3

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.

Sharpset

Answer 4

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.

Allyce

Hrm. Even though the iPhone Simulator version of MobileAddressBook is a dynamic executable, loading the FScript bundle in gdb doesn't seem to work. – Allyce

Answer 5

Just to show you the way, you can subclass UITableViewController for that purpose and then in order to implement the Edit mode similar to the Contacts app you would:

1. Add a property to store a reference to Cancel button.

   var cancelButton: UIBarButtonItem!
   

2. In ViewDidLoad(), add edit button to the navigation bar as a right item and prepare Cancel button to later add it as a left item.

   self.navigationItem.rightBarButtonItem = self.editButtonItem()
   self.cancelButton = UIBarButtonItem(title: "Cancel", style: .Plain, target: self, action: "cancelPressed:")
   

3. Override setEditing(_:animated:) method to set up your cells for Edit/Preview mode and show/hide a Cancel button on the navigation bar, based on the editing flag.

   override func setEditing(editing: Bool, animated: Bool) {
       super.setEditing(editing, animated: true)
   
       if editing {
           // Set up cells and prepare for Edit mode here
           self.navigationItem.setLeftBarButtonItem(self.cancelButton, animated: true)
       } else {
           // Set up cells and prepare for Preview mode here
           self.navigationItem.setLeftBarButtonItem(nil, animated: true)
       }
   }
   

4. Override UITableViewDelegate's tableView(_:editingStyleForRowAtIndexPath:) and tableView(_:shouldIndentWhileEditingRowAtIndexPath:) methods to configure row styles and indentation when in Edit mode.

5. Implement cancelPressed method to exit Edit mode when Cancel is pressed.

   func cancelPressed(button: UIBarButtonItem) {
       self.setEditing(false, animated: true)
   }
   

I know the question is pretty old, but somebody might find it helpful.

Ethnogeny