AutoLayout constrained animation-animating AutoLayout Constraints

• Original: Animating AutoLayout Constraints

• @kharrison

• Translator: cocoachina--A very difficult name (CC forum ID)

• Starter: Cocoachina

recorded in late spring 2015: five days from the last posting, I looked at the feedback from my colleagues, and I put this code back together to avoid adding or removing constraints at run time. Instead of these cumbersome methods like Java, I began to dynamically change the precedence of the yellow and blue view constraints. Super simple, super efficient.

Before AutoLayout, if you want to move a view,frame will send his two little brother origin or size to yell at you @ "You move me to try!" "。 Of course, frame, bounds, and center are all properties of UIView, so when you really move them, UIView will not forget. So you know why users can see a series of animations, UIView want to cut you.

If you start using AutoLayout, you'll soon find that you don't have to deal with frame (or bounds or center) yourself. You can call it a restraint. This article is a simple chestnut that tells you how to do something with restraint. Well, it's exactly a simple animated effect.

Challenge

To be straightforward, we only use two views. A yellow view (hereinafter referred to as the yellow chart) and a Blue view (hereinafter referred to as the blueprint). In "normal" mode, we only see HUANGTU. In "Colorful" mode, we only see HUANGTU.

View...

Feed Why all only see HUANGTU Ah! "

"Obviously only two kinds of color is called colorful what is really good!" "

"You have to leave a seed!" "

Ah, sorry, light attention to the yellow map. In "Colorful" mode, we see HUANGTU and blueprint two. These views should fill the entire screen, in addition to the edge of the device and the box that the switch occupies. The following GIF is the effect we want to achieve.

The blueprint should slide out on the right, then the yellow graph fills the screen accordingly ...

Set Basic constraints

At first, I dragged the view on IB and pulled the constraint. Both views are visible at this time.

HUANGTU has five constraints: the left side is relative to the parent view interval, the right relative to the blueprint interval, the top relative to the switch interval, the bottom relative to the parent view interval, and the blueprint width are equally constrained.

Blueprints are almost as constrained as HUANGTU, except that the blueprint is the right relative to the parent view interval.

Non-mandatory constraint precedence

When only Huangtu is visible (really good), we need to add another constraint, which is the interval constraint to the right relative to the parent view. If I add this constraint above, then he conflicts with that "right relative blueprint constraint" because they both have priority 1000. To avoid conflict and move the blueprint, we can change the precedence of the constraint on the yellow blueprint interval.

The required constraint priority is this uilayoutpriorityrequired (1000), and you cannot change the priority of a required constraint at run time. The priority is smaller than uilayoutpriorityrequired, which is an optional or non-mandatory constraint, similar to this, as long as you do not set the priority to uilayoutpriorityrequired, you can change.

So first, let's lower the priority of the right side of the blueprint relative to the parent view constraint to 750.

We then add a constraint to the yellow graph to its right relative to the parent view (as mentioned above), and the priority is 750.

Drag the Restraints out!

To change the right side of the blueprint at run time we have to drag this constraint into the code first. You can also drag arbitrary constraints like this. (Just like the control is associated with the code, check the constraint and press CTRL + drag)

@property (Weak, nonatomic) Iboutlet nslayoutconstraint *blueviewconstraint;

To make sure we get the blueprint out of the screen, we also have to adjust the interval constraint between the HUANGTU and the blueprint, so we put this constraint in the code as well.

@property (Weak, nonatomic) Iboutlet nslayoutconstraint *viewspacingcontraint;

Update constraint

It is now easy to write a method to set the blueprint constraint to the desired priority based on the mode switch.

-  (void) updateconstraintsformode {  if  (self.modeSwitch.isOn)  {    self.viewSpacingContraint.constant = 8.0;     self.blueviewconstraint.priority = uilayoutprioritydefaulthigh+1;  } else {     self.viewSpacingContraint.constant = self.view.frame.size.width;     self.blueviewconstraint.priority = uilayoutprioritydefaulthigh-1;  }} 

We also set the precedence Uilayoutprioritydefaulthigh (750) for the constraint on the right side of Huangtu relative to the parent view in storyboard. To make the blueprint visible, we need to set the right constraint priority of the blueprint higher than 750, and we have to set it lower when we hide the blueprint.

Please note! Look at the blackboard! We're going to set a large value for the interval of the yellow blueprint (the width of the screen I use here) to make sure the blueprint is pushed to the right edge.

We should also configure the constraints when the view is first loaded. Favoritism is not good.

-(void) Viewdidload {//... [Self updateconstraintsformode];}

Move it!

Now everything is ready only owed the East wind, we now only need to gently toggle the mode switch, eh? Gently, eh? Ah sorry, forget to write the event code of the switch--Apple's Auto Layout Guide describes the basic method of AutoLayout, the recommended code is as follows:

[Containerview layoutifneeded]; [UIView animatewithduration:1.0 animations:^{//Make all constraint changes here [Containerview layoutifneeded];}];

These two calls to layoutifneeded force the action to be performed, and then capture the frame changes in the animation block.

( Translator added : Think of the one who answered what fucked-up code you saw in the company project? )

if (m_doc->ismodified () = True) {for (int i = 0; i <; i++) {save];//save the document for    IMEs to ensure it has been saved successfully. }}

In our pest with the above method, this is the formula:

-(Ibaction) Enablemode: (Uiswitch *) Sender {Nsuserdefaults *defaults = [Nsuserdefaults standarduserdefaults];  [Defaults setBool:sender.isOn Forkey:modeuserdefaultkey];    [Defaults synchronize];  [Self.view layoutifneeded];    [UIView animatewithduration:1.0 animations:^{[self updateconstraintsformode];  [Self.view layoutifneeded]; }];}

Summarize

code here, dot me dot me.

AutoLayout constrained animation-animating AutoLayout Constraints