Use Autolayout layout in UIScrollView (2), uiscrollview

Use Autolayout layout in UIScrollView (2), uiscrollview

In the use of Autolayout layout in UIScrollView (1), we introduce a simple example where two controls using Autolayout layout are added to UIScrollView.

The reality is not just that simple.

We use UIScrollView, which usually requires a control that exceeds the screen size.

If you add many labels, TextField, or other controls according to step (1), what will happen?

The Autolayout Layout Engine warns that the contentSize width or height of UIScrollView cannot be calculated because of insufficient conditions.

 

This is because we violate the first principle: the contentSize of UIScrollView depends on subviews.

 

A large number of subviews use the Top constraint and Leading constraint. These constraints are relative to superview. What is superview? It is actually UIScrollView.

 

This makes the Layout Engine very contradictory. How to calculate the contentSize? To calculate the contentSize, you must be clear about the frame of each subviews, and the frame of subviews must depend on scrollView?

 

Therefore, the contentSize calculation condition is insufficient.

 

You can run the program regardless of the layout error. However, the contentSize cannot be calculated, and the UIScrollView cannot be rolled during running.

 

 

Therefore, when you find that UIScrollView cannot be rolled, it is often because we violate the first principle and cause the contentSize calculation error.

 

The correct steps are as follows:

 

1. Drag a UIScrollView.

2. Set UIScrollView constraints. For example, if the distance between top, bottom, left, and right of the Pin is 0, UIScrollView occupies the entire view.

3. Drag a UIView and name it contentView. Restrict the width and height of contentView so that it can meet your layout needs and place all the controls you want to place (usually larger than the screen size ). For example, width is equal to the width of ViewController's view, and height is equal to 800.

4. Next, it is important to set the Pin constraint of the UIView. The values are 0 on the top, bottom, and left. Why? The width and height are clearly set. Can't UIScrollView calculate the contentSize? Believe me, if you do not do this, I promise that your UIScrollView still cannot be rolled. These four Pin constraints are actually used to tell UIScrollView how big I will "hold up" your content. That is to say, contentSize must be determined based on the four sides of the UIView, rather than based on other methods. In this way, UIScrollView associates the four sides of contentSize with the four sides of UIView. If the four changes in the UIView change, you do not need to say that the UIScrollView will automatically adjust the contentSize.

5. The rest will not matter. You can layout your controls on this UIView. They can all be correctly laid out. For example, we put a Label (constraint: top, leading) in the upper left corner of UIView, and a Label (constraint: bottom, trailing) in the lower right corner ). Of course, these constraints are only related to contentView, but not UIScrollView. Otherwise, layout conflicts may occur.

 

You can feel relieved to see a chart:

 

Open the simulator and run the program. Only the first Label is displayed. Drag ScrollView to view the 2nd labels.