ScrollView and Autolayout, scrollview

ScrollView and Autolayout, scrollview

Learn Autolayout. When ScrollView is involved, many people are at a loss in the face of the error of full screen red. Why is it an error when the constraints that have been okay before are reached.

For example:

For a blue UIView, set its length and width constraints to 210,200. The spacing between top, left, and right is 55. In this way, the location of the View is determined. No error, no warning.

In the same way, there is a red error in UIScrollView:

The error message "ScrollView has ambiguous scrollable content height" is displayed. What is this?

We know that UIScrollView has a contentSize attribute, which defines the size of ScrollView's scrollable content. In the past, when writing with pure code, we will directly assign values to this attribute and define its size. However, in Autolayout, The contentSize of UIScrollView is defined by its content constraints. Therefore, the constraints we set in ScrollView not only play the role of layout content, but also play the role of defining ScrollView scrollable ranges.

For the above example, ScrollView knows that it has a View with a height of 200 and a distance of 55 from the top, however, we can't know the height of contentSize through these two constraints. We lack a constraint that defines the distance from the View to the bottom of ScrollView.

We add a constraint with a value of 55. Note that it looks a bit strange here. This constraint looks very long, but its value is not big.

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

In addition, here we give the View a very clear height constraint (200 ). Without this constraint, ScrollView cannot obtain the contentSize. However, for some controls, such as UILabel and UIImageView, their sizes can be determined by their content.

In this case, we only need the upper and lower left constraints. However, sometimes their content is determined during runtime, such as UIImageView. If the image is dynamically downloaded from the server during runtime, an empty UIImageView will be placed, does not contain the displayed image. Unfortunately, the mistake is coming again.

The size of the ImageView cannot be determined because no image is displayed, so the storyboard throws an error.

So there is no more normal way besides just putting an image on it?

We can use a temporary placeholder size to tell storyboard. Here you will follow this size. This placeholder size is only valid in the storyboard design phase and does not affect the runtime size.
By modifying the Intrinsic Size to Placeholder, the error is missing.

Autolayout is a well-developed process. I believe that everyone will encounter a full screen warning when trying to use it at the beginning. Through multiple practices, this situation will be gradually improved and eventually avoided. When you set constraints and press alt + cmd + =, you can see that the controls are completely arranged according to the style you want.