How can a create a automatically resizing table cell for entering texts like in the iPhone's "mail" app?

Question

I'm try to emulated something just like the "new message" page in Apple's mail app on the iphone. I've implemented it with a tableview and I've successfully gotten the "To", "CC", and "Subject" rows to behave correctly, but I'm not sure how to implement the actual message portion of the page.

There are several issues that I'm having. I'm currently trying to implement it by placing a UITextView in the cell (I turn off the scroll bars on the text view). I have the text view resize itself when it is changed, by modifying its frame to the new height of the content. The first problem is that I also need to do this for the cell height itself. Since heightForRowAtIndexPath seems to only get called when the row is first loaded, I can't modify the height there. I suppose I could call reload data on the table but this seems like it would be really inefficient to do on the whole table every time text is entered. What is the best way to get the table cell to autoresize as the user types? I've found lots of examples on how to do it on lone table views and how to resize table cells at initialization but I can't find any that let you do both at the same time.

Finally, I would like the bottom border of the table cell to be invisible. If you look at the mail app, you'll notice there is no line at the bottom of the message space, implying that you can just keep typing. I always have one in my table view (even when I add a footer) and I can't figure out how to get rid of it. (Perhaps should I make my message body be the footer itself?)

Answer 1

I would recommend using a UIScrollView yourself instead of a UITableView. UITableView isn't really built to support such a thing.

Answer 2

Mail.app doesn't seem to use UITableView. It looks like there custom items (labels and text fields) with UITextView on bottom.

Answer 3

You could try my answer to a question similar to this...the key is to use

[self.tableView beginUpdates];
[self.tableView endUpdates];

To do this without reloading the data.

First off, of course, you're going to want to create your UITextView and add it to your cell's contentView. I created an instance variable of UITextView called "cellTextView" Here is the code that I used:

- (UITableViewCell *)tableView:(UITableView *)tableView fileNameCellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];

    if (!cellTextView) {
        cellTextView = [[UITextView alloc] initWithFrame:CGRectMake(5.0, 5.0, cell.bounds.size.width - 30.0, cell.bounds.size.height - 10.0)]; // I use these x and y values plus the height value for padding purposes.
    }
    [cellTextView setBackgroundColor:[UIColor clearColor]];
    [cellTextView setScrollEnabled:FALSE];
    [cellTextView setFont:[UIFont boldSystemFontOfSize:13.0]];
    [cellTextView setDelegate:self];
    [cellTextView setTextColor:[UIColor blackColor]];
    [cellTextView setContentInset:UIEdgeInsetsZero];
    [cell.contentView addSubview:cellTextView];

    return cell;
}

Then, create an int variable called numberOfLines and set the variable to 1 in your init method. Afterwards, in your textViewDelegate's textViewDidChange method, use this code:

- (void)textViewDidChange:(UITextView *)textView
{
    numberOfLines = (textView.contentSize.height / textView.font.lineHeight) - 1;

    float height = 44.0;
    height += (textView.font.lineHeight * (numberOfLines - 1));

    CGRect textViewFrame = [textView frame];
    textViewFrame.size.height = height - 10.0; //The 10 value is to retrieve the same height padding I inputed earlier when I initialized the UITextView
    [textView setFrame:textViewFrame];

    [self.tableView beginUpdates];
    [self.tableView endUpdates];

    [cellTextView setContentInset:UIEdgeInsetsZero];
}    

Finally, paste this code into your heightForRowAtIndexPath method:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    float height = 44.0;
    if (cellTextView) {
        height += (cellTextView.font.lineHeight * (numberOfLines - 1));
    }
    return height;
}