iPhone UITableView - Delete Button

Question

I am using the \'swipe to delete\' functionality of the UITableView.

The problem is I am using a customised UITableViewCell which is create

Answer 1

Iwat's code doesn't work for me. But this works.

- (void)willTransitionToState:(UITableViewCellStateMask)state {

    [super willTransitionToState:state];

    if ((state & UITableViewCellStateShowingDeleteConfirmationMask) == UITableViewCellStateShowingDeleteConfirmationMask) {

        for (UIView *subview in self.subviews) {

            if ([NSStringFromClass([subview class]) isEqualToString:@"UITableViewCellDeleteConfirmationControl"]) {             

                subview.hidden = YES;
                subview.alpha = 0.0;
            }
        }
    }
}

- (void)didTransitionToState:(UITableViewCellStateMask)state {

    [super didTransitionToState:state];

    if (state == UITableViewCellStateShowingDeleteConfirmationMask || state == UITableViewCellStateDefaultMask) {
        for (UIView *subview in self.subviews) {

            if ([NSStringFromClass([subview class]) isEqualToString:@"UITableViewCellDeleteConfirmationControl"]) {

                UIView *deleteButtonView = (UIView *)[subview.subviews objectAtIndex:0];
                CGRect f = deleteButtonView.frame;
                f.origin.x -= 20;
                deleteButtonView.frame = f;

                subview.hidden = NO;

                [UIView beginAnimations:@"anim" context:nil];
                subview.alpha = 1.0;
                [UIView commitAnimations];
            }
        }
    }
}

Answer 2

I haven't been able to change the actual look of the delete button, but you can change the text. Perhaps you can use this to get the effect you are looking for?

Check out the following member of the UITableViewDelegate protocol:

- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath

Additionally, you can detect when the delete button is being displayed by subclassing UITableViewCell and overriding the the following:

- (void)willTransitionToState:(UITableViewCellStateMask)state
- (void)didTransitionToState:(UITableViewCellStateMask)state

For either of these, the state mask will be UITableViewCellStateShowingDeleteConfirmationMask when the delete button is being displayed.

Hopefully these clues will point you in the right direction.

Answer 3

I don't know of any way to "move the delete button 10px to the left". However, you can animate the custom contents of your table cell around the static position of the unmovable delete button by listening for the willTransitionToState: message from a UITableViewCell sub-class see here.

To quote the docs:

Subclasses of UITableViewCell can implement this method to animate additional changes to a cell when it is changing state. UITableViewCell calls this method whenever a cell transitions between states, such as from a normal state (the default) to editing mode. The custom cell can set up and position any new views that appear with the new state. The cell then receives a layoutSubviews message (UIView) in which it can position these new views in their final locations for the new state. Subclasses must always call super when overriding this method.

What you are looking for is the UITableViewCellStateShowingDeleteConfirmationMask value. This is one of those times where creating UITableViewCell subclass might be better, so from the controller you are just creating an instance of your custom cell. Then the cell can just adjust itself like animateLeft and animateRight and handle the inner workings of adjusting its own subviews.

Answer 4

For me the best way to solve this was overriding -(void)layoutSubviews in MyCell:UITableViewCell

Here you can see not only the Delete button custom position, but also repositioning the Edit and Reorder controls for Edit mode

- (void)layoutSubviews
{
    [super layoutSubviews];

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationBeginsFromCurrentState:YES];
    [UIView setAnimationDuration:0.0f];

    for (UIView *subview in self.subviews) {


        if ([NSStringFromClass([subview class]) isEqualToString:@"UITableViewCellDeleteConfirmationControl"]) { 
            CGRect newFrame = subview.frame;
            newFrame.origin.x = 200;
            subview.frame = newFrame;
        }
        else if ([NSStringFromClass([subview class]) isEqualToString:@"UITableViewCellEditControl"]) {             
            CGRect newFrame = subview.frame;
            newFrame.origin.x = 100;
            subview.frame = newFrame;
        }
        else if ([NSStringFromClass([subview class]) isEqualToString:@"UITableViewCellReorderControl"]) {             
            CGRect newFrame = subview.frame;
            newFrame.origin.x = 200;
            subview.frame = newFrame;
        }
    }
    [UIView commitAnimations];
}

Answer 5

I don't know the final solution, but as far as I tried the following code might be useful.

// subclass UITableViewCell

- (void)willTransitionToState:(UITableViewCellStateMask)state
{
    [super willTransitionToState:state];

    if ((state & UITableViewCellStateShowingDeleteConfirmationMask) == UITableCellStateShowingDeleteConfirmationMask)
    {
        for (UIView *subview in self.subviews)
        {
            if ([NSStringFromClass([subview class]) isEqualToString:@"UITableViewCellDeleteConfirmationControl"])
            {
                subview.hidden = YES;
                subview.alpha = 0;
            }
        }
    }
}

- (void)didTransitionToState:(UITableViewCellStateMask)state
{
    [super willTransitionToState:state];

    if ((state & UITableViewCellStateShowingDeleteConfirmationMask) == UITableCellStateShowingDeleteConfirmationMask)
    {
        for (UIView *subview in self.subviews)
        {
            if ([NSStringFromClass([subview class]) isEqualToString:@"UITableViewCellDeleteConfirmationControl"])
            {
                subview.frame = CGRectMake(subview.frame.origin.x - 10, subview.frame.origin.y, subview.frame.size.width, subview.frame.size.height);
                subview.hidden = NO;

                [UIView beginAnimations:@"anim" context:nil];
                subview.alpha = 1;
                [UIView commitAnimations];
            }
        }
    }
}

Answer 6

I use a solution that on first sight looks kind of hacky but does the trick and is not relying on undocumented apis:

/**
 * Transition to state
 */
-(void)willTransitionToState:(UITableViewCellStateMask)state {

    if(state & UITableViewCellStateShowingDeleteConfirmationMask)
        _deleting = YES;
    else if(!(state & UITableViewCellStateShowingDeleteConfirmationMask))
        _deleting = NO;
    [super willTransitionToState:state];

}

/**
 * Reset cell transformations
 */
-(void)resetCellTransform {

    self.transform = CGAffineTransformIdentity;
    _background.transform = CGAffineTransformIdentity;
    _content.transform = CGAffineTransformIdentity;
}

/**
 * Move cell around if we are currently in delete mode
 */
-(void)updateWithCurrentState {

    if(_deleting) {

        float x = -20;
        float y = 0;
        self.transform = CGAffineTransformMakeTranslation(x, y);
        _background.transform = CGAffineTransformMakeTranslation(-x, -y);
        _content.transform = CGAffineTransformMakeTranslation(-x, -y);
    }
}

-(void)setFrame:(CGRect)frame {

    [self resetCellTransform];
    [super setFrame:frame];
    [self updateWithCurrentState];
}

-(void)layoutSubviews {

    [self resetCellTransform];
    [super layoutSubviews];
    [self updateWithCurrentState];
}

Basically this shifts the cell position and readjusts the visible portions. WillTransitionToState just sets an instance variable indicating whether the cell is in delete mode. Overriding setFrame was necessary to support rotating the phone to landscape and vice-versa. Where _background is the background view of my cell and _content is a view added to the contentView of the cell, holding all labels etc.