IOS UIScrollview to add a detailed text

Preface

In iOS development, AutoLayout is a very powerful thing, with a good, you can get twice the result with half the effort. But the AutoLayout is very easy to learn, I was just looking for more than an hour data are easy to use, powerful than the There are plenty of people who believe. But no matter how simple things, it is not always the right place, I was in the UIScrollView constraint on the toss for a long time, all kinds of error, all kinds of information search, finally in the author try to find a solution. I believe there must be a lot of work in the same as me, it is frustrating to toss the colleagues, here, I will share their understanding to everyone.

We first divide the constraints into the following categories (referring only to the constraints between child controls and UIScrollview)

1 pitch class: the child control to the parent control of the upper and lower left and right spacing of the 2 broad categories: both the child control and the parent control of the high aspect ratio of the central class: the child control in the parent control in the horizontal or vertical center

First, let’s look at an example of adding a constraint to a child control on an ordinary View

IOS UIScrollview to add a detailed text
IOS UIScrollview to add a detailed text

wood is wrong, very easy thing

Then look at the UIScrollView to add constraints to the child control example

IOS UIScrollview to add a detailed text
IOS UIScrollview to add a detailed text

Nani? The same constraints, even the wrong, to the original understanding of the author, obviously told it to the upper and lower left and right spacing, and why would it be wrong, is Xcode bug?

Be careful

In AutoLayout, all kinds of constraints are not distance, relative to the parent control itself, but relative to the parent control content view (such as UIScrollview contentSize), due to the content of ordinary view itself and view the same size, so it can be regarded as relative to the self scrollView at load time, automatically according to the internal control to calculate contentSize the value of.

After reading the above sentence, I believe that everyone should know why is wrong, the child control frame relies on Scrollview contentSize, and the value of contentSize and calculated according to sub control frame, that in the end what? So Xcode meng……

In the development, we may encounter such a situation, the Scrollview contentSize set in viewDidLoad, but when the program runs, and not their desired effect, because the Scrollview is based on the internal controls to calculate the value of contentSize, so we can viewDidAppear to set it up

Having said so much, how can we solve this problem? Nonsense not say, directly into

UIScrollview the correct way to add constraints

Suppose we want to achieve the following effects

IOS UIScrollview to add a detailed text

first add UIScrollview to the controller view, adding constraints (this I do not teach it, the author here is down about the distance is 0, so the size and the size of the UIScrollview screen after operation.)

Here only vertical rolling, the level of the situation is not rolling, the other is similar, I believe that your IQ

Fool class

Add a UIView UIScrollView to the only child controls (constraints as shown below), put the view as a content view Scrollview (call it “view only”), after all the child controls are added to the view
.

IOS UIScrollview to add a detailed text

to the parent control on the left and right spacing fixed (0 is written, according to the needs of their own decisions), fixed the height of the view (written in 800), after the completion of the constraints

IOS UIScrollview to add a detailed text

error, normal, reported because the horizontal direction is not determined, the vertical direction is no problem. The author of the first to explain the meaning of the above constraints, only view to Scrollview content view below the spacing is 0, and the fixed height is 800, then Scrollview will automatically calculate the contentSize.height = 0 (on the pitch) +800 + 0 (under spacing) = 800, so the horizontal direction? ContentSize.width = 0 (left pitch) + width + + (right spacing) = 0, under condition, cannot be calculated

Particular attention

The online data shows that the distance constraint is in fact within the margin setting of scrollView, after the author personally verified, this argument is wrong, the distance is set to 10, and then run the program to print the scrollView.contentInset, the results showed that are 0, 20 and contentSize wide Gaodouduo, so is in the contentSize space the contentInset is not.

Next we add a constraint

IOS UIScrollview to add a detailed text

Let
and Scrollview only view width, and look at the results of

IOS UIScrollview to add a detailed text

did not report the wrong, oh yeah, after you want to add any control to the only view to add it, with respect to the only view to add constraints on the so easy.

Maybe we will have a question, only view and Scrollview width, and that in the end is not wide, or rely on the contentSize?

Be careful

The width and height constraint is relative to the Scrollview itself, not relative to its content view, so how wide is the Scrollview, the only view is wide, and has nothing to do with contentSize

So far, Scrollview contentSize can determine the size of the
contentSize.height = 0 (on the pitch) +800 + 0 (under spacing) = 800
contentSize.width = 0 (left + only view wide spacing) + 0 (right spacing) = only view wide (scrollview/ controller view/ screen width)

Look here!!!!

Remember to change the 800, the last button to change the maximum Y (Y + height) + the following spacing, as shown in figure
IOS UIScrollview to add a detailed text

If you can determine the maximum Y value of the last button at run time, you can modify the height constraint of the unique view by code

Normal level

Like a fool, just the only view of the Scrollview is no longer fixed height, but it is automatically adjusted according to the constraints of the child controls within it, as shown in figure

IOS UIScrollview to add a detailed text

we look at the constraints of the last button on the left and right spacing + fixed height has been able to determine its location and size, and why add a lower pitch? In order to determine the height of the unique view of the parent control, the height of the only view = the maximum Y value of the button + the lower spacing

Great God

Do not call the only view, directly in the Scrollview to add a child control
to add the first child control (called it “sub 1”) and constraint

IOS UIScrollview to add a detailed text

sub 1 Scrollview distance from the content view, the upper spacing of 10, the left and right spacing of 0

IOS UIScrollview to add a detailed text

1 and Scrollview width, and the height is determined according to its internal control sub constraints, there is no map, AutoLayout should not understand, as is the fixed height, as its position and size have been identified, and scrollview.contentSize.width = 0 (left + width + 1 spacing) 0 (right = 1 (spacing) width is scrollview/ controller view/ screen width).

The error is set to 1 because there is no sub spacing Scrollview content view, whether it is temporarily (if you look unhappy, can add a constraint, remember to delete), to add the following to the Scrollview view in figure
, add after effect

IOS UIScrollview to add a detailed text

controls the following constraints are the same (not map)

  • The vertical distance to the above view is 10
  • Scrollview to the content of the left and right margins of 0
  • Fixed height
    constraint or error, the reason for the error and add 1

Next add the last control

IOS UIScrollview to add a detailed text

get, wood has a mistake, we look at the constraints

  • 1 on the pitch is 10, the position and size of the previous control has been determined Y = Y button on the maximum value of a control + + 10
  • 2 around the pitch is, the width of the Scrollview button has been determined by the width of the width of the content view of the contents of the = the width of the content view – * * * 10 button = X
  • 3 fixed height 40 button height = 40 above constraints have been identified in frame buttons, then the last distance is in order to determine the Y value of scrollview.contentSize.heightscrollview.contentSize.height = button height + + button distance

So far, the location of all sub control to determine the size of the Scrollview contentSize OK, finally to see the operating results.

IOS UIScrollview to add a detailed text

Small partners to learn it, I share the experience of the first time, do not like not to spray, there are errors or do not understand the place can leave a message