Showing a checkmark accessory view move the table contents

Question

I followed Apple's documentation on adding subview to the UITableViewcell here

to add a 3rd label to the cell. The problem is when I show the standard checkmark accessory view on the right the whole cell contents moves left even when I didn't show the 3rd label. Screenshot below .

And here is my code:

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

    static NSString *CellIdentifier = @"MyCell";

    UILabel *mainLabel, *secondLabel, *thirdLabel;

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
{
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    //cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
    cell.accessoryType = UITableViewCellAccessoryNone;

    mainLabel = [[UILabel alloc] initWithFrame:CGRectMake(20.0, 2.0, 100.0, 21.0)];
    mainLabel.tag = MAINLABEL_TAG;
    //mainLabel.font = [UIFont systemFontOfSize:14.0];
    //mainLabel.font = [UIFont fontWithName:@"Geeza Pro Bold" size:17.0];
    mainLabel.font = [UIFont boldSystemFontOfSize:17];
    mainLabel.textAlignment = UITextAlignmentLeft;
    mainLabel.textColor = [UIColor blackColor];
    mainLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
    [cell.contentView addSubview:mainLabel];

    secondLabel = [[UILabel alloc] initWithFrame:CGRectMake(20.0, 22.0, 100.0, 21.0)];
    secondLabel.tag = SECONDLABEL_TAG;
    //secondLabel.font = [UIFont systemFontOfSize:12.0];
    //secondLabel.font = [UIFont fontWithName:@"Geeza Pro" size:15.0];
    secondLabel.font = [UIFont systemFontOfSize:15];
    secondLabel.textAlignment = UITextAlignmentLeft;
    secondLabel.textColor = [UIColor darkGrayColor];
    secondLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
    [cell.contentView addSubview:secondLabel];

    thirdLabel = [[UILabel alloc] initWithFrame:CGRectMake(203.0, 11.0, 70.0, 21.0)];
    thirdLabel.tag = THIRDLABEL_TAG;
    //thirdLabel.font = [UIFont systemFontOfSize:12.0];
    //thirdLabel.font = [UIFont fontWithName:@"Geeza Pro Bold" size:17.0];
    thirdLabel.font = [UIFont boldSystemFontOfSize:17];
    thirdLabel.textAlignment = UITextAlignmentRight;
    thirdLabel.textColor = [UIColor darkGrayColor];
    thirdLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
    [cell.contentView addSubview:thirdLabel];


}
    else
    {
        mainLabel = (UILabel *)[cell.contentView viewWithTag:MAINLABEL_TAG];
        secondLabel = (UILabel *)[cell.contentView viewWithTag:SECONDLABEL_TAG];
        thirdLabel = (UILabel *)[cell.contentView viewWithTag:THIRDLABEL_TAG];
    }

    Car *car = [self.dataModel carAtIndex:indexPath.row];
   NSString *carName = [NSString stringWithFormat:@"%@",car.deviceName];
   NSString *carDetails = [NSString stringWithFormat:@"%@ at %@",car.date,car.location];
   NSString *carSpeed = [NSString stringWithFormat:@"%@ km/h",car.speed];


   mainLabel.text = carName;
   secondLabel.text = carDetails;
   thirdLabel.text = carSpeed;

return cell;
}

UPDATE: I changed UIViewAutoresizingFlexibleLeftMargin to UIViewAutoresizingFlexibleWidth according to @MattG advice. Now when a cell is selected the Labels don't move to the left but are a little partially covered as in the pic below. enter image description here

Maybe this caused by my - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath ? Here is its code:

 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath    *)indexPath
{

    if([tableView cellForRowAtIndexPath:indexPath].accessoryType == UITableViewCellAccessoryCheckmark){
        [tableView cellForRowAtIndexPath:indexPath].accessoryType = UITableViewCellAccessoryNone;
    }
    else
    {
        [tableView cellForRowAtIndexPath:indexPath].accessoryType = UITableViewCellAccessoryCheckmark;
    }
}

Check out this tutorial - it should solve your problem http://www.edumobile.org/iphone/iphone-programming-tutorials/impliment-a-custom-accessory-view-for-your-uitableview-in-iphone/ — Rachel Gallen, May 12 '13 at 19:07
this blog is also helpful http://joshgrenon.com/2009/07/20/iphone-development-how-to-create-checkmarks-in-a-uitableview/ — Rachel Gallen, May 12 '13 at 19:09
Looks like you should be doing UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth. Not UIViewAutoresizingFlexibleLeftMargin. — Matt G, May 12 '13 at 20:30
Thanks @MattG I updated my question according to your suggestion. The problem is a little bit different now. — Ali, May 13 '13 at 14:44
my $.02, any time I start putting alloc/init's inside cellForRowAtIndexPath, it always end up being less of a headache in the long run to just create a uitableviewcell subclass with all these custom labels/elements as public properties or setters. — Augie, May 13 '13 at 14:55

score 0 · Answer 1 · edited Jan 28 '19 at 18:23

I would start by reviewing Apple's Table View Programming Guide for iOS. It has a section called 'A Closer Look at Table View Cells' which breaks down the layouts of the pre-defined cells.

Looking at your code You have enough going on in your cells to consider subclassing UITableViewCell to produce your own custom cell. You could remove all of your setup code for your cell labels into one class and just concern yourself with configuring the cell in the cellForRowAtIndexPath: method.

However your question is focused on layout of the table view cell. It is sometimes useful to set the subviews' backgrounds to different colors so you can see what space is being used by which subview and how it interacts if we introduce other subviews, in this case the accessory view.

To fix your issue with the third label's text being truncated would be to first to configure the label to work with a smaller font size. I would do this for all the labels. The labels should now adjust the text based on the label's width. You should also check you text alignment property to confirm they are set to the best option.

thirdLabel.adjustsFontSizeToFitWidth = YES;
thirdLabel.minimumScaleFactor = 0.4f;

The results of these changes might be enough to solve the truncation and keep a layout that you have.

score -1 · Answer 2 · answered Mar 26 '19 at 06:22

Adjust the constraints of your cells so that nothing is being constrained by that side the accessory type shows up on.

For example, I had my accessory show up on the right side, however my cell items were constrained to all 4 edges (top, bottom, left, right). Since the accessory was a right checkmark, i changed my items to top, left, height & width constraints, (skipping the right) and now, when the accessory shows up, it doesn't shift the right anchor point.

Showing a checkmark accessory view move the table contents

2 Answers2

Linked