Remove white line next to reorder control on grouped UITableViewCell

Question

I've built a custom UI for my table that has a darker UI and a custom accessoryView. When I put the table into editing mode, there is a white line to the left of the reorder control that I can't seem to get rid of.

tableView:accessoryTypeForRowWithIndexPath: doesn't seem to be appropriate for getting rid of it since I'm not using a standard UITableViewCellAccessoryType, so I'm not sure of what I can do to get it to not show up on my cells.

_{(source: secondgearsoftware.com)}

Answer 1

What is happening is that when UITableViewCell shows the reorder control it also adds an empty, 1 pixel wide, white UIView to its array of subviews.

Bluntly: this is a bug that Apple should fix.

However, you can get around it by finding that annoying view every time it appears and setting its background color to transparent. Quick tip: the annoying white view is always the last in the UITableViewCell's subviews array and is always 1 pixel wide. We will use this to find it.

When you turn editing on for the table, make all of the visible annoying 1 pixel views transparent. So the action method which toggles "edit" mode on the table might look like this:

- (IBAction)edit:(id)sender
{
    [tableView setEditing:!tableView.editing animated:YES];

    for (UITableViewCell *cell in [tableView visibleCells])
    {
        if (((UIView *)[cell.subviews lastObject]).frame.size.width == 1.0)
        {
            ((UIView *)[cell.subviews lastObject]).backgroundColor =
                [UIColor clearColor];
        }
    }
}

and keep doing so for all new views as they become visible by implementing this in your UITableViewDelegate:

- (void)tableView:(UITableView *)tableView
    willDisplayCell:(UITableViewCell *)cell]
    forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (((UIView *)[cell.subviews lastObject]).frame.size.width == 1.0)
    {
        ((UIView *)[cell.subviews lastObject]).backgroundColor =
             [UIColor clearColor];
    }
}

This hack to fix the problem is fairly innocuous and if Apple fix the bug in future (stop adding the annoying 1 pixel view), this code should quietly stop doing anything.

Answer 2

No quick answer here, but can you determine what specific View is responsible for this white line?

One trick I use sometimes to "debug" these kinds of problems is to change the background colors of the Views that are the likely suspects. I might set the background color of the TableViewCell as well as its contentView to red or blue and see if you can change the color of the line. That will at least give you a clue as to the nature of the problem and maybe some ideas about how to solve it.

Answer 3

After trying the solutions from @matt-gallagher and @bryce, I combined the two and created an override of setEditing.

- (void)setEditing:(BOOL)editing animated:(BOOL)animated {

    [super setEditing:editing animated:animated];

    for (UIControl *control in self.subviews) {
        if (control.frame.size.width == 1.0f) {
            control.backgroundColor = [UIColor clearColor];
        }                
    }
}

Answer 4

You can actually catch the view and modify it while a cell is transitioned to the edit state. Add (and customize) this method override to your custom UITableViewCell.

- (void)didTransitionToState:(UITableViewCellStateMask)state
{
//modified from comments here:
//http://www.erasetotheleft.com/post/overriding-the-drag-reorder-control-in-uitableviewcell/

 if(state == UITableViewCellStateEditingMask)
 {
  for (UIControl *control in self.subviews)
  {
   // Find the Reorder Control
   if ([control isMemberOfClass:NSClassFromString(@"UITableViewCellReorderControl")] && [control.subviews count] > 0)
   {
    // Do something with the control
   }
  }
 }
}