UIScrollView & UIStoryboard 故事板

参考链接:

Apple:
https://developer.apple.com/library/ios/technotes/tn2154/_index.html

在AutoLayout体系中,UIScrollView是一个特殊的视图。我们先看一下官网的一些说明:

In general, Auto Layout considers the top, left, bottom, and right edges of a view to be the visible edges. That is, if you pin a view to the left edge of its superview, you’re really pinning it to the minimum x-value of the superview’s bounds. Changing the bounds origin of the superview does not change the position of the view.

大致意思是说,通常情况下,如果你设置一个视图和其父视图的边距,这个边距实际上是相对于父视图的bounds而言的。注意这英文文档中有一句话容易引起误解:Changing the bounds origin of the superview does not change the position of the view,意思是改变父视图的bounds的origin并不会改变视图的position。如果深究这句话会偏离本文的主题,所以下面只是简单解释一下:
做一个小Demo:

UIScrollView & UIStoryboard 故事板_第1张图片
图示1

当点击Button按钮的时候,让父视图(redView)的bounds的origin发生了变化,我们发现其子视图(whiteView)向左发生了偏移,但是程序打印结果显示:

2016-06-04 13:34:33.850 ChangeBounds[45808:3465767] 68.500000
2016-06-04 13:34:33.852 ChangeBounds[45808:3465767] 68.500000

也就是说,position没有发生变化,但白色视图的位置确实向左发生了偏移(偏移量为10)。白色视图向左偏移是因为父视图(即红色视图)的bounds的origin由(0, 0)变成了(10, 0), 当红色视图的origin发生变化后,其坐标变化类似于:

UIScrollView & UIStoryboard 故事板_第2张图片
图示2.png

这个解释到此为止,因为position是锚点anchorPoint在superLayer中的位置呢,锚点没有发生变化,所以position也没有变化,至于什么是锚点,再扯就远了。

好,我们回到ScrollView和AutoLayout上来。
上面说到,通常情况下,如果你设置一个视图和其父视图的边距,这个边距实际上是相对于父视图的bounds而言的。但是ScrollView有所不同,它的leading/trailing/top/bottom space是相对于UIScrollView的contentSize而不是bounds来确定的,所以如果用UIScrollView和它的subview的leading/trailing/top/bottom来互相决定大小时,就会出现Has ambiguous scrollable content width/height的warning.
苹果官网上也说道:

The UIScrollView class scrolls its content by changing the origin of its bounds. To make this work with Auto Layout, the top, left, bottom, and right edges within a scroll view now mean the edges of its content view.

所以上、下、左、右这些约束要相对于UIScrollView的contentView来设置。
所以我们要给这个UIScrollView对象添加一个contentView, 在故事板中可以往scroll view上托一个view, 注意这个view的上下左右约束都是0, 并且设置它的宽高约束,并Remove At build path, 通过这个content view告诉scroll view其content size. 步骤如下:

Step 1> 托入UIScrollView,并设置其约束,比如上下左右
Step 2> 往这个Scroll view上托入一个view, 这个view的上下左右和scroll view的约束都是0,并设置其宽高和scroll view相同,对宽约束和高约束,设置Remove at build time
Step 3> 通过改变这个content view的宽高约束来改变scroll view的content size

    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:self.contentView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:self.view.bounds.size.width];
    [self.contentView addConstraint:widthConstraint];
    
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:self.contentView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:250];
    self.heightConstraint = heightConstraint;
    [self.contentView addConstraint:heightConstraint];

这个操作流程不好用文字来表达。以前录个一个小视频,可参见这里: http://pan.baidu.com/s/1kVnP0vt

肯定有需要补充和错误的地方,若发现请联系

你可能感兴趣的:(UIScrollView & UIStoryboard 故事板)