使用xib做页面布局时能直观看到页面的布局效果,然后进行相应的调整,极大的增强了我们的工作效率。但是在xib添加scrollView的时候,会觉得很麻烦,感觉怎么添加约束都会报错。我来讲一下我怎么在xib中添加scrollView和我的理解。
在xib中,ScrollView是根据其下面的一个View的大小来确定ContentSize的大小。

新建一个工程
在xib中添加scrollView 并设置约束

在scrollView上添加一个View并设置View的边距约束,此处会报错。

先不考虑报错,我们要考虑的是scrollVIew的滑动方向,如果需要水平方向的滚动需要在view添加水平居中的约束,反之,垂直移动的话添加垂直剧中的约束,两个方向都移动则不添加约束。 本例要添加水平居中约束。

添加完居中约束后,以本例则需要添加view的宽度约束。

添加完成后报错消失。设置下View的颜色
添加多个View
再在scrollView上添加一个View,设置新view的边距与宽度。

此处需要删除掉上一个view与Superview的边距约束,否则会报错。

然后相应的添加多个View就可以了。
要点:
水平方向的滚动需要在view添加水平居中的约束,反之,垂直移动的话添加垂直剧中的约束,两个方向都移动则不添加约束。
ScrollView是根据其下面的一个View的大小来确定ContentSize的大小。
水平移动scrollView的contentSize = 多个view的宽度+view之间的左右间隔+ 两边的view与scrollView的左右边距。
垂直移动scrollView的contentSize = 多个view的高度+view之间的上下间隔+ 两边的view与scrollView的伤心哎边距。
网友评论