Why when I change the image of the UIImageView while panning the cell does the whole view reset for a second?

Question

Here's a video of it happening:

http://cl.ly/3V0D3U1m3w0E

Basically, if I change the image property of the UIImageView (the X) while I'm panning it brings all the controls in the view back to their original, unpanned position. (They're all embedded in a UIView so I can "pan the cell", while the UIImageViews are outside of the view and independent.)

If I don't change the image:

http://cl.ly/3T1N1G33320G

For the record, I change the image when it the user pans a certain amount, I believe 80 points.

Here's the code:

// Only allow the cell to be moved 100 pixels left or right
if (xPos <= 100 && xPos >= -100) {
    // Move our cell to the xPos we defined
    CGRect slidingViewFrame = self.slidingView.frame;
    slidingViewFrame.origin = CGPointMake(xPos - 100, 0);
    self.slidingView.frame = slidingViewFrame;

    if (xPos >= 80) {
        if (_removeIconIsActive == NO) {
            // Change remove icon to a red, active state and animate the change
            self.removeIconImageView.image = [UIImage imageNamed:@"remove-icon-active.png"];

            _removeIconIsActive = YES;
        }

        CGRect removeIconFrame = self.removeIconImageView.frame;
        removeIconFrame.origin = CGPointMake(40, 35);
        self.removeIconImageView.frame = removeIconFrame;
    }
}

The views are set up in the storyboard, but the movement and manipulation is all done in code.

Here's the storyboard layout:

And here's the full method that handles the cell panning: https://gist.github.com/anonymous/c51c7cb2997c89094f08

Answer 1

If you are using Auto Layout you should not be modifying the frame property at all. The frame is the result of applying the layout constraints, not a “write” property.

I suppose that you will have a constraint setting the x position of your views. Create an IBOutlet for that constraint, and instead of modifying your frame, modify the constant property of the constraint. Then call to layoutIfNeeded of the view.

Without seeing more about your views, constraints and outlets, I cannot give you final code, but you will end with something like this:

self.leftConstraint.constant = xPos - 100.f;
[self.slidingView setNeedsUpdateConstraints];
[self.slidingView layoutIfNeeded];

My interpretation of what is happening is that setting the image changes the intrinsic size of the image view, which makes the constraints recalculate themselves, snapping everything back to the starting position. As soon as you slide another pixel, your kicks in again, and the frame property wins again.

Hope it helps.