Autolayout与ScrollView的恩怨情仇

Posted 2020-08-03

前几天在gitHub看到了一篇文章，传送门在这里：

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

这里面清楚的说了autolayout与scrollview怎么操作。还有一个demo

原文中有这么一句话：

因为 UILabel 在 UIScrollView 内的 contentView 上，虽然看起来 UIScrollView 很宽很大，但其 contentView 并不是。相反，contentView 的 Size 是由其中的 Subview 的约束所确定的。

这就是你在同时使用 AutoLayout 和 UIScrollView 时所唯一需要明白的地方。

 原来的例子中是用的一个uilabel做实验，而且uilabel标题不为空，这点很重要，为什么说这点很重要呢，是因为标题不为空的话是有一个默认的size。所以你只需要设置top ,rigth,bottom ,left就可以了。这样就就不会报错了。见下图。

现在重点来了，新建一个viewcontroller，在view中插入一个uiscrollview 设置其约束，并设置个背景色，见下图

运行之后如图：

很简单。没什么好说的

现在我在上面加了一个uiimageview，iamgeview没有，然后添加top rigth bottom left约束。依然报错。如图：

 

所以，这时候我们给uiiamgeview加个图，这时候不报错了。

并运行之：

可以看到这时候这个图大到炸天，因为我们没有加size约束 ，所以是默认的约束，这时候，我们就给它加个size约束。如下图：

并运行之：这时候效果差不多是我们想要的了：（注意这时候不能滚动）

所以，现在我所做的工作，确定了uiimageview的大小，以及位置。还通过right以及bottom约束确定了scrollview的contentSize大小。这时候通过计算，contetnSize小于等于scrollView的frame所以不用滚动。想让他们滚动怎么办？只需要设置right和bottom大小大于scrollviewView的fram可视范围就可以了。现在我们改下right,bottom约束如下图：

这时候修改之前及修改之后视图并没有发生变化，因为这只是contentSize大小改变，并使scrollView有了滚动效果，运行：

可以看到这时候可以滚动了。所以scrollView滚原理大致如此。

多个view也同样，只要scrollview通过它的子视图的大小和位置能确定contentSize大小就可以了。

所以现在我们重新修改下，让uiviewimage居中。并且right为1000，bottom为1000

运行结果大致是这样的

最后在来一个复杂点的布局uiiamgeview左侧上侧各有一个uilabel，大小我没设置，根据适应文字，uiimage距离左侧label距离100，距离上侧uilabel100，

uiimageview的right bottom都是666，现在另好约束然后update如下图。

现在我们运行，看结果：

没错这结果正是想要的。。

打印frame及contenSize看看如图：

 

 contentSize大小为1338.5 1014.5

对于1338.5 = 0（左侧uilabel的left）+332.5(左侧uilabel的宽度,根据内容自适应的宽度)+100（uilabel和uiimageview的距离）+240（uiimageview的宽度）+666（uiimageivew的right）

所以高度为为什么是1014.5,各位应该会算了吧？