How to create UITableViewCell like iphone Contact Address Cell?

Question

I need help figuring out how to create a cell like the one representing an Address in the iphone Contacts app. I'm not looking to create an address. I just need to know how to show the following in edit mode:

1. Text on the left (like UITableViewCellStyleValue2)
2. Gray line separating the left and the right
3. Content on the right hand in a custom format--I will have varying formats depending on what I'm trying to present here, with differing heights.

Any sample code, Apple examples (though I can't find one), tutorials, or general guidances is greatly appreciated. I'm trying to avoid having to create a custom container class to handle everything on the left and dynamically resize based on the content I want to put on the right. Surely someone has done this already, right? :)

The edit mode looks like this:

Answer 1

You have to create your own UITableVIewCellSubclass, this is not as difficult as you might think.

Basically you just have to add 2 UITextField and a UIImageView in between for the separator.

I advise you to have a look at Apple's TableView Programming guide, and especially A Closer Look at Table-View Cells

You have a code sample very similar to what you are trying to achieve. Here is the idea (untested code) :

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"ImageOnRightCell";

    UITextField*main, *second;
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;

        main = [[[UITextField alloc] initWithFrame:CGRectMake(0.0, 0.0, 220.0, 15.0)] autorelease];
        main.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
        [cell.contentView addSubview:main];

        second = [[[UITextField alloc] initWithFrame:CGRectMake(220.0, 0.0, 220.0, 15.0)] autorelease];
        second.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
        [cell.contentView addSubview:second];

    }

    return cell;
}

Hope this helps, Vincent

Answer 2

I just did something like this. My solution was fairly specific to my data, but in general this is how I did it:

1. Left hand side text is a vertically centered UILabel
2. Right hand side is a UITableView
3. "123 Fake Street" would go into a UITableViewCell subclass that has a UITextField thrown into the content view.
4. "My City" and "ST" would go into a single UITableViewCell subclass that has to UITextField's thrown in. I actually did a UITextFieldSubclass that give me control over which borders to draw (ie drawLeftBorder = YES).
5. You have to decide when to resize, but you basically add the row in the right hand side and then call a begin/endUpdates block on the parent tableview. Be sure that the parent tableview implements heightForRowAtIndexPath and returns the correct value based on the data.