UIScrollView相对布局

UIScrollView相对布局

UIScrollView在IB中的相对布局一直是个使人头疼的事情，你们所遇到的不外乎下面两个问题
1. 如何正确肯定contentSize大小
2. 如何设计超过一屏大小的界面

首先必须知道的一点是使用autolayout后，contentSize无需手动设置，系统会经过加入到UIScrollView的内容来肯定contentSize的大小。先来看一个简单的例子。

如何正确肯定contentSize大小

1. 拖一个UIScrollView到VC上，设置其上下左右的约束相对于父视图为0
   

2. 拖一个UILabel到UIScrollView中心上，一样须要设置上下左右的约束
   

3. 最终获得的结果:
   

为何label的布局须要肯定设定上下左右的约束？

前面提到的，系统会经过加入到UIScrollView的内容来肯定contentSize的大小。设想一下若是去除掉向右和向下的约束，那么UIScrollView为了能包含这个label，contentSize所要达到的条件是：
* 横向至少 139 + 42=181 像素的宽度
* 纵向至少 273 + 21=294 像素的高度

也就是contentSize的值至少是{181, 294}，固然这个值还能够是{200, 300}等等，因此说contentSize的值是不肯定的。并且当去除这任意一个约束的时候，IB也会给出contentSize不肯定的警告。

warning: Ambiguous Layout: Scrollable content size is ambiguous for "Scroll View".

另外须要注意的是，对于固定行数和固定text值的label，高宽是肯定的，不用显性的去设置。

再来看增长了向下和向右的约束的时，contentSize所要达到的条件是：
* 横向: 139 + 139 + 42 = 320
* 纵向: 274 + 273 + 21 = 568

contentSize这时候的值是肯定的为{320, 568}，因此在布局UIScrollView内容视图的时候，始终要记住一点：必须让UIScrollView知道其contentSize大小，而不是一个不肯定的值，这样才算完成UIScrollView布局。

再回头看UIScrollView的布局：相对于其父视图的上下左右约束都是0。这就说明它的宽高其实决定于设备，3.5寸屏幕大小的设备是{320,480}，4.0寸屏幕大小的设备是{320,568}.....那么若是在iPhone 4上运行，UIScrollView纵向须要滚动，由于纵向须要的像素大小(568) > 480。在iPhone 5上运行，UIScrollView纵向不须要滚动，由于纵向须要的像素大小(568) = 568。

实际运行状况具体如何？在iPhone 5(7.1固件)模拟器上运行会发现，UIScrollView居然能够纵向滚动，这是为何。还记得iOS 7给UIScrollView及其子类预留的额外64个像素的滚动区域吗，就是这个缘由致使UIScrollView的contentSize值的高度会相对减小64像素。那么纵向须要的像素大小(568) > 568 - 64，因此UIScrollView才会在纵向滚动。能够试着将label向上的约束值改成274 - 64 = 210或在IB中取消viewcontroller的Adjust Scroll View Insets就会没法滚动。

如何设计超过一屏大小的界面

简单的布局两屏宽度的UI

1. 设置viewcontroller的宽度
   
   这样一来就能够在超过两屏宽度的视图上布局
2. 拖两个view到UIScrollView上，分别设置好颜色，view1表明红色view，view2表明黑色view
   
3. view1设置左、上、下约束为0，向右相对于view2属于设置0，view2设置右、上、下约束为0
   
   先无视警告，到这步contentSize的宽高其实都是未肯定的，由于view1和view2的宽高都是不肯定的。
4. 选中view1和UIScrollView约束选择相同的宽高，选择view2执行相同的约束，最后Update Frames
   
   横向：0 + view1的宽度 + 0 + view2的宽度 = 两倍的UIScrollView宽度
   纵向：0 + view1的高度 + 0 = UIScrollView高度 或 0 + view2的高度 + 0 = UIScrollView高度
5. 将viewcontroller的size从新设置为Fixed

具体操做看土豆视频