用AutoLayout对UIScrollView进行布局做的引导页

之前项目中全部用代码写的，没有对iPhone6以及iPhone6 plus进行适配。感觉适配是迟早要做的工作，所以有时间的话还是要学习一下AutoLayout。这两天抽时间对app的引导页进行了适配。引导页是用UIScrollView和UIPageControl实现的简单的一个引导页。都说ScrollView的适配是个比较蛋疼的事情，因为UIScrollView的contentSize由它的子视图们决定的，而它的子视图们又要参考它的尺寸，所以形成了循环的参考，最终没办法确定下它们的尺寸。在网上参考了一下别人的适配方法，大致都是说要给UIScrollView添加一个同一级别的参考视图anchorView，还要给UIScrollView的所有子视图添加一个共同的父视图containerView统一管理子视图，然后UIScrollView的contentSize就有这个containerView决定了。

实际操作了一下，真的很麻烦，再加上长时间没有拖控件了，遇到了很多问题，现在描述一下过程吧：

因为我们的.h和.m文件已经有了，这个地方就需要添加一个关联的xib文件，然后对界面进行布局。

1.创建xib

New File... -> 选择User Interface下的Empty，名字取的跟.h的文件名相同。

2.设置Xib的Class

创建完成之后选择File's Owner，在右侧将其Class设置为.h的文件名。

3.创建一个View

拖一个UIView到xib中，选中File's Owner，按住Ctrl，鼠标从File's Owner拖到View，在弹窗中选择View。这就与View关联起来了。

4.拖anchorView，UIScrollView，contentView并设置约束

如图，层次结构上，anchorView和ScrollView是同一级的，contentView是UIScrollView的顶级子视图，待会将在代码中添加UIImageView到这个contentView上面。网上有人讲有时候需要将contentView和anchorView设置为等宽等高，总之这个anchorView方便参考，我这里好像没起到什么作用啊，先放这里吧。（我这个地方如果设置了它们等高等宽，scrollview将不能滚动了，因为contentSize和size一样了。）

加的约束为：

anchorView距离父视图的边缘都是0。

UIScrollView距离距离父视图的边缘都是0。

contentView距离距离父视图的边缘都是0。

将contentView的宽和高的约束都拖到.h中，设置成关联的变量。

5.在代码中添加UIImageView到contentView

在viewDidLoad中的部分代码如下：

self.contentViewWidth.constant =frameWidth*3;

self.contentViewHeight.constant =kBoundsHeight;

_pageScroll.backgroundColor = [UIColorclearColor];

    _pageScroll.pagingEnabled =YES;

    _pageScroll.showsHorizontalScrollIndicator =NO;

    _pageScroll.showsVerticalScrollIndicator =NO;

    _pageScroll.bounces =NO;//不让反弹

    _pageScroll.delegate =self;

    for(NSInteger i=0;i<guideImagesArray.count;i++)

    {

        UIImageView *imgeView = [[UIImageViewalloc]initWithFrame:CGRectMake(i*frameWidth,0,frameWidth,kBoundsHeight)];

        NSString *imagePath = [[NSBundlemainBundle]pathForResource:[guideImagesArrayobjectAtIndex:i]ofType:@"png"];

        imgeView.image = [UIImageimageWithContentsOfFile:imagePath];

        if(i ==guideImagesArray.count -1)

        {

            imgeView.userInteractionEnabled =YES;

            _gotoMainViewBtn = [UIButtonbuttonWithType:UIButtonTypeCustom];

            _gotoMainViewBtn.frame =CGRectMake(0,kBoundsHeight - 170,frameWidth,100);

            [_gotoMainViewBtnaddTarget:selfaction:@selector(gotoMainView:)forControlEvents:UIControlEventTouchUpInside];

            [imgeView addSubview:_gotoMainViewBtn];

        }

        if(i==guideImagesArray.count-1)

        {

            _imageView = imgeView;

        }

        [_contentViewaddSubview:imgeView];

    }

这样设置之后发现，界面是600*600的，没有达到效果。这是ViewController自身View的尺寸都不对。

在viewDidLoad的上面代码片段前面加入

CGFloat frameWidth = CGRectGetWidth([UIScreen mainScreen].bounds);

 CGFloat frameHeight = CGRectGetHeight([UIScreen mainScreen].bounds);

self.view.frame =CGRectMake(0,0,frameWidth,kBoundsHeight);

来重新设置ViewController的View的尺寸。

运行起来发现就可以了。

注意这个地方并没有设置UIScrollView的contentSize，而是通过设置了contentView的尺寸以及约束来把UIScrollView撑开的。

注意：这个地方需要设置view的frame，不设置的话就是600*600的。这是因为我们是用的单独的xib文件造成的，如果是放在StoryBoard中的UIViewController就不需要在其viewDidLoad设置其View的尺寸！

这里有一个在StoryBoard中利用AutoLayout对UIScrollView进行布局的demo的下载地址：

UIScrollView实现引导页（AutoLayout布局）