Use Autolayout layout in UIScrollView (1), uiscrollview

Use Autolayout layout in UIScrollView (1), uiscrollview

I have translated how to use UIScrollView (multiple contentviews) in AutoLayout (hereinafter referred to as "how"). This article explains in detail the restrictions and precautions for using automatic layout in UIScrollView.

I thought it was clear. However, some readers still say that the examples in this article are feasible, but they cannot achieve the same effect on other interfaces.

This may be because the examples in this article are too complex, so that some readers can understand the results and follow the steps in this article, but because they do not really understand the original intention in this article, once you leave the example to implement your UI, it will be difficult.

We also give a simple example to fully understand the basic principles used by UIScrollView in Autolayout.

There are many principles listed in the description, but there are only two fundamental principles:

 

Principle 1: The size of UIScrollView depends on subviews.

 

First, drag a UIScrollView into the canvas. Use the Pin button to set the layout at will. You do not even need to set it.

 

Because the first principle in "how" is that the layout of UIScrollView depends on subviews. Therefore, it is useless to set the layout constraints of UIScrollView. We only need to clarify the size of subviews. This principle is naturally not a problem.

 

The size (contentSize) of UIScrollView is calculated based on the size occupied by subviews. Of course, if the content of contentSize is insufficient to cover the whole UIScrollView, the scroll bar will not appear and the UIScrollView will not scroll.

 

Principle 2: The size of subviews cannot depend on UIScrollView

 

For example, you design a layout like this:

 

UIScrollView contains two subviews: UILabel and UITextField.

 

The Pin constraints of UILabel are as follows:

Note that the UILabel width is fixed to 100, and the Label height is also fixed (lines is set to 1 ). This is feasible because its width and height are not dependent on UIScrollView.

However, it is impossible for all controls to use a fixed width and height, which is not called "Automatic Layout ".

For example, UITextField, we are going to set its Pin constraint:

In this way, UITextField does not have a fixed width or height. This is not true. In fact, UITextField has a fixed height. For a UITextField that uses the default border type (rounded corner), its height is fixed to 30. However, the width is determined by the left and right edges.

It can be seen that its left edge is 8 pixels away from the left UILabel, And the right edge is 14 pixels away from the right edge of superview. In this way, the width of UITextField should be obtained from the x of the right edge minus the x of the left edge.

Because the left UILabel is fixed width, the left edge position of UITextField is also fixed. However, the x on the right edge is relative to the superview, which cannot be fixed.

We know that in the Adaptive Layout of Xcode6, the size of the view is actually changed based on the device. It is a size on the iPhone and another size on the iPad.

But in any case, our UITextField can be adaptive to any device. It is a little narrower on the iPhone than on the iPad.

 

However, when you set such a constraint, you will find a red layout warning:

This indicates that the UITextField width is much shorter than the layout width at runtime. The running effect is as follows:

This is not what we want at all.

This is because UITextField violates Principle 2: The size of subviews cannot depend on UIScrollView.

As described above, the UITextField width depends on the superview width. However, unlike what you understand, UITextField's superview is UIScrollView rather than ViewController's view.

 

Why cannot the size of subviews depend on UIScrollView?

This is simple because Principle 1: The size of UIScrollView depends on subviews. If the size of subviews is dependent on UIScrollView, the layout engine is messy. Just as we solve an equation, the solution of x needs to know the value of y first, while the value of y needs to clarify the value of x first, so there is no solution.

 

To solve this problem, we need to specify the UITextField width. At least it cannot be related to the unreliable UIScrollView size. We can set the width constraint of UITextField as follows:

Find the size panel of UITextField and double-click the constraint Tailing Space to (if you click it, it will only uninstall rather than delete it ):

Then press the delete key.

 

Right-click, drag the UITextField to the view of ViewController, and select Equals Widths. Double-click the newly created constraint and modify it as follows:

Note that the First Item and Second Item items should not be reversed.

 

Run the program:

 

UITextField can be well adapted on iPhone and iPad.

The same is true for the layout of height. I will not give an example here. In short, the above principles shall not be violated.