How to animate slide up UIView with AutoLayout?

Question

this is what i like:

I want to do a slide animation when a user can move UIView2 up and UIView2 stops halfway on the screen.

I know how to present a UIViewControler modally using a UIButton action, for example:

[self presentViewController:newController animated:NO completion:nil]; 

I also know that you need this type of code for animation:

 [UIView animateWithDuration:0.5f animations:^{ [self.customView layoutIfNeeded]; } completion:^(BOOL finished) { }]; 

However, I'm not sure how to achieve this using UIViews, especially since I use AutoLayout for my project, and I use restrictions to easily support multiple screen sizes.

How can I achieve this without breaking AutoLayout and the restrictions that I configured?

thanks

Answer 1

What I usually do in this situation is the following.

Add two limitations to your scene. One where UIView2 aligned to the bottom of UIView1 . The second is where it is centered on UIView1 (you need to ctrl + drag between views to add constraints accordingly). These restrictions first clash with each other, and that’s fine.

Add an IBOutlet to the view controller for NSLayoutConstraints and assign the two constraints that we created for these IBOutlet s.

Set the restriction priority for your initial condition to 999 (i.e., the restriction priority for bottom alignment should be 999). Set the restriction priority to restrict the assignment to 998 (i.e., the priority of the restriction on the center of alignment is 998). You will now see that these restrictions will no longer conflict. This is due to the fact that the priority of one restriction overrides another.

You can see where it is heading. Therefore, when you want to animate UIView2 between restrictions, change priorities and animate!

the code:

 @interface MyViewController () @property (nonatomic, weak) IBOutlet NSLayoutConstraint* constraint0; @property (nonatomic, weak) IBOutlet NSLayoutConstraint* constraint1; @end - (void)someMethodWhereIWantToAnimate { NSInteger temp = self.constraint0.priority; self.constraint0.priority = self.constraint1.priority; self.constraint1.priority = temp; [UIView animateWithDuration:0.3 animations:^{ // Simplest is to use the main ViewController view [self.view layoutIfNeeded]; }]; } 

To enable panning and use this to start the animation, add a panorama recognizer to your view controller. Ctrl + drag from UIView2 to Panorama Recognizer and set it as gestureRecognizer . Now when you drag and drop UIView2 , you will be able to receive panning events.

Add IBAction to handle panning:

 - (IBAction)onPan:(id)sender { } 

Ctrl + drag the panorama gesture pointer to the view controller and set onPan: as the submitted action.

sender is a sign of gesture recognition itself. That way, we can fill out this method to handle panning and UIView2 follow under the user's finger, and then initiate the animation when they release.

Let me start filling out the code:

 - (IBAction)onPan:(id)sender { UIPanGestureRecognizer* recognizer = (UIPanGestureRecognizer*)sender; CGPoint translation = [recognizer translationInView:self.view]; NSLog(@"State: (%d) Translation in view: (%f, %f)", recognizer.state, translation.x, translation.y); } 

If you run this code and drag your finger onto UIView2 , you will see the output as follows:

 State: (1) Translation in view: (0.000000, -2.500000) State: (2) Translation in view: (0.500000, -7.500000) State: (2) Translation in view: (0.500000, -7.500000) State: (2) Translation in view: (1.500000, -12.000000) State: (2) Translation in view: (2.500000, -16.500000) State: (2) Translation in view: (2.500000, -19.500000) State: (2) Translation in view: (2.500000, -24.500000) State: (2) Translation in view: (2.500000, -25.000000) State: (2) Translation in view: (2.500000, -25.500000) State: (2) Translation in view: (2.500000, -27.000000) State: (2) Translation in view: (2.500000, -29.500000) State: (2) Translation in view: (2.500000, -31.000000) State: (2) Translation in view: (2.500000, -31.500000) State: (3) Translation in view: (2.500000, -31.500000) 

Please note that the values ​​are constantly increasing. We need an incremental amount. Pay attention to the status in the log. State (1) - the beginning of the drag. State (2) is being dragged. State (3) is completed. Using this information, we can calculate the delta.

Add the CGPoint property to your view controller and add UIView2 as an IBOutlet:

 @property (nonatomic) CGPoint lastTranslation; @property (nonatomic, weak) IBOutlet UIView* uiView2; 

Finally, let's fill out the final form of our panning method:

 - (IBAction)onPan:(id)sender { UIPanGestureRecognizer* recognizer = (UIPanGestureRecognizer*)sender; CGPoint delta; switch(recognizer.state) { case UIGestureRecognizerStateBegan: // On state begin: delta is the translation. Store it in our member for later user. self.lastTranslation = delta = [recognizer translationInView:self.view]; break; case UIGestureRecognizerStateChanged: // On state changed: calculate the difference between the translation and our // previous translation. delta = CGPointApplyAffineTransform([recognizer translationInView:self.view], CGAffineTransformMakeTranslation(-self.lastTranslation.x, -self.lastTranslation.y)); self.lastTranslation = [recognizer translationInView:self.view]; break; case UIGestureRecognizerStateEnded: // On state ended: Let just do the constraint animation. [self someMethodWhereIWantToAnimate]; break; default: break; } delta.x = 0; // Forces only vertical drag on the UIView2. self.uiView2.center = CGPointApplyAffineTransform(self.uiView2.center, CGAffineTransformMakeTranslation(delta.x, delta.y)); // Move our uiView2 based on the delta. NSLog(@"State: (%d) Translation in view: (%f, %f)", recognizer.state, delta.x, delta.y); } 

That should suit you well. You might want to take a look at adjusting the UIView animation for its limitations a little depending on the gestures of the velocityInView: panorama, but I will leave this exercise away.