Perform UIView background color animation simultaneously with UITableView beginUpdates/endUpdates animation

Question

I have a table view cell and when tapped it will:

animate it's height (so I need a beginUpdates/endUpdates call)
animate the alpha of a subview

When I have beginUpdates/endUpdates call, the cell animates it's height perfectly, but the alpha of the subview keeps "jumping" to the target value without animating. When I remove beginUpdates/endUpdates and try to animate the alpha regularly, it animates well, but this time I don't have the cell expanding height animation.

Here is my code:

-(void)handleTap{
    isExpanded = !isExpanded;
    if(isExpanded){
        self.heightConstraint.constant = SCREEN_WIDTH;
    }else{
        self.heightConstraint.constant = CLOSED_HEIGHT;
    }
    ULFeedView *feedView = [self nearestAncestorOfClass:[UITableView class]];
    float faderTargetAlpha = isExpanded ? 0 : 1;
    self.opaque = NO;
    self.contentView.opaque = NO;
    self.fader.opaque = NO;


    [feedView beginUpdates];
    [UIView animateWithDuration:0.5 animations:^{
        self.fader.alpha = faderTargetAlpha;
    }];
    [feedView endUpdates];
}

(I think variable and method names are self explanatory, ULFeedView is my custom table view class, and the code is in the custom cell class)

I've tried animating the height constraint of my cell like I do with other views (UIView animateWith... layoutIfNeeded method): no luck.
I've tried moving the alpha animation between beginUpdates and endUpdates no luck.
I've tried using different animation methods (animate with duration/delay etc), no luck.
I've tried setting opaque to NO explicitly (following my own answer https://stackoverflow.com/a/27680493/811405 on another question), no luck.
I've tried with different Opaque, Clears Graphic Context, Clip Subviews settings, they don't seem to change anything at all.

Also, some interesting observations:

The (only) subview of the view animates it's alpha correctly.
When I'm setting the alpha from 1 to 0, the background color of the view that I'm animating jumps from 1 to 0 at the beginning of the animation.
When I'm setting the alpha from 0 to 1, the background color of the view that I'm animating jumps from 0 to 1 at the end of the animation.
I've tried setting a background color on the subview of the view that I'm animating too, and the above observations apply.

Why would this happen and how I do I animate both the background color of the view and the cell height at the same time? (I am targeting ≥ iOS 8.0)

Can Poyrazoğlu Can Poyrazoğlu · Accepted Answer · 2016-09-11T07:34:28

Okay, after investigating a little bit, I've came up with a solution:

Seems that background colors don't play well with table view animations. Table view updates seem to mess up everything about background colors of any views inside the cell.

I've subclassed UIView and added a custom property called fade color (I could actually also use background color but I wanted to completely move away from it):

IB_DESIGNABLE
@interface ULFaderView : UIView

@property IBInspectable UIColor *fadeColor;

@end

I've set the fade color on Interface Builder. And in code I've implemented custom drawing:

@implementation ULFaderView

- (void)drawRect:(CGRect)rect {
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextClearRect(ctx, rect);
    CGContextSetFillColorWithColor(ctx, self.fadeColor.CGColor);
    CGContextFillRect(ctx, rect);
}

@end

And it renders a background perfectly, duplicating the background color behavior. Yet as it's not the "background color property" which table view messes up, it doesn't conflict with any animations and acts as a "solid bitmap whatever content inside the view". Animating the alpha now works smooth as ever, while the table view also animates the height at the same time.

Perform UIView background color animation simultaneously with UITableView beginUpdates/endUpdates animation

1 Answers