项目中使用storyboard和xib布局页面时,我们经常要用到autolayout,它是一个很强大的东西,用好了,能让你事半功倍,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂。ScrollView是根据一个View的大小来确定ContentSize的大小。
效果
![1672235-7edc52961832f7fc.gif](https://i-blog.csdnimg.cn/blog_migrate/648566fd2cf68555a84e3a41eec7646e.gif)
1.gif
相信这样的页面需求还是很常见的,下面简述ScrollView和AutoLayout结合使用的步骤
1.创建一个项目,拖拽一个ScrollView到故事板中,并添加约束,如下图
![1672235-63dc8259be8f3239.jpg](https://i-blog.csdnimg.cn/blog_migrate/eac009d21563253c595bbf15bd0a4a91.jpeg)
2.jpg
这里并木有报错,时不时感觉很easy的事情.
接下来给UIScrollView上添加一个UIView子控件并添加约束
![1672235-2a50975cb2397bc7.png](https://i-blog.csdnimg.cn/blog_migrate/132911c15330cd332b9a3e3372b96510.png)
3.png
这里你会发现各种报错,?刚开始我也很不理解,但一想不难发现,contentsize的宽度高度没有固定,所以我们给view设置一个同UIScrollView等宽的宽度和一个高度即可.这里随便设置300的高度.
![1672235-1bf421316b1adbaa.png](https://i-blog.csdnimg.cn/blog_migrate/a6966ef2bac1477a7a53bc20946743fc.png)
4.png
![1672235-d89b428954f9781a.png](https://i-blog.csdnimg.cn/blog_migrate/76dfc8c9525fba920fbfb4e009afd021.png)
5.png
设置完宽度和高度后的效果
![1672235-b06a91a77036be7f.png](https://i-blog.csdnimg.cn/blog_migrate/8f3677988ade3c23115b0087678795ca.png)
6.png
此时,并没有一个报错了
好,我们将UIScorllView拉高,如下图所示
![1672235-1a7c96faeb57e2f4.png](https://i-blog.csdnimg.cn/blog_migrate/4b8758d07fababc7258bdff165324fbf.png)
7.png
此时,可以在UIview上添加并且约束各种控件了.
![1672235-90bc7853efb2fa56.jpg](https://i-blog.csdnimg.cn/blog_migrate/c4ec0438a7333e5f381ce00421e3a3d4.jpeg)
9.jpg
![1672235-a57233da805f6ffa.png](https://i-blog.csdnimg.cn/blog_migrate/eab76ea3531a1bed54cba71fe4cc94b0.png)
8.png
不知道大家有没有留意,刚开始我为了消除红色的错误,给UIView设置了一个固定的高度,但是如果这里我们不想要固定的300的高度呢,其实我们可以让UIview的高度根据里面的控件自动设置高度.
所以这里,我给按钮的底部在加一个约束,并删除UIview的300的高度即可
![1672235-f506dd08d93562cf.jpg](https://i-blog.csdnimg.cn/blog_migrate/7076fbb75f80028ef539e95d038311bf.jpeg)
10.jpg
![1672235-22dfe5d3f0137732.png](https://i-blog.csdnimg.cn/blog_migrate/5696c1181c77953012758b302f76e464.png)
11.png
此时是不会报错的,我们直接更新一下约束即可.
![1672235-52373f501520bc0d.png](https://i-blog.csdnimg.cn/blog_migrate/46b483560f76e71a11318482a95640fa.png)
12.png
注意 如果小伙伴们约束的时候,view距离顶部的导航栏有问题,明明设置了0,但是视觉上还是有一定的距离,记得把这个选项勾选去掉即可.
![1672235-0df315c441eec158.png](https://i-blog.csdnimg.cn/blog_migrate/741e0e2efe11db9c8514bab72a67a732.png)
13.png