[New Learn] AutoLayout investigation

1. Introduction　

The AutoLayout is designed to solve the problem of display under different high-width screens, by adding constraints to the control to achieve the adaptive between different screens.

2. Problem generation and resolution

AutoLayout solves the adaptive problem of the control screen, what happens if there is no such technology? As applied to create two view under the 3.5-inch screen.

It is perfectly normal to run in a 3.5-inch simulator such as iphone4.

But what happens if we run it on the 6+ simulator? It seems that the gap between the blue block and the edge is getting bigger.

　　

The reason is that the traditional layout of the use of the coordinates, the control frame adheres to the coordinate values, regardless of the current device is what size, which causes the above phenomenon.

AutoLayout can solve this problem, AutoLayout through "constraints" to limit multiple view or their own layout relationship, so that the space free from the inherent coordinates of the binding.

3.autolayout Use---IB approach

In order for the layout to be able to behave normally on a size of different screens, we add "constraints" to it step-by-step

1. Set the remaining white of the two view and the respective edges to remain unchanged.

As a result, view can be laid out according to constraints on different screen sizes:

　　

The singular question came again, and it seemed that the gap between the two was enlarged, so we went again:

　　

2. The spacing between the constraints remains the same.

　　

As a result, it was found that the blue view was inconsistent with the reddish-brown view width, which was originally set to 100.

　　

The result is that we set the constraint so that the system stretches a view in order to maintain the constraint (the constraint cannot be completed without stretching)

　　

3. In order to solve this problem, we set the width of the two view to maintain a consistent constraint

　　

As a result, the width of the two is consistent, the interval constraints are observed, but it seems that the height of the deformation, the original is a square, and now become all rectangular.

　　

4. In order to solve this problem we need to constrain the length of the two view so that it remains at the current ratio of 1:1

　　

As a result, two view will maintain a 1:1 ratio of length to width.

　　

4. Constraint issues

1. Constraints lack of problems

With the above constraints, you will find some constraints, such as clicking on the red button will show the specific constraints:

　　

It shows that we have enough constraints in the landscape, but there is still no constraint in the vertical direction:

　　

We need to add constraints to the vertical, problem solving.

　　

　　

2. Constraint conflicts

If we hold the length and frame of the two size, it will inevitably conflict with the horizontal constraint, because the minutes keep the width constant, but also keep the margins and spacing distance is completely impossible, contradictory.

　　

As a result, when the application runs, the following error log appears:

　　

 .-Geneva- in  A: -:35.799testforsizeclassandlayout[690:15205] Unable to simultaneously satisfy constraints. Probably at least one of the constraintsinchThe following list isOne you don't want.Try This:         (1) look at each constraint andTryTo figure outwhich you don't expect;(2find the code that added the unwanted constraint or constraints and fix it. (    "<nslayoutconstraint:0x7fa070e347b0 h:[uiview:0x7fa070e342c0 (+)]>",    "<nslayoutconstraint:0x7fa070e34dc0 h:[uiview:0x7fa070e34c00 (+)]>",    "<nslayoutconstraint:0x7fa070e36490 h:|--[uiview:0x7fa070e342c0] (Names: ' | ': UIVIEW:0X7FA070E33F40) >",    "<nslayoutconstraint:0x7fa070e36530 h:[uiview:0x7fa070e342c0]-(-[uiview:0x7fa070e34c00]>)",    "<nslayoutconstraint:0x7fa070e365d0 h:[uiview:0x7fa070e34c00]-(20)-| (Names: ' | ': UIVIEW:0X7FA070E33F40) >",    "<nslayoutconstraint:0x7fa070e134e0 ' uiview-encapsulated-layout-width ' H:[uiview:0x7fa070e33f40 (375)]> ") would attempt to recover by breaking constraint<nslayoutconstraint:0x7fa070e34dc0H:[uiview:0x7fa070e34c00( -)]>Make a symbolic breakpoint @ uiviewalertforunsatisfiableconstraints toCatch  This inchThe debugger. The MethodsinchThe uiconstraintbasedlayoutdebugging category on UIView listedinch<UIKit/UIView.h>May also is helpful. .-Geneva- in  A: -:35.800testforsizeclassandlayout[690:15205] Unable to simultaneously satisfy constraints. Probably at least one of the constraintsinchThe following list isOne you don't want.Try This:         (1) look at each constraint andTryTo figure outwhich you don't expect;(2find the code that added the unwanted constraint or constraints and fix it. (    "<nslayoutconstraint:0x7fa070e347b0 h:[uiview:0x7fa070e342c0 (+)]>",    "<nslayoutconstraint:0x7fa070e36490 h:|-()-[uiview:0x7fa070e342c0] (Names: ' | ': UIVIEW:0X7FA070E33F40) > ",    "<nslayoutconstraint:0x7fa070e36530 h:[uiview:0x7fa070e342c0]-(-[uiview:0x7fa070e34c00]>)",    "<nslayoutconstraint:0x7fa070e365d0 h:[uiview:0x7fa070e34c00]-(20)-| (Names: ' | ': UIVIEW:0X7FA070E33F40) >",    "<nslayoutconstraint:0x7fa070e364e0 Uiview:0x7fa070e34c00.width = = uiview:0x7fa070e342c0.width>",    "<nslayoutconstraint:0x7fa070e134e0 ' uiview-encapsulated-layout-width ' H:[uiview:0x7fa070e33f40 (375)]> ") would attempt to recover by breaking constraint<nslayoutconstraint:0x7fa070e347b0H:[uiview:0x7fa070e342c0( -)]>Make a symbolic breakpoint @ uiviewalertforunsatisfiableconstraints toCatch  This inchThe debugger. The MethodsinchThe uiconstraintbasedlayoutdebugging category on UIView listedinch<UIKit/UIView.h> may also is helpful.

3. Wrong position

When we add a constraint to the control, this time accidentally changes the position of the control, there will be a hint of location error, the interface is prompted by the orange constraint line.

If we drag a view down a certain location:

　　

Because the constraints on Y are broken as you drag down, you can click to resolve the issue:

　　

When update frames is selected, the control is returned to the original frame position, and the current constraint is matched to the current control frame position when update constraints is selected.

Over, the above mainly explained the IB mode of AutoLayout constraints and conflict mode. The next file will be set in a code-based manner.

　　

　　

[New Learn] AutoLayout investigation