Example: Uiscrollview and AutoLayout.

Objective

Ever since I wrote the introduction to masonry, there have been people who have not understood Uiscrollview's example.

UIView *container = [UIView new]; [ScrollView Addsubview:container]; [Container mas_makeconstraints:^ (Masconstraintmaker *make)    {Make.edges.equalTo (ScrollView); Make.width.equalTo (ScrollView);}];

• Why use a container to include other subview?

• Why did you specify edges and width? Isn't it superfluous?

So today, I'm going to take this question as I understand it.

Comb

Straight-in topics the most important concept to explain previous questions is

Uiscrollview relies on the constraints between its subviews to determine the size of the Contentsize

This is what the code looks like.

[ScrollView mas_makeconstraints:^ (Masconstraintmaker *make)    {Make.left.equalTo (v1.mas_left);    Make.right.equalTo (V1.mas_right);    Make.top.equalTo (V1.mas_top); Make.bottom.equalTo (V1.mas_bottom);}];

This is because Uiscrollview is a very special constraint on the relative position of the view Uiscrollview and its subview is not directly applied to the calculation of the frame but to the calculation of the contentsize.

In other words, when Uiscrollview knows what position the upper and lower constraints are pointing to Subview, the size of the contentsize is determined once the position of the subview is fixed.

Here is a simple example strongly recommended to match the demo to understand the following example (demo link at the end of the text)

Please click on the online demo (for the sake of understanding I will contentsize with a red line to see the contentsize I turned off the Uiscrollview cliptobounds to switch the actual effect by the switch in the upper left corner)

Example 1

[V1 mas_makeconstraints:^ (Masconstraintmaker *make)    {Make.edges.equalTo (ScrollView);    Make.width.equalTo (ScrollView); Make.height.equalTo (ScrollView). Multipliedby (1.5);}];

Effect

Here I created a view with a width equal to scrollview higher than the scrollview height of 1.5 times times and then ScrollView succeeded in calculating the Contentsize

The point is,

Make.edges.equalTo (ScrollView);

This sentence is actually equivalent to what I mentioned before

[ScrollView mas_makeconstraints:^ (Masconstraintmaker *make)    {Make.left.equalTo (v1.mas_left);    Make.right.equalTo (V1.mas_right);    Make.top.equalTo (V1.mas_top); Make.bottom.equalTo (V1.mas_bottom);}];

ScrollView because the above constraint is calculated as the size of the V1 contentsize

Example 2

What happens if I try to change the size of the V1?

[V1 mas_makeconstraints:^ (Masconstraintmaker *make)        {Make.edges.equalTo (ScrollView); Make.size.equalTo (ScrollView). Sizeoffset (Cgsizemake (80, 80));}];

Effect

I can see that when I change only the size of the V1 and not the other things, ScrollView's contentsize changes with the size of the V1.

Example 3

The next example would be a little more complicated, what if there were two view?

[V1 mas_makeconstraints:^ (Masconstraintmaker *make)        {Make.left.top.right.equalTo (ScrollView). Insets (Uiedgeinsetsmake (10, 10, 0, 10));    Make.width.equalTo (ScrollView). Multipliedby (1.1);    Make.bottom.equalTo (v2.mas_top). Offset (-50); Make.height.equalTo (@200);}]; [v2 mas_makeconstraints:^ (Masconstraintmaker *make)        {Make.bottom.equalTo (ScrollView);    Make.left.right.equalTo (v1). Insets (Uiedgeinsetsmake (0, 50, 0, 50)); Make.height.equalTo (@250);}];

Effect

In this example, the ScrollView four-direction constraint is not placed on the same subview but points to two view respectively, so ScrollView's contentsize is determined by the constraints between the two view

Example 4

What happens if I put a constraint on four directions to four different view?

Cgsize size = cgsizemake (200, 200); [v1 mas_makeconstraints:^ (Masconstraintmaker *make)  {     Make.centerY.equalTo (scrollview.mas_top);         make.size.mas_equalto (size);}]; [v2 mas_makeconstraints:^ (Masconstraintmaker *make)  {     Make.centerX.equalTo (scrollview.mas_left);         make.size.mas_ Equalto (size);     make.right.equalto (v1.mas_left);     make.top.equalto (V1.mas_bottom);}]; [v3 mas_makeconstraints:^ (Masconstraintmaker *make)  {     Make.centerX.equalTo (scrollview.mas_right);         make.size.mas_ Equalto (size);     make.left.equalto (v1.mas_right);     make.top.equalto (V1.mas_bottom);}]; [v4 mas_makeconstraints:^ (Masconstraintmaker *make)  {  &NBsp; make.centery.equalto (Scrollview.mas_bottom);         Make.size.mas_equalTo (size);     make.left.equalto (V1.mas_left);     Make.top.equalTo (V2.mas_bottom);}];

Effect

The four-direction constraint points to the center point of the four view, and we get the right contentsize.

If you understand the code and the effect of example 4 believe that all your doubts about this problem should have been solved.

Then go back to the very beginning.

Make.edges.equalTo (ScrollView); Make.width.equalTo (ScrollView);

In general, we use Uiscrollview for AutoLayout layout to achieve a linear layout similar to Android (there are many miscellaneous non-repetitive subview if using UITableView and Uicollectionview is too cumbersome The direct use of Uiscrollview will be very flexible.

So

If we need vertical sliding, set width to be the same as ScrollView.

If you need to slide horizontally, set the height to be the same as ScrollView

It's so simple.

Summary

Source and demo please click here

Not long ago @nixzhu also wrote an article about Uiscrollview and then I replied on Weibo that " using a single containerview fills all, Then add all the Subview to the Containerview " but Nixzh said he was trying to avoid it, but after that, I highly recommend it.

Just like Example 1 and Example 2 if you need to add subview you simply add to V1 and add V1 constraints to get the right contentsize

If you do not do this just like example 3 and example 4 these boundary constraints require a single setting which is actually not necessary

Using a single Containerview is actually the best practice on this issue

Example: Uiscrollview and AutoLayout.