UIScrollView + XIB布局

垂直状态下的XIB布局

效果

gif00.gif

第1步: 在XIB中拖入UIScollView控件, 并且去除勾选项 Content Layout Guides

image00.png

第2步:添加UIView 为contentView,设置约束: left top right bottom 均为0, 因为是 垂直滑动,所以 宽度一样 ,设置为等宽,再设置一个比屏宽更大的高度,如 1000.

image01.png

image02.png

image03.png

第3步:添加子视图View,假设整个页面布局为三部分,分别是红绿蓝,各自的高为 200,300,400,在这里展示最后一个蓝色View的约束.

image04.png

第4步:删除contentView 高为1000 的约束,使其bottom 和蓝色View 的bottom 保持一致

image05.png

image06.png

Tip 如果要在蓝色View下面继续添加视图,如黄色View,把contentView 的 Bottom Edges 设置 300, 再依次添加黄色View,设置完约束后, 重复第4步操作.

水平方向是设置Trailing Edges 相同,具体步骤不一一列举了
欢迎下载demo