Animate UIImageView from center to 20 points from the top of parent UIView using AutoLayout

Question

The animation by itself works when I use a constraint on the distance between the UIImageView and the top of the parent UIView without vertical and horizontal centering.

The constraints on the UIImageView:

• Width: 240
• Height: 128
• Top space to Top Layout: 200 --> connected to logoImageViewVerticalSpaceConstraint

The animation works great when I use this:

self.logoImageViewVerticalSpaceConstraint.constant = 20;

[UIView animateWithDuration: 1.0
                      delay: 0
                    options:(UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionAllowUserInteraction)                     
                 animations:^{[self.logoImageView layoutIfNeeded];}
                 completion:^(BOOL finished) {NSLog(@"Finished animation"); }];

The issue kicks in when I don't want to use a static space to top layout constraint because the imageview needs to be centred for 3.5 and 4 inch devices. To solve this I thought starting off with a vertical and horizontal center constraint.

• Width: 240
• Height: 128
• Align center x to: superview --> connected to logoImageViewYCenterConstraint
• Align center y to: superview

Now I thought I could simply remove the y center constraint and adding the space to top layout constraint of 20pt myself:

[self.logoImageView removeConstraint:self.logoImageViewYCenterConstraint];

NSLayoutConstraint *topSpaceConstraint = [NSLayoutConstraint  
constraintWithItem:self.view                                                                         attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual                                                                                    toItem:self.logoImageView
attribute:NSLayoutAttributeTop                                                                                multiplier:1
constant:20];
    [self.view addConstraint:topSpaceConstraint];

    [UIView animateWithDuration: 1.0
                          delay: 0
                        options:(UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionAllowUserInteraction)                     
                        animations:^{
                           [self.logoImageView layoutIfNeeded];
                        }
                        completion:^(BOOL finished) { 
                           NSLog(@"Finished animate"); 
                        }];

The result is that the UIImageView stays centred and it blows up a bit. Which is the total opposite of what I expect to happen because I removed the x center constraint. Added the top constraint with distance 20pt to the top of the parent UIView and I did not touch any other constraints (like the width and height).

Answer 1

An NSLayoutConstraint has one or two views that it constrains. In your case, the views are self.logoImageView and self.view .

To have any effect, the constraint must be installed on a view, and not just any view. The constraint must be installed on a common ancestor of both constrained views . (Note that a view is considered to be an ancestor of itself.) And when you remove a constraint, you must remove it from the view on which it is installed .

You're trying to remove the centering constraint from self.logoImageView , but the constraint can't have been installed on that view.

As of iOS 8.0, the preferred (and easiest) way to uninstall a constraint is to set its active property to NO :

self.logoImageViewYCenterConstraint.active = NO;

Prior to iOS 8.0, you have to remove it from the view where it's installed. The constraint is probably installed on self.view . So try this instead:

[self.view removeConstraint:self.logoImageViewYCenterConstraint];

Note also that if you want to animate the image view back to the center, you'll need to uninstall topSpaceConstraint and reinstall self.logoImageViewYCenterConstraint .

A different way to handle this is to install both constraints simultaneously, but give one of them a lower priority. When you need to change the position of the image view, change the priorities of the constraints. Thus:

- (void)viewDidLoad {
    [super viewDidLoad];
    if (self.topSpaceConstraint == nil) {
        self.topSpaceConstraint = [NSLayoutConstraint constraintWithItem:...];
        self.topSpaceConstraint.priority = 1;
        [self.view addConstraint:self.topSpaceConstraint];
    }
}

- (void)setImageViewCenteredVertically:(BOOL)isCentered animated:(BOOL)animated {
    if (isCentered) {
        self.topSpaceConstraint.priority = 1;
        self.logoImageViewYCenterConstraint.priority = UILayoutPriorityRequired;
    } else {
        self.topSpaceConstraint.priority = UILayoutPriorityRequired;
        self.logoImageViewYCenterConstraint.priority = 1;
    }

    if (animated) {
        [UIView animateWithDuration:1 delay:0
            options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
            animations:^{
                [self.view layoutIfNeeded];
            }
            completion:nil];
    }
}

Answer 2

I'm not really a master of NSLayoutConstraints , but either you should add the constraint to the logoImageView object or you should change the constraintWithItem: parameter because to me something looks strange right now. You're removing a constraint from the imageView, then adding a constraint to the self.view object which refers to self.view item