XIB中scrollView约束的添加-图解

问题的提出

我们在平时使用中,很多界面的高度(宽度)往往会超出屏幕范围,这就让我们不得不使用scrollView.然而scrollView的contentSize、contentInsets的复杂特性有时给我们带来困惑。
去年做这个的时候就出现怎么弄都无法让scrollView滚动起来的情况，最后查资料解决了（当时是手写代码布局，用的Masonry,当然现在使用swift就换成了SnapKit。）
但是发现很多人喜欢用XIB,特别对于一些新人还没有全面了解XIB的各种属性，可能会遇到一些情况，这个时候提问就蛋疼了，很难清楚的描绘出问题...所以我喜欢手写代码，毕竟我是新人咯咯咯

写这个的原因

还剩一个小时有点闲~
刚好看到有人问~

解决过程

1. 首先我们新建一个项目，这里我就直接在Main.storyboard中操作

2.我们拉一个scrollView到view上,再给scrollView添加上top,leading,bottom,trailing四个约束。这一步是为了确定scrollView的frame.

添加scrollView.jpeg

3.我们再拉一个contrainerView到scrollView上(注意:这个contrainerView很重要,她是用于确定scrollView的contentSize的),并对其上下左右进行约束,约束完你会发现,约束报错,scrollView的contentSize并不能确定!
我们不得不通过contrainerView来确定.
我们让contrainerView的宽度与scrollView的宽度相等(这里可以不相等,但是大多数情况下我们都是这种相等的需求吧...).
那么高度呢?这里我们现在暂时不处理,因为这里就是我们实现scrollView可以上下滑动的关键
(因为高度没处理,所有约束一直有个红点报错,这里我们可以为 contrainerView 加一个固定大小 (intrinsic size,,设置如下图),这个约束报错就没有了.当程序运行时contrainerView的 size 会根据你的约束重新改变,intrinsic size并不会影响你的约束)

intrinsicSize.jpeg

scrollView宽高报错.png

约束contrainerView.jpeg

4.为了让scrollView能够滚动,我们再拉一个showView到contrainerView上,对showView的上下左右和高度进行约束.这里需要说明一下,用showView是为了撑大contrainerView,contrainerView又是决定contentSize的关键,这样我们就相当于设置了scrollView的contentSize.当然,我们的contrainerView的高度只有大于屏幕的高度的情况下scrollView才能上下滚动.等设置完以后你会发现,第三步遗留下来的高度报错消失了(如果你没设置intrinsic size 的话).

撑大contrainerView,解决遗留高度报错问题.png

总结

• scrollView的frame通过与父视图的约束进行确定
• showView相当于scrollView的contentView
• scrollView的contentSize的高度宽度通过contrainerView来确定
• contrainerView很重要(命名随你喜欢咯),高度不定,通过给contrainerView中添加视图来确定(视图的bottom与contrainerView的bottom添加约束)
• 思路理解了,用代码实现应该也很简单吧

---

demo地址
ps: demo 是后期补上的,与上述内容不完全一样,但功能相同