Animating/Moving views under usage of Autolayout
I want to move a view from one postion to another, I can implement it using
self.view.center = CGPointMake(100, 200);
however, if the project is using Autolayout, then the view will be back to original position after running:
[self.view.superview setNeedsLayout];
then how to actually move a view to new position?
With AutoLayout
enabled, we should FORGET FRAMES
and only CONSIDER CONSTRAINTS
.Yes, for animating also you can no longer change the frame or center, view's will revert back to their original position when layout is called.
Instead you should consider changing the constant value of the constraint
to get the same effect.
Consider a User Interface like the image given below.I have a image view with a 20 points leading space from it's superview
that means it has a horizontal space constraint with it's superview.Also I have three more constraints attached to that image view, top, width and height.
I will show you how we can animate the image from left to right as shown in the image.
Create IBOutlet's for the constraint's we need to animate.Here we are taking only horizontal space constraint, that is enough to move this view from the left to right.
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *horizontalSpaceConstraint;
Inside Go Away
action, we need to update the constant value of this constraint.
- (IBAction)moveFrontAction:(id)sender {
self.horizontalSpaceConstraint.constant = 220;
[UIView animateWithDuration:0.5 animations:^{
[self.imageView layoutIfNeeded];
}];
}
Now the view should be moved to the right end.I'm just doing that inside a animation block so we will be able to see a nice animation from left to right and vice versa.In Production, we should not hard code the values like this.Just doing it here to make the concept clear.
Inside the Come Back
action, we are again resetting the constant back to it's original value, so you can see the orange image animating back to the original location.
- (IBAction)moveBackAction:(id)sender {
self.horizontalSpaceConstraint.constant = 20;
[UIView animateWithDuration:0.5 animations:^{
[self.imageView layoutIfNeeded];
}];
}
You must change the constraints if you are using autoLayout. The way that is suggested is to make an outlet in your view controller of the constraint, then you change the constant of the constraint. If you have the time i would definitely recommend going here and watching "Auto Layout by Example" or "Best Practices for Mastering Auto Layout". They helped me out a lot. I guess the point to take away is that with autoLayout, you no longer think in terms of frames. So setting the center just doesnt work with auto layout. It's all about how views are related to each other.