Storyboard 系列文章
[iOS] Storyboard (1) -- 入门：API 篇
[iOS] Storyboard (2) --入门：约束篇
[iOS] Storyboard (3) -- 使用：常用Tips
[iOS] Storyboard (4) -- 实践：问题总结
[iOS] Storyboard (4) -- 实践：UIScrollView
[iOS] Storyboard (4) -- 实践：UICollectionView
滚动视图 UIScrollView 对于Storyboard 中使用的时候和一般控件不太一样, 本文主要介绍如何在 Storyboard 添加约束和布局子控件;
第一步: 添加 UIScrollView
拖拽一个 UIScrollView, 添加到当前视图, 添加自己需要的约束, 这里使 UIScrollView 全屏显示, 添加约束如下:
第二步: 添加 contentView
如果想要 ScrollView 能够滑动, 需要一个 ContentView 将其 contentSize 撑起来, 添加该 View后, 所有需要显示的子视图都添加到该contentView 即可;
对该ContentView 添加约束的时候, 需要一些注意点, 首先我们添加一个全屏(相对于 ScrollView )约束:
绿色视图即为 contentView
添加后, 会发现, 约束会爆红:
这里我将 ScrollView 的背景色改为灰色;
爆红的约束先无视, 接下来添加一个关键的操作, 如果想要内容视图只能上下滑动, 我需要将该 contentView的宽设置为和 ScrollView 等宽, 即添加如下约束:
这时候, 约束依然是爆红状态, 先不用管, 添加完成的约束如下:
第三步: 添加子视图
接下来, 我们添加两个子视图, 这里直接添加了两个 View , 并设置其高度之和超过了屏幕的高度, 不然也不会有滑动的效果, 添加的约束如下:
可以看到蓝色视图已经超出了屏幕的范围, 这时候整体约束还是会爆红; 接下来还有最后关键的一部
第四步: 最后关键收尾约束
最后想要将 contentView 撑起来, 还有最后一个关键约束, 即: 使最后一个视图的底与 contentView的底 添加相对约束:
这时候你会发现, 所有的约束也不爆红了;
到此, 所有的约束添加完成, 跑起来看看效果:
效果完美;
PS: 如果发现有滑动不到底部的情况, 检查下最后那个视图添加的约束, 相对值是不是负值
结束语
本文设置的是竖向滑动, 所以在第二步添加 contentView 的时候, 设置其宽与其父视图相同; 如果要想横向滑动, 我们需要固定其高, 所以这一步修改为其高和其父视图相同即可.
附
1. 报错 Content and frame layout guides before iOS 11.0
新版Xcode 会报如下的错误
解决方法：
在Storyboard 中选中Scrollview，然后在右侧工具栏找到 “show the file inspector -> Interface Builder Document -> Builds for” 选择 iOS 11.0 and Later， 如下图所示：
