ScrollView and AutoLayout

Learning AutoLayout, when it comes to ScrollView, a lot of people face full screen red error at a loss, why clearly before the constraints of the past has become a mistake.

For example, the following situation:

A blue UIView with a length-width constraint of 210,200 respectively. The top, left, and right spacing are 55. The location of this View is determined. No errors, no warnings.

But in the same way, there is a startling red error to Uiscrollview:

You can see the Storyboard error tip: ScrollView has ambiguous scrollable content height. What's the matter?

We know that Uiscrollview has a contentsize property that defines the size of the ScrollView scrollable content. When we used to write in plain code, we would assign a value to this property directly, and define its size. But under AutoLayout, Uiscrollview's contentsize is defined by the constraints of its content. Therefore, the constraints we set in ScrollView not only play the role of layout content, but also play a role in defining the ScrollView scrollable range.

For the above example, ScrollView know that it has a view, its height is 200, the distance is 55, but only through these two constraints no way to know the height of its contentsize, we are missing a definition View to ScrollView The constraint of the bottom distance.

We add such a constraint with a value of 55. Note that it looks a bit strange here, this constraint looks very long, but in fact its value is not large.

With this constraint, ScrollView can now get the height of its contentsize, that is, from the top to the distance of the View 55,view the height 200,view to the end of the Gap 55. The height of the contentsize is the number of these values: 310.

It is also important to mention that here we give the View a very explicit height constraint (200). Without this constraint, ScrollView is unable to get contentsize. However, for some controls, such as Uilabel,uiimageview, their size can be determined by their content.

In this case, we only need the upper and lower constraints. But sometimes, their content is decided by the runtime, such as Uiimageview, if its picture is dynamically downloaded from the server when the runtime, then we will put an empty Uiimageview, does not contain the displayed picture. Unfortunately, that's the wrong thing to do.

Because the picture is not defined, the size of the ImageView cannot be determined, so storyboard innocently throws an error.

Is there any more normal way to put a picture aside?

We can use a temporary placeholder size to tell storyboard that you are going to follow this size here. This placeholder size is only valid at the storyboard design stage and does not affect the size of the runtime.
By modifying the intrinsic Size to Placeholder, now the error is gone.

The use of AutoLayout is a process of making perfect, I believe everyone will encounter fullscreen warning when they try to use it at the beginning. Through multi-practice, this situation will be slowly improved and eventually avoided. It's cool when you're setting up a restraint and then clicking on the alt+cmd+= to see the layout of the controls exactly as you want them to.

ScrollView and AutoLayout