AutoLayout and ScrollView's Revenge

A few days ago on GitHub saw an article on the portal here:

Https://github.com/nixzhu/dev-blog/blob/master/autolayout-tips.md

This is clearly said AutoLayout and scrollview how to operate. There is also a demo

There is such a word in the original:

Because UILabel in the Uiscrollview inside the Contentview, although it looks uiscrollview very wide, but its contentview is not. Conversely, the Size of the Contentview is determined by the constraints of the Subview. This is the only place you need to know when you're using AutoLayout and Uiscrollview.

The original example is a Uilabel to do the experiment, and Uilabel title is not empty, this is very important, why this is important, because the title is not empty, there is a default size. So you just need to set top, Rigth,bottom, left on it. This will not be an error. See.

Now that's the point, create a new Viewcontroller, insert a uiscrollview in the view, set its constraints, and set a background color, see

After running

Very simple. There's nothing to say.

Now I've added a uiimageview,iamgeview to the top, and then add the top rigth bottom left constraint. Still error.

So, at this time we add a picture to Uiiamgeview, when the error is not.

and run it:

You can see that this figure is big to explode, because we don't have a size constraint, so it's the default constraint, and then we'll add a size constraint to it. Such as:

and run it: this time the effect is almost what we want: (Note that you can not scroll)

So now I've done the work to determine the size of the Uiimageview, as well as the position. The contentsize size of the ScrollView is also determined by right and bottom constraints. At this time by calculation, contetnsize is less than or equal to ScrollView frame so do not scroll. What do you want them to scroll? You only need to set the visual range of right and bottom size greater than Scrollviewview fram. Now let's change the right,bottom constraint such as:

This time the view has not changed before and after the modification, because it is only the contentsize size change, and the ScrollView has a scrolling effect, run:

You can see that it's time to scroll. So the ScrollView roll principle is roughly the case.

Multiple view also, as long as the ScrollView through its sub-view size and position can determine the size of contentsize.

So now we re-modify, let the Uiviewimage center. And right is 1000,bottom for 1000.

The operation results are roughly the same.

Finally in a complex point layout uiiamgeview on the left side there is a uilabel, size I did not set, according to fit the text, uiimage distance to the left label distance 100, distance from the upper side uilabel100,

Uiimageview right Bottom are all 666, now another good constraint then update like.

Now we run and see the results:

Yes, that's exactly what you want.

Print frame and contensize look

contentsize size is 1338.5 1014.5

+240 (width of uiimageview) for 1338.5 = 0 (left side of Uilabel) +332.5 (width of left Uilabel, based on content adaptive width) +100 (distance of Uilabel and Uiimageview) + 666 (right of Uiimageivew)

So why is the height of 1014.5, you guys should forget it?

AutoLayout and ScrollView's Revenge