UITableViewCell subclass, drawn in code, animate Delete button in

Question

I'm working on a custom UITableViewCell subclass, where everything is drawn in code rather than using UILabels etc. (This is part learning exercise and partly because drawing in code is much faster. I know that for a couple of labels it wouldn't make a huge difference, but eventually I'll want to generalise this to more complex cells.)

Currently I'm struggling with the delete button animation: how to animate the cell shrinking as the delete button slides in.

Firstly, I am drawing in a custom subview of the cell's contentView. Everything is drawn in that one subview.

I am setting the subview's size by catching layoutSubviews on the cell itself, and doing:

- (void)layoutSubviews
{
    [super layoutSubviews];
    CGRect b = [self.contentView bounds];
    [subcontentView setFrame:b];    
}

I'm doing this rather than just setting an autoresizing mask because it seemed more reliable in testing, but I can use the autoresizing mask approach in testing if needed.

Now, the default thing that happens when someone hits the minus is the view gets squished.

I can avoid that by, when setting up my cell, calling

subcontentView.contentMode = UIViewContentModeRedraw;

That gives me the correct end result (my custom view redraws with the new size, and is laid out properly, like the first image I posted), but the animation of the transition is unpleasant: it looks like the cell stretches and shrinks back to size.

I know why the animation is working like that: Core Animation doesn't ask your view to redraw for each frame, it gets it to redraw for the end position of the animation and then interpolates to find the middle bits.

Another solution is to do

subcontentView.contentMode = UIViewContentModeLeft;

That just draws the delete button over my cell, so it covers part of it.

If I also implement

- (void) didTransitionToState:(UITableViewCellStateMask)state
{
    [self setNeedsDisplay];
}

then once the delete button has slid in the cell 'jumps' to the correct size. That way there's no nice slidey animation, but at least I get the correct result at the end.

I guess I could run my own animation in parallel with the delete button appearing, temporarily creating another view with a copy of the image of my view in the old size, setting mine to the new size, and fading between them — that way there would be a nice cross fade instead of a sharp jump. Anyone use such a technique?

Now, you might ask why I can't use the contentStretch property and give it a region to resize. The problem with that is I'm making something to be reasonably generic, so it's not always going to be possible. In this particular example it'd work, but a more complex cell may not.

So, my question (after all of this background) is: what do you do in this situation? Does anyone have the animating delete button working for custom drawn cells? If not, what's the best compromise?

Answer 1

This worked for me finally. in subclass of UITableViewCell

subDrawContentView.contentMode = UIViewContentModeLeft;

overide layout subviews method

- (void)layoutSubviews {

    CGRect b = [subDrawContentView bounds];
    b.size.width = (!self.showingDeleteConfirmation) ? 320 : 300;
    [subDrawContentView setFrame:b];
    [subDrawContentView setNeedsDisplay];

    [super layoutSubviews];
}