Question

I have a fairly simple TableViewController listing items that can be checked as they are collected. I have successfully implemented a word wrapped label in each cell, and updated heightForRowAtIndexPath such that each row is a suitable height. This is working well:

note: I have set a garish background color on the cell’s contentView for testing purposes.

The problem comes when I try to add a checkmark button as the accessoryView for each cell:

    UIImage *image = [UIImage imageNamed:@"checked.png"];
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    CGRect frame = CGRectMake(0.0, 0.0, 44.0, 44.0);
    button.frame = frame;
    [button setImage:image forState:UIControlStateNormal]
    button.backgroundColor = [UIColor redColor];
    cell.accessoryView = button;

For some reason, the alignment is not quite right for my cells that span more than one line once the button size exceeds about 26×26 pixels.

The example above uses 44×44 as the button width.

Can anyone explain what is going on here? Why would there be a different alignment when the contentView is 2-lines versus one? Infact, for each extra line that the text uses, the alignment is increasingly off. I can add the code for the row text if it will help.

Answer 1

I found that this can be resolved by setting the height of the button in the accessory view to match what will be calculated for the row.

So, the code used in heightForRow:atIndexPath: should be copied in to the cellForRowAtIndexPath and used to set the button’s height.