[iOS] Storyboard (4) -- 实践：UISc

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 的时候, 设置其宽与其父视图相同; 如果要想横向滑动, 我们需要固定其高, 所以这一步修改为其高和其父视图相同即可.