iOS 6: UITableView Edit and Autoresizing

Question

Hi Could someone please help me to understand how to layout table cell's components automatically while editing in iOS 6.0? I have set AutoLayout FALSE for UITableViewCell Autosizing option set to top right in Attributes Inspector! Cell's right side imageviews are overlapping by delete buttons. Please refer attached image. Following is the code for this. Is there anyway I can fix this issue?

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    PlayerCell *cell = (PlayerCell *)[tableView dequeueReusableCellWithIdentifier:@"PlayerCell"];
    Player *player = [self.players objectAtIndex:indexPath.row];
    cell.nameLabel.text = player.name;
    cell.gameLabel.text = player.game;
    cell.ratingImageView.image = [self imageForRating:player.rating];
    return cell;
}

- (UIImage *)imageForRating:(int)rating
{
    switch (rating)
    {
        case 1: return [UIImage imageNamed:@"1StarSmall.png"];
        case 2: return [UIImage imageNamed:@"2StarsSmall.png"];
        case 3: return [UIImage imageNamed:@"3StarsSmall.png"];
        case 4: return [UIImage imageNamed:@"4StarsSmall.png"];
        case 5: return [UIImage imageNamed:@"5StarsSmall.png"];
    }
    return nil;
}

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        [self.players removeObjectAtIndex:indexPath.row];
        [tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
    }     
}

I have added following delegate methods and it works fine when I swipe the cell.

-(void)tableView:(UITableView *)tableView willBeginEditingRowAtIndexPath:(NSIndexPath *)indexPath
{
    PlayerCell *cell = (PlayerCell *)[tableView cellForRowAtIndexPath:indexPath];
    cell.ratingImageView.hidden = YES;
}

- (void)tableView:(UITableView *)tableView didEndEditingRowAtIndexPath:(NSIndexPath *)indexPath
{
    PlayerCell *cell = (PlayerCell *)[tableView cellForRowAtIndexPath:indexPath];
    cell.ratingImageView.hidden = NO;
}

...but this methods doesn't get invoked when I press editButtonItem Button! That's strange! I am missing something. I have added following method that gets invoked when Edit/Done button pressed but there is no way to detect the cell that will be selected for editing!

- (void)setEditing:(BOOL)editing animated:(BOOL)animate
{
    [super setEditing:editing animated:animate];
    if(editing)
    {
        NSLog(@"editMode on");
    }
    else
    {
        NSLog(@"Done leave editmode");
    }
}

When user clicks left round button, is there anyway to add selector on that button click and get the cell index?

Answer 1

Your ratingImageView uses autoresizing masks to resize and position itself when you are not using AutoLayout. By default this means that the distance to the left and top is fixed and the size won't change.

When you toggle a cell to edit the contentView moved and resizes but your ratingImageView stays fixed to the top and left. You can visualize this by temporarily (for learning purposes) set a background color to the cells contentView and see how it resizes as you edit and delete the cell.

What you want is for your rating view to stay a fixed distance from the right edge instead of the left. You can either change this in InterfaceBuilder (where you do your XIBs or Storyboard) or in code by setting the autoresizingMask property of the ratingImageView.

---

Go to this tab

Change the autosizing like this

Or do it in code

// in code you specify what should be flexible instead of what should be fixed...
[ratingImageView setAutoresizingMask:UIViewAutoresizingFlexibleLeftMargin];