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