iOS 7 : Custom UITableViewCell content doesn't move expected on editing?

Question

I'm working on a Custom UITableViewCell with editing. When I enter editing mode, the label and image are not moved properly.

- (IBAction) EditTable:(id)sender{
    UIButton *btn = (UIButton *)sender;
    if(self.editing) {
        [super setEditing:NO animated:NO];
        [btn setTitle:@"edit" forState:UIControlStateNormal];
        [tblView setEditing:NO animated:NO];
    } else {
        [super setEditing:YES animated:YES];
        [btn setTitle:@"done" forState:UIControlStateNormal];
        [tblView setEditing:YES animated:YES];
    }
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    int count = [arrData count];
    if(self.editing) [arrData count];
    return count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    DeleteUserCell *cell = (DeleteUserCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"DeleteUserCell" owner:self options:nil];
    cell = [nib objectAtIndex:0];
}
    cell.imgCell.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d", indexPath.row+1]];
    cell.lblCell.text = [arrData objectAtIndex:indexPath.row];
    return cell;
}

// Override to support conditional editing of the table view.
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Return NO if you do not want the specified item to be editable.
   return YES;
}
// Override to support editing the table view.
 - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
    {
        if (editingStyle == UITableViewCellEditingStyleDelete) {
        // Delete the row from the data source
        [arrData removeObjectAtIndex:indexPath.row];
        [tblView reloadData];
    }
    else if (editingStyle == UITableViewCellEditingStyleInsert) {
    // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
    }
}

Answer 1

I have seen this bug in Xcode 4.5. IB was connecting autolayout constraints with cell, not with cell's contentView. In Xcode 5 this problem has gone. You just need reconnect constraints if they was previously created in Xcode 4.5.

Answer 2

Below code is called when you user swipes a cell
So you can configure you cell contents as follows

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
cell.textLabel.textAlignment = NSTextAlignmentRight;

// set frames for all content you have got for that cell

UITableViewCellEditingStyle *style = UITableViewCellEditingStyleDelete;

return style;

}

Answer 3

Another useful way to overcome this issue is to handle these events:

tableView:willBeginEditingRowAtIndexPath
tableView:didEndEditingRowAtIndexPath

and set the appropriate frames for respective controls.

Hope it helps!

Answer 4

There are couple of things that you could do to fix it depending on how your code is structured. It is not clear to me from the code snippet provided as to how your custom nib file for the cell is getting used.

• First of all make sure that the images in your custom cell are not included as part of the accessory view. To understand more about creating custom table view cells, please go through the following link.

• Secondly, make sure that the UIView for your custom tableCell is of the same size as the table view content size in edit mode. You might need to reposition the image when edit is tapped. You can check when edit is happened by the following method:

  • (void)setEditing:(BOOL)editing animated:(BOOL)animated

That said, i would however stay away as much as possible from repositioning the items within a cell. If the cell was created properly with autoLayout and it displays nicely without the edit mode than it will automatically adjust itself in edit mode.Here is a link to read more about auto layout.

Answer 5

If you're using Autolayout in DeleteUserCell.xib
Look at your constraints and try doing a Editor->Reset to suggested constraints in Table View Cell. Try adjusting the frame of the cell to see what the cell will look like in edit mode.

If you're not using Autolayout in DeleteUserCell.xib
Have a look at your autoresizing masks for your cell subviews. Ensure that they will adjust their frames correctly when their superview changes.

Answer 6

You should add all of custom cell's subviews to not cell's view but cell's contentView.

If you make the custom cell by Interface Builder, you can find contentView of the custom cell in interface builder easily. Otherwise, if making it without Interface Builder, check UITableViewCell who has contentView property.

EDIT: FYI, check the following comment in UITableViewCell.

// If you want to customize cells by simply adding additional views, you should add them to the content view so they will be positioned appropriately as the cell transitions into and out of editing mode.
@property (nonatomic, readonly, retain) UIView      *contentView;

Answer 7

This may not help with the actual problem but I've spotted a few problems with your code.

Firstly this:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    int count = [arrData count];
    if(self.editing) [arrData count];
    return count;
}

Will always return the same value ? You might as well just have:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [arrData count];
}

Secondly you have:

DeleteUserCell *cell = (BlockedUserCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

You are creating a DeleteUserCell object but then casting it as a BlackedUserCell object ?

As for your actual question, when entering edit mode you need to manually move your subviews to compensate. Alternatively you can use auto layout which should do this for you but it is a little more work. There are plenty of auto layout tutorials on here and around the web. Here are a few to get you started:

http://commandshift.co.uk/blog/page/2/

This has a series of guides including one when using XIB's as you are doing.