Cannot show Delete button on tableviewcell ios 7

Question

I used UITableviewcellEditingstyleDelete to show button for user click on it to show delete button (it's the same way you can see on email app, when user click edit and then click on button to show the delete button). It's work fine in ios6 but when I build my app on device which have ios 7, the delete button is disappear, but when you tap in the delete button's area it's also can delete. The prolem is user cannot see the delete button (The button which have red color provide by OS). My code is:

- (UITableViewCellEditingStyle)tableView:(UITableView *)aTableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Detemine if it's in editing mode
    if (self.editing)
    {
       return UITableViewCellEditingStyleDelete;
    }

   return UITableViewCellEditingStyleNone;
}

please help me to find the solution, I'm not know much with iOS7 enviroment.Thanks!

Answer 1

An easy way to solve this problem is to make the delete confirmation button view as a front view. It can be done by implementing the delegate method layoutSubviews in customtableviewcell.m file.

In my case I solved it by just adding the following code into customtableviewcell.m file. It may be little different according to how the views are placed in your cell. But surely it will give you an idea about how to solve the problem.

- (void)layoutSubviews // called when a interface orientation occur ie. in our case when the '-' button clicks
{
[super layoutSubviews];

for (UIView *subview in self.subviews) { // Loop through all the main views of cell

   // Check the view is DeleteConfirmationView or not, if yes bring it into the front 
        if ([NSStringFromClass([subview class]) isEqualToString:@"UITableViewCellDeleteConfirmationView"]) { 

            [self bringSubviewToFront:subview];// code for bring the view into the front of all subviews

        }

    }
}

Answer 2

You do not need to check if the tableView is being edited...just implement:

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
       return UITableViewCellEditingStyleDelete;
}

Answer 3

It looks like one of the Bug from iOS 7. For some reason the backgroundView is moved by iOS over the delete button. You can work-around this by sub classing your backgroundView and implementing the setFrame function of your derived view like this :

UITableViewCell delete button gets covered up.

---

It may also happen when the accesoryView is specified and the editingAccessoryView is nil. Detailed explanation of this issue and solution is mentioned here :

UITableViewCell content overlaps delete button when in editing mode in iOS7.

Answer 4

Thanks all for your advice, and this solution can solved it, I make it into custom cell

 UIImageView* backgroundImage;

//Variable for animation delete button
// Keep the ContactView in normal state
BOOL bFirstEditingCell;
BOOL bShownRedMinus;
BOOL bShownDeleteButton;
CGRect frameOfContactViewInNormal;
CGPoint centerOfCellInNormal;
UITableViewCellAccessoryType accessoryTypeInNormal;

//

 - (id)initWithCoder:(NSCoder *)decoder
{
    if (self = [super initWithCoder:decoder])
    {
        super.backgroundColor = [UIColor clearColor];
        self.selectionStyle = UITableViewCellSelectionStyleNone;
        backgroundImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"row_gradient" ]];
        self.backgroundView = backgroundImage;
        bShownDeleteButton = false;
        bShownRedMinus = false;
        bFirstEditingCell = true;
        accessoryTypeInNormal = UITableViewCellAccessoryNone;
    }
    return self;
}


- (void)willTransitionToState:(UITableViewCellStateMask)state {
[super willTransitionToState:state];
if (!isOS7()) {
    return;
}

for (UIView *subview in self.subviews) {
    //Keep normal value of contact view and cell
    if (bFirstEditingCell   ) {
        frameOfContactViewInNormal = self->contactView.frame;
        frameOfContactViewInNormal.size.width = kContactViewWidth;
        centerOfCellInNormal = subview.center;
        bFirstEditingCell = false;
    }

    if (state == UITableViewCellStateDefaultMask) {
        self.backgroundView = backgroundImage;
        subview.center = centerOfCellInNormal;
        //Set for position of speed dial image
        CGRect f = frameOfContactViewInNormal;
        if (bShownRedMinus) {
            f.size.width -= kRedMinusButtonWidth;
        }
        self->contactView.frame = f;
        bShownDeleteButton = false;
        self.accessoryType = accessoryTypeInNormal;
    }
    else if (state == UITableViewCellStateShowingDeleteConfirmationMask)
    {
        float sectionIndexWidth = 0.0;

        if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
            sectionIndexWidth = 30.0;
        }
        else {
            sectionIndexWidth = 15.0;
        }
        CGPoint center = centerOfCellInNormal;
        subview.center = CGPointMake(center.x - sectionIndexWidth, center.y);
        self.backgroundView = nil;

        //Set width of contact name
        UIView* view = [subview.subviews objectAtIndex: 0];
        CGRect f = view.frame;
        f.origin.x = (kDeleteButtonWidth + sectionIndexWidth);
        view.frame = f;
        f = frameOfContactViewInNormal;
        f.size.width = self.frame.size.width - (kDeleteButtonWidth + sectionIndexWidth);
        self->contactView.frame = f;
        bShownDeleteButton = true;
        bShownRedMinus = false;
        accessoryTypeInNormal = self.accessoryType;
        self.accessoryType = UITableViewCellAccessoryNone;
    }
    else if (state == UITableViewCellStateShowingEditControlMask) {
        CGRect f = frameOfContactViewInNormal;
        f.size.width -= 5;
        self->contactView.frame = f;
        bShownRedMinus = true;
    }
    else if (state == 3) { //State for clicking red minus button
        CGRect f = frameOfContactViewInNormal;
        f.size.width += kRedMinusButtonWidth;
        self->contactView.frame = f;

        self.backgroundView = nil;
    }
}
}

Answer 5

Simpler Workaround

Assuming an iOS7 only app, with a technique similar to that linked in the post by Vin above, I believe the approach here: https://stackoverflow.com/a/19416870/535054 is going to be cleaner.

In this approach, you don't need to subclass your backgroundView, which could be different for different cells.

Place the code in the answer I've linked to above, in the root of your custom table cell hierarchy, and all of your table cells (that inherit from it), get the fix whenever they use the backgroundView or selectedBackgroundView properties.

Copy the solution from this gist: https://gist.github.com/idStar/7018104

Answer 6

Best way to remove this problem is that add an image in cell and set it in Backside.

      UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bgImg.png"]];
      imageView.frame = CGRectMake(0, 0, 320, yourCustomCell.frame.size.height);
      [yourCustomCell addSubview:imageView];
      [yourCustomCell sendSubviewToBack:imageView];

If your text would overlap the delete button then implement Autolayout. It'll manage it in better way.

One more case can be generate that is cellSelectionStyle would highlight with default color. You can set highlight color as follows

      yourCustomCell.selectionStyle = UITableViewCellSelectionStyleNone;

 Set your table cell's selection style to UITableViewCellSelectionStyleNone. This will remove the blue background highlighting or other. Then, to make the text label or contentview highlighting work the way you want, use this method in yourCustomCell.m class.

- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated
{
    if (highlighted)
        self.contentView.backgroundColor = [UIColor greenColor];
     else
        self.contentView.backgroundColor = [UIColor clearColor];
}

I hope it will help you to understand.