ios - trying to understand how cellForRowAtIndexPath and heightForRowAtIndexPath work when dealing with UITableViewCells

Question

With the help of the good people of StackOverflow, I have these two methods:

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

    NSString *comment = [[items_array objectAtIndex:[indexPath row]] objectForKey:(@"comment")];

    NSLog(businessPrivacy);
    // FIND IF THE BUSINESS PLAN IS PRIVATE OR NOT.

        CGSize constraint = CGSizeMake(320 - (10 * 2), 20000.0f); 

        CGSize size = [comment sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap]; 

        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, MAX(size.height, 44.0f) + 20.0f)]; 
        label.numberOfLines = 0; 
        label.lineBreakMode = UILineBreakModeWordWrap; 
        label.text = comment;  

        [cell.contentView addSubview:label];        

    return cell;
}

//Cell size for word wrapping.
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
{    
    NSString *comment = [[items_array objectAtIndex:[indexPath row]] objectForKey:(@"comment")];

    CGSize constraint = CGSizeMake(320 - (10 * 2), 20000.0f); 

    CGSize size = [comment sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap]; 

    CGFloat height = MAX(size.height, 44.0f);

    return height + (10 * 2);
}

The effect that they have is reducing font size from default font size, and dynamically resizing to ALMOST fit the entire text of a comment no matter how long that text might be.

What I am confused with is that I have some of the same code in both methods, and I dont know how it really should look like. I do know both methods are getting called, but not sure what should be where so they would work properly.

Thanks in advance for advice.

Answer 1

If you have to write the same code two or more times, you should consider extracting the duplicate code into a method or function. But you have some other problems we should address.

Let's declare some constants so we don't have to repeat numbers all over the code:

static const CGFloat kLabelMargin = 10.0f;
static const CGFloat kLabelWidth = 320.0f - 2.0f * kLabelMargin;

One line you have duplicated in both methods looks up the comment for a row. Let's make a method to do that:

- (NSString *)commentForRowAtIndexPath:(NSIndexPath *)indexPath {
    return [[items_array objectAtIndex:[indexPath row]] objectForKey:@"comment"];
}

The other duplicated code computes the height of the row, so let's make a function to return that:

static CGFloat heightForComment(NSString *comment) {
    CGSize constraint = CGSizeMake(kLabelWidth, 20000.0f);
    CGSize size = [comment sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];
    return MAX(size.height, 44.0f) + 2.0f * kLabelMargin;
}

Now we can rewrite your tableView:heightForRowAtIndexPath: method:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return heightForComment([self commentForRowAtIndexPath:indexPath]);
}

Finally, let's rewrite your tableView:cellForRowAtIndexPath: method. We will make it properly reuse cells (to avoid wasting memory), and we'll make it use the new method and function we created.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *const kReuseIdentifier = @"business";
    static const NSInteger kLabelTag = 1;

    NSLog(@"%@", businessPrivacy);
    // FIND IF THE BUSINESS PLAN IS PRIVATE OR NOT.

    NSString *comment = [self commentForRowAtIndexPath:indexPath];
    CGRect labelFrame = CGRectMake(0, 0, kLabelWidth, heightForComment(comment));

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kReuseIdentifier];
    UILabel *label;
    if (cell) {
        label = (UILabel *)[cell.contentView viewWithTag:kLabelTag];
        label.frame = labelFrame;
    } else {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:kReuseIdentifier];
        label = [[UILabel alloc] initWithFrame:labelFrame];
        label.tag = kLabelTag;
        label.numberOfLines = 0;
        label.lineBreakMode = UILineBreakModeWordWrap;
        [cell.contentView addSubview:label];
    }

    label.text = comment;

    return cell;
}

Answer 2

It looks like you need them in both. I have rewritten your code with comments so that you can make sense of it:

//This function is used to create the cell and the content of the cell.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{   
    //Here you are allocating a new cell with a reuse identifier.  This is only needed if
    //you plan on reusing the cells and using [tableView dequeueReusableCellWithIdentifier:cellIdentifier]
    //Reusable cells will save you some memory and make your tableview work more smoothly,
    //however here you are not selecting from the reusable pool, and are instead making a new cell each time
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:(UITableViewCellStyleDefault)
            reuseIdentifier:@"business"];

    //This is pulling the text for the comment, it is obviously necessary
    NSString *comment = [[items_array objectAtIndex:[indexPath row]] objectForKey:(@"comment")];

    NSLog(businessPrivacy);
    // FIND IF THE BUSINESS PLAN IS PRIVATE OR NOT.

    // This is creating a constraint size for the label you are making
    CGSize constraint = CGSizeMake(320 - (10 * 2), 20000.0f); 

    // This is determining the size that you will need for the label based on the comment
    // length and the contraint size
    CGSize size = [comment sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap]; 

    //  Here you are creating your label and initializing it with the frame that you have
    //  determined by your size calculations above
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, MAX(size.height, 44.0f) + 20.0f)];

    // setting up the label properties
    label.numberOfLines = 0;
    label.lineBreakMode = UILineBreakModeWordWrap; 
    label.text = comment;  

    // adding the label view to the cell that you have created
    [cell.contentView addSubview:label];        

    // return the cell for the table view
    return cell;
}

//Cell size for word wrapping.
//This method will determine how tall each row needs to be.
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
{
    //Here you are getting the comment again.  This is necessary to determine how tall you need
    //the cell to be    
    NSString *comment = [[items_array objectAtIndex:[indexPath row]] objectForKey:(@"comment")];

    // Again you are getting the constraints because you are going to us this size
    // to constrain the height of the cell just like you determined the size for the label.
    CGSize constraint = CGSizeMake(320 - (10 * 2), 20000.0f); 

    // Again, determining the size that we will need for the label, because it will drive
    // the height of the cell
    CGSize size = [comment sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap]; 

    //  Finally, we can determine the height for the cell!
    CGFloat height = MAX(size.height, 44.0f);

    //  return the height, which is the height of the label plus some extra space to make
    //  it look good.
    return height + (10 * 2);
}

So basically, the cellForRow... function creates the content of the cell and the heightForRow... function determines the height. You need all of that information in both of them because the cell function only creates the content of the cell while the height function creates the height of the row and the comment, constraint, and size are all important in determine the label size for the cell content and the height of the cell.

Answer 3

So heightForRowAtIndexPath, as its name suggests, only deal with the height of the cells. i.e. the return value (a CGFloat) of that function is the height of the cell at the specified indexpath.

cellForRowAtIndexPath on the other hand sets up the actual cell, including all its subviews. What happens is, say some cells have a 5-line UILabel and some have 1-line. Then You need to adjust the size of the cell in heightForRowAtIndexPath, but at the same time you also need to adjust the size of the UILabel within the cell in cellForRowAtIndexPath. The latter will not automatically happen. You need to take care of both yourself.