UIScrollView 约束剖析
UIScrollView约束设置曾一直困扰着iOS开发小伙伴们。趁着这次和几位小伙伴们分享我在做UIScrollView约束的一些心得，顺便写出来以便大家参考。
先看展示效果:
111.gif
为了方便大家理解后续的内容，首先我们思考以下几点:
- 我们在为
UIScrollView设置的上下左右约束，是设置的它Content约束还是UIScrollView本身边界的约束？ -
UIScrollView是如何计算出contentSize的？ -
UIScrollView是否一定需要一个容器作为参考？
对于第一个问题，我们先做个测试：新建一个UIViewController带上Xib,在其View中我们放置一个UIScrollView,如下图所示：
屏幕快照
上图中我们的左右边界都超出了View20个像素。如果为UIScrollView设置的左右约束，是设置的它Content相对约束。那么我们可以推断出contentSize应该是超过View宽度的大小也就是说左右可以滑动。
运行结果：
contentSize.gif
我们打印下View的Frame宽度，UIScrollView的Frame宽度和contentSize的宽度进一步确认下：（我用的是iPhone 6模拟器）
-(void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
CGFloat viewWidth = CGRectGetWidth(self.view.bounds);
CGFloat scrollViewWidth = CGRectGetWidth(self.showScrollView.bounds);
CGFloat contentSizeWidth = self.showScrollView.contentSize.width;
NSLog(@"viewWidth:%f--- scrollViewWidth:%f-----contentSizeWidth:%f",viewWidth,scrollViewWidth,contentSizeWidth);
}
终端Log：
ScrollViewLayout[24613:15651720] viewWidth:375.000000---
scrollViewWidth:415.000000-----contentSizeWidth:0.000000
我们看到contentSize为0，UIScrollView的Frame宽度为415即为375+20+20。由此对于第一个问题，我们有了答案：
我们在为UIScrollView设置的上下左右约束，是设置的UIScrollView本身边界的约束。而非设置的它Content约束
对于后面两个问题，我们先看几种设置
UIScrollView约束的方法,这里我们只展示上下滑动的情况。
添加一个容器作为参考视图contentSize自动计算
在xib中添加子视图的步骤我就不详细说明了，我们简单的添加几张图片和一个Label到容器视图中具体如下图所示：
屏幕快照
上图中当你拖动containerView到UIScrollView中时，设置完前后左右的约束和宽度约束后会报错，不过不要担心，那是因为此时UIScrollView还不能计算出它的contentSize如果你看着不舒服，可以把containerView的高度约束先固定，不过记得后面要删除。
这里需要特别注意，如果你想要高度自动计算，你必须的设置最下面的控件Label的bottom约束到containerView之间的距离。
添加一个容器作为参考视图contentSize手动计算
前面一个例子中，我们必须得设置最下面的控件Label的bottom约束。试想下如果我们界面中最下面一个控件例如Label 可能离底部很长，但是我们又不能设置到底部的距离大于或等于某个值，因为如果这样contentSize的高度是不确定的，会报错。我们又想Label可以根据内容向下扩展，如果文字很多，也许会超过屏幕底部。这时我们该如何设置UIScrollView的约束呢，这时我们需要设置containerView的高度约束并作为一个属性变量来手动更改。界面如下：
屏幕快照
在我们需要改变contentSize时，我们手动计算并赋值即可例如：
-(void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
self.containerViewHeightConstraint.constant = CGRectGetMaxY(self.detailLabel.frame);
}
不添加容器直接在UIScrollView中添加子视图
UIScrollView中的子视图添加过程不详细介绍了，添加完毕后的视图如下所示：
我们希望黄色View的高度可以随其里面的Label内容高度而改变。设置完成后运行结果可以看前面展示效果Gif中的无容器视图+高度自动
屏幕快照
实例结论
前面两个例子中我们都设置了容器的宽度约束和
UIScrollView的宽度相同而UIScrollView的宽度和UIViewController的View相同从而推断出容器的宽度。UIScrollView的高度，第一个例子是根据容器里面的子视图计算出容器的高度，第二个例子高度是手动计算。因此都是通过子视图的宽度和高度来推断出UIScrollView的contentSize。第三个例子中我们也设置了最后一个View的宽度和UIScrollView的宽度相同，高度也是由UIScrollView子视图推断而出，虽然这里黄色View的高度又是由其子视图推断而出。
因此我们得出结论UIScrollView的contentSize是由其子视图决定。
对于第三个问题：我们可以通过例子三中可以看出，UIScrollView可以不需要一个与之边界相同的容器作为参考。但是其子视图一定得能够计算出其宽度和高度。
纯代码编写多页面滑动
这里有两种方法，一种是需要容器，一种不要容器，代码如下。
- (void)viewDidLoad {
[super viewDidLoad];
self.extendedLayoutIncludesOpaqueBars = NO;
self.edgesForExtendedLayout = UIRectEdgeNone;
self.automaticallyAdjustsScrollViewInsets = NO;
self.view.backgroundColor = [UIColor whiteColor];
self.scrollView = [[UIScrollView alloc]init];
self.scrollView.translatesAutoresizingMaskIntoConstraints = NO;
self.scrollView.pagingEnabled = YES;
[self.view addSubview:self.scrollView];
self.scrollView.backgroundColor = [UIColor greenColor];
[self.view zhc_pinAllEdgesOfSubview:self.scrollView];
//[self addSubViewToScrollView];
self.containerView = [[UIView alloc]init];
self.containerView.translatesAutoresizingMaskIntoConstraints = NO;
self.containerView.backgroundColor = [UIColor yellowColor];
[self.scrollView addSubview:self.containerView];
[self.scrollView zhc_pinAllEdgesOfSubview:self.containerView];
[self.scrollView zhc_pinSubview:self.containerView toEdge:NSLayoutAttributeHeight withConstant:0.0];
[self addSubViewToContainerView];
// Do any additional setup after loading the view.
}
-(void)addSubViewToScrollView
{
UIView *lastView = self.scrollView;
UIView *superView = self.scrollView;
NSInteger count = 5;
for (NSInteger i=0; i< count; i++) {
UIImageView *imgView = [[UIImageView alloc]init];
imgView.backgroundColor = [UIColor blueColor];
imgView.contentMode = UIViewContentModeScaleAspectFit;
imgView.translatesAutoresizingMaskIntoConstraints = NO;
NSString *imgName = [NSString stringWithFormat:@"img%ld",(i+1)];
imgView.image = [UIImage imageNamed:imgName];
[superView addSubview:imgView];
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeTop withConstant:0.0];
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeBottom withConstant:0.0];
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeHeight withConstant:0.0];
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeWidth withConstant:0.0];
if (i==0) {
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeLeft withConstant:0.0];
}else{
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:imgView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:lastView attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0];
[superView addConstraint:constraint];
}
if (i == (count-1)){
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeTrailing withConstant:0.0];
}
lastView = imgView;
}
}
-(void)addSubViewToContainerView
{
UIView *lastView = self.containerView;
UIView *superView = self.containerView;
NSInteger count = 5;
CGFloat imgWidth = [UIScreen mainScreen].bounds.size.width;
for (NSInteger i=0; i< count; i++) {
UIImageView *imgView = [[UIImageView alloc]init];
imgView.backgroundColor = [UIColor blueColor];
imgView.contentMode = UIViewContentModeScaleAspectFit;
imgView.translatesAutoresizingMaskIntoConstraints = NO;
NSString *imgName = [NSString stringWithFormat:@"img%ld",(i+1)];
imgView.image = [UIImage imageNamed:imgName];
[superView addSubview:imgView];
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeTop withConstant:0.0];
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeBottom withConstant:0.0];
[imgView zhc_pinSelfToEdge:NSLayoutAttributeWidth withConstant:imgWidth];
if (i==0) {
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeLeft withConstant:0.0];
}else{
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:imgView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:lastView attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0.0];
[superView addConstraint:constraint];
}
if (i == (count-1)){
[superView zhc_pinSubview:imgView toEdge:NSLayoutAttributeTrailing withConstant:0.0];
}
lastView = imgView;
}
}
