How to add an animation and autolayoutuiview to the UIView using autolayout

How to add an animation and autolayoutuiview to the UIView using autolayout

When we use autolayout to automatically layout A UIView, it means we give up.

Traditionally, You can manually modify and determine the position and size attributes of a view by setting its frame.

Even to some extent, we should forget the frame attribute of the view: its confirmation no longer depends on me.

(Manual modification), but through the constraints we provide in the storyboard or code

(Constraints), through an Automatic Layout Engine (Apple uses Cassowary for autolayout)

Layout Engine, Reference Document: Click to open the link) to calculate the frame of this view. So we can

The frame attribute of the view that uses autolayout is a read-only attribute. Changes in the code

The frame of this view does not have a real effect on the frame of this view (this is also true ).

Now the problem arises. In the past, we often used modifications to a view frame to generate a view movement.

In the view world of autolayout, how can we achieve the same effect?

The answer is, we will calculate it as needed. By changing a constraint on this view

Layout is triggered in the animation block.

I. Expected results

The following is a simple example:

As shown in, autolayout is used throughout the interface. Now we want to achieve this effect:

When we click the "display birthday" button, the entire view slides up and a date is pushed up.

The selector (date picker) is similar to clicking textfield. After the keyboard pops up, the whole interface is displayed to avoid being masked.

The effect of moving up. After selecting the completion date, click the "birthday date" button or the "finish" button

Scale down, And the date picker slides down to the visible range.

II. Implementation Details

First, let's take a look at the hierarchical structure of the view in the storyboard: As shown in, we can

The layout of the entire view is quite simple. There are two levels: the root view and our date picker view.

The date picker view contains a completion button and a system date picker. In this case

The whole view and date picker view move up at the same time, we only need

The view can be animated at the same time.

Consider how to achieve the animation effect of the Root view. Here we can skillfully modify the Root view

The bounds attribute enables the Root view to move up. Note that we need to understand the bounds attribute of the view.

Compared with the frame attribute, the former is relative to the local coordinate system of the current view, while the latter is relative

For the coordinate system of the parent view of the current view.

In short, frame determines the position and size information of a view relative to the parent view. While

Bounds determines the position of the content displayed in the current view relative to the local coordinate system. Here we will view

Its own visual content and subviews can be viewed as the content information on a page, while the view itself can be viewed

Is a magnifier placed on paper. The magnifiers are not necessarily the same size as the content size.

. The bounds attribute is used to determine the position of the magnifier relative to the paper: A bounds =

(0,200,300,300) It means we want to move this magnifier to the bottom of the paper 200 points,

The position of the magnifier remains unchanged from that of the parent view. This gives us the effect of this view (

200 points are moved up.

Modifying the origin attribute of bounds does not change the frame of the view.

Moving creates an illusion that the view moves up. For example, "which location..." is becoming us

The first line shown in the magnifier.

The result of moving the painting on the Root view is solved. Next let's look at the date picker

Storyboard has the following constraints: fixed height of 207, trailing/leading/top relative to super

The location of the view (Root view.

The constraint for determining whether the date picker view is to move up or down in the Y axis is obviously the top constraint. Click the top constraint,

You can see the details of this constraint:

A constraint can be described as: firstItem. attributeA = secondItem. attributeB * multipler

+ Constant.

In combination, we can conclude that the top constraint of date picker view is

DatePickerView. Top = topLayoutGuide. bottom X 1 + 400

We can modify this top constraint by modifying the constant value here to achieve the expected effect.

Add a new constraint by modifying instead of deleting the old constraint, which is also recommended by Apple,

The NSLayoutConstraint. h header file is described as follows:

In this way, the top constraint of the date picker view can be obtained and modified to move it up and down.

Note that the top constraint for obtaining datepicker view in the Code is actually in the parent view.

Queries in the constraints array. This is because what is saved in the constraints array of each view is

A set of constraints required by the layout subview.

We also need to define an auxiliary BOOL variable. We have determined whether the date picker view is popped up:

<span style="font-size:18px;">@property (nonatomic, assign) BOOL hasShowPickerView;</span>

Next, define an auxiliary function to find the top constraint of the date picker view and modify it.

The constant attribute is a given value:

- (void)replacePickerContainerViewTopConstraintWithConstant:(CGFloat)constant{    for (NSLayoutConstraint *constraint in self.pickerContainerView.superview.constraints) {        if (constraint.firstItem == self.pickerContainerView && constraint.firstAttribute == NSLayoutAttributeTop) {            constraint.constant = constant;        }    }}

In the code

In the constraints attribute of superview, if the firstItem and firstAttribute attributes are

Date picker view and top, the constraint is the target constraint, and then its constant attribute is modified.

When the view is loaded for the first time, we want to ensure that the date picker view is at the bottom of the entire view, that is, hidden.

Therefore, we can call the auxiliary method to modify the viewDidLoad method of viewcontroller.

Top constraints of date picker view:

<span style="font-size:18px;">[self replacePickerContainerViewTopConstraintWithConstant:self.view.frame.size.height];</span>

When you click the birthday button for the first time, the animation changes the bounds and date picker of the Root view.

View top constraint, pay attention to the calculation of moving up gap. When you click the birthday button again

The bounds of the view is restored to the normal value, and the top constraint of the date picker view is also restored to viewDidLoad.

Value set in:

<span style="font-size:18px;">- (IBAction)didTapOnBirthdayButton:(id)sender{    self.hasShowPickerView = !self.hasShowPickerView;    if (self.hasShowPickerView) {        CGRect birthdayButtonFrame = self.birthdayButton.frame;        birthdayButtonFrame = [self.view convertRect:birthdayButtonFrame fromView:self.birthdayButton.superview];        CGFloat birthdayButtonYOffset = birthdayButtonFrame.origin.y + birthdayButtonFrame.size.height;        CGFloat gap = birthdayButtonYOffset - (self.view.frame.size.height - self.pickerContainerView.frame.size.height);        CGRect bounds = self.view.bounds;        if (gap > 0) {            bounds.origin.y = gap;        } else {            gap = 0;        }        [self replacePickerContainerViewTopConstraintWithConstant:birthdayButtonYOffset];        [UIView animateWithDuration:0.25 animations:^{            self.view.bounds = bounds;            [self.view layoutIfNeeded];        }];    } else {        [self replacePickerContainerViewTopConstraintWithConstant:self.view.frame.size.height];        CGRect bounds = self.view.bounds;        bounds.origin.y = 0;        [UIView animateWithDuration:0.25 animations:^{            self.view.bounds = bounds;            [self.view layoutIfNeeded];        }];    }}</span>

It is okay to remove [self. view layoutIfNeed] from the above Code. What may be confusing is:

Calculation of the Upper-shift gap of the Root view. bounds. origin. y and the calculation of the constant value of the top constraint,

The key is to really understand the significance of the view frame and bounds.

So far, the program has achieved the expected results.

Iii. Summary

Before using autolayout, we wrote the program control interface, which is like opening a manual steam

Although frequent shift (frame modification) is cumbersome, you can also enjoy the kind of car with full control

Feel free. After autolayout is used, it will be upgraded to an automatic car at once, and switching the shift is no longer

Instead, we can only indirectly change the vehicle's gear position through the size of the gas pedal (constraints. In

In an automatic car, we must give up the idea of directly controlling the gear. That's impossible. We must

Learn to control the speed by mastering the accelerator and brakes at your feet! After getting used to automatic transmission, I believe everyone will

You can do what you want with ease.

How to implement animation when using AutoLayout

Remove the constraint first, then add the constraint, and then layoutIfNeeded
 
Can multiple UIView animations be executed simultaneously?

You can use CABasicAnimation to perform Cocos2D animation for CALayer or layer-based animation.