首先拖拽一个ScrollView控件到View根视图上，如下图添加上下左右为0的约束，也就是让ScrollView充满整个View根视图
1529401123850.jpg
然后拖拽一个View视图会出现下图的标红（正常先不用管），我这里命名为ContentView（我是看着方便）
2.jpg
为ContentView添加上下左右为0的约束，标红依然存在
1529401395552.jpg
点击标红会出现如下报错的详情，意思就是不能确定ScrollView的contentSize的宽和高，仍然不用急
1529401472085.jpg
接下来用鼠标选中ContentView控件，按住鼠标右键向其父视图ScrollView连线，如下图：
1529401562740.jpg
之后，会出现如下图的约束选择项，这里选中箭头指向的Center Horizontally in Container 约束，这里就会出现ContentView控件的水平指示线
1529401639920.jpg
再点击标红，进入报错详情，发现ScrollView的contentSize宽度已经确定，现在只剩下高度了。不急，接着来
1529401693877.jpg
接下来，在ContentView上你可以尽情的布局，标红不用管，我这里如下几张图，依次添加了三个View视图控件，以不同的颜色便于区分，其约束的添加详情，图中有相应的标注
1529401776767.jpg
1529401973458.jpg
1529402042748.jpg
到此，完成你的所有布局，开始表演真正的技术了！！！用鼠标选中你布局的最低部的控件，按住鼠标的右键向ContentView连线，如下图
1529402105948.jpg
出现的约束项，选择BottomSpace to Container约束，选择之后……
1529402166419.jpg
之后你会发现，标红不见了！！！恭喜ScrollView的contentSize的高度已经确定了！！！
1529402242415.jpg
开始运行看一下效果吧！！！(效果图我自己设置了控制器的背景色)
what？为什么滑倒底部不能完全显示最后一个视图控件？那是因为这个，如图：(在你的最后一个视图控件中有这样一个约束View.bottom-21)就是因为这个所以会产生上面的效果，接下来小小的解决一下。
1529458213095.jpg
鼠标选中最底部的视图控件，如下图所示，点击箭头指示的Edit
1529458397974.jpg
在这里修改底部边距的大小，如果你想刚好滑倒屏幕底部，设置为0就好，如果想要和底部有一定的边距，可自行设置（我这里设置了20）
1529458484223.jpg
所有的工作都完成了，再看一下运行效果吧！
大功告成！！！
想一想，为什么之前的运行效果会出问题呢？
我这里查找了一番确定为，在ContentView内部布局添加最底部控件的时候添加的约束问题，看看我之前是怎么添加的
1529402042748.jpg
再看一下正常效果下的约束情况，如图
1529458553687.jpg
答案很明显，如果之前在这里就设置好底部的约束，就不会出现底部显示不全的问题了
（end）
网友评论