UIScrollView自动布局问题

首先,我们新建一个项目演示一下在Storyboard/xib中利用自动布局给UIScrollView子控件添加约束会出现的问题:

1.我们往Main.storyboard中拖入一个UIScrollView,并给其设置一个蓝色背景方便我们调试,然后设置水平垂直方向居中,宽高各为200的约束:

QQ20151109-0.png

QQ20151109-3.png

2.运行程序效果如下:

QQ20151109-2.png

3.接下来我们给这个UIScrollView添加一个UITextField子控件并设置其约束:上部间距50,左边间距20,宽度100,高度30:

QQ20151109-1.png

一般给控件设置以上四个约束即可,但是这里我们发现界面报错:

QQ20151109-0.png

其实,这是由于UIScrollView的特殊性造成的,虽然这样也可以运行程序,但是一般不推荐这样做,如果UIScrollView中存在很多子控件可能会造成很多未知错误.

那么怎么解决这个问题呢?

首先,我们需要添加一个UIView类型的控件成为UIScrollView的唯一子控件,并设置其上下左右间距都为0,这时候我们发现设置完四个约束后仍然会报错,这里我们就来解释一下UIScrollView的特殊性:其实UIScrollView要想实现滚动,必须设置其滚动区域contentSize,而这里UIScrollView的滚动区域是由其子控件的内容决定的,所以这里我们先添加一个UIView成为UIScrollView的唯一子控件,并设置其上下左右约束均为0,然后设置UIView的宽度为300(这个高度就是UIScrollView的内容宽度: contentSize.weight),在设置垂直居中,然后运行程序就会看到UIScrollView可以左右滚动了.

QQ20151109-0.png

QQ20151109-1.png

UIScrollView.gif

同理,如果要想上下滚动就将UIView的高度约束设置成300(这个高度就是UIScrollView的内容高度: contentSize.height),水平居中就可以了.

QQ20151109-2.png

QQ20151109-3.png

如果要想上下左右都可以滚动,那么就将宽高约束都设置为300.不用设置水平和垂直居中.

QQ20151109-4.png

4.接下来所有的控件都添加到UIView中即可利用自动布局来设置约束.

UIScrollView.gif