Question

如何在 AutoLayout 中使用 UIScrollView

Answer 1

首先，我在故事板中定义如下视图层次：

View (UIViewController 的 view)

· Scroll View (UIScrollView)– 暗灰色

· Container View (UIView) – 轻灰色

· Content1 (UIView) – 红色

· Content2 (UIView) – 绿色

· Content3 (UIView) – 蓝色
最终在故事板中显示为如下布局:

在设置布局规则之前，注意以下几点:

Scroll view 没有固定的高度和宽度。

Scroll View 的 宽度和高度由其内容所决定（即 Scroll View 的
contentSize 所决定） 。

内容的大小必须不依赖于 Scroll View
的尺寸。例如，Content1，Content2，Content3 不能包含任何与 Container View 相关的 top，bottom，left 和
right 的布局约束。只能包含固定宽度和高度的约束（每个约束至少在得在其中之一上定义）。如果任何一个 content view
都不包含这些约束，则它们的大小将依赖于 Scroll View（因为它们被绑定到 Scroll View 的边距），但 Scroll View
又依赖于内容的尺寸，这就导致矛盾冲突。

ScrollView 必须至少有一个内容绑定它的四条边，例如
top，left，right，bottom。这样 ScrollView 才能知道它的内容的边界在哪里，即 Scroll View 的
ContentSize。

现在，让我们开始布局。

Scroll View (UIScrollView): 相对于 superview ， leading,
trailing, top, bottom 四个方向都为 20。
你也可以将 20 改为 0，这样将占据 View Controller 的整个 view
大小。

Container View (UIView): 相对于 Scroll View，leading,
trailing, top, bottom 四个间距都取值 0。
一般来说，这是固定不变的，除非你想做一个在边上留白的效果。
在截图里，
leading, trailing, top, 和 bottom 间距都设为 0。Container View 的尺寸将有 3 个 Content views
的大小决定，从而再影响 ScrollView 的大小（ScrollView 的实际大小将在运行时计算，在故事板上设置它的大小没有任何作用）。

Content1: 固定宽为 100，高 240，leading 和 trailing 边距 20，top
边距 8，bottom 边距 8（ Content1 和 Content2 之间的间距）。
注意 leading 和 trailing 约束，以及
width 约束。如果 content1 是位于另外一个固定大小的 view 中，则 Xcode 会提示有约束冲突。但 content1 除 bottom 外，
top，left，right 边距都是相对于 ScrollView 的。

Content2: leading 和 trailing 为 20 , bottom 为
8 (Content2 和 Content3 之间的垂直间距), 高度 100。
我们没有添加宽度限制。这样，只有 content1 能影响
ScrollView 的 contentSize。

Content3: leading 和 trailing 为 20，button 20（content3
和 superView 即 ContainerView 之间的垂直间距）。宽度固定为 100。现在，我们也有一个 view 跟 ScrollView
的底边是相关的了。

用 iPhone
3.5 inch 模拟器运行程序，观察运行结果。

怎么不能滚动？
别急，这是因为
contentView 对于ScrollView 来说还不够大的缘故。

我们可以修改任何一个 contentView 的 Size。这里，我只修改了 Content1
的宽度：

-(void)viewDidLoad
{

[super
viewDidLoad];

self.content1WidthConstraint.constant =
500;

}

运行程序，水平滚动条出现。注意，别忘了为相应的约束创建 IBOulet。

然后，尝试修改content2 的高度。

-(void)viewDidLoad
{

[super
viewDidLoad];

self.content2HeightConstraint.constant = 200;

}

运行程序，垂直滚动条也出现了。

Answer 2

原则1：UIScrollView的size依赖于subviews
首先在画布中拖入一个UIScrollView。用Pin按钮，随意设置其布局。甚至不用设置。
因为《如何》一文中的第一个原则是：UIScrollView的布局依赖于subviews。因此我们设置UIScrollView的布局约束是没有用的。我们只需要将subviews的size都明确下来，这条原则自然不成问题。
UIScrollView的size（即contentSize）则根据subviews所占据的size来计算。当然，如果contentSize的内容不足以布满整个UIScrollView时，滚动条将不会出现，UIScrollView也不会滚动。
原则2：subviews的size不能依赖于UIScrollView
比如你设计这样一个布局：

UIScrollView包含两个subview：UILabel和UITextField。
UILabel的Pin约束设置如下：
注意，这里我们固定了UILabel的宽度为100，而Label的高度也是固定的（lines设置为1）。这是可行的，因为它的宽高都没有依赖于UIScrollView了。
但我们不可能所有控件都使用固定的宽高，那样就不叫做“自动布局了”。
例如，UITextField，我们准备设置它的Pin约束为：
这样，UITextField没有固定的宽高了。这样说也不对，其实UITextField是有固定高的，对于一个使用了默认边框类型（圆角）的UITextField来说，它的高度固定为30。但对于宽度则是由左边缘和右边缘决定。
从上图可知，它的左边缘距离左边的UILabel 8个像素，右边缘距superview的右边缘14个像素。这样UITextField的宽度应该由右边缘的x减左边缘的x得到。
由于左边的UILabel为固定宽度，所以UITextField的左边缘位置也是固定的。但右边缘的x则是相对于superview而定的，这就不可能固定。
我们知道在Xcode6的自适应布局上，view的大小实际上是根据设备而变的，在iPhone上是一个size，在iPad上又是另一个size。
但无论如何，我们的UITextField无论在何种设备上都能自适应。无非是在iPhone上略显窄一点，在iPad上则宽一些。