iOS UIScrollView通过AutoLayout实现自动布局

一、前言

最开始使用UIScrollVIew都是用纯代码实现布局的，后来为了提高开发效率使用IB的AutoLayout自动布局，由于UIScrollView与一般视图的自动布局约束方式有些不同，如果不了解其中的原理或者不经常使用AutoLayout实现自动布局，突然要用AutoLayout来实现UIScrollView的布局，很可能就会感觉很困难，为了加深记忆和以后开发的便利特地写了这篇文章。

二、具体步骤

1. 将scrollView拖进视图控制器的View，并设置上下左右约束为0；
2. 将一个View拖进srollView作为所有subviews的父容器视图contentView；
   scollView的自动布局涉及到它内部的frameLayoutGuide与contentLayoutGuide属性

@available(iOS 11.0, *)
open var frameLayoutGuide: UILayoutGuide { get }

Use this layout guide when you want to create Auto Layout constraints related to the content area of a scroll view.
当您想要创建明确涉及滚动视图本身的框架矩形而不是其内容矩形的自动布局约束时，请使用此布局指南。

@available(iOS 11.0, *)
open var contentLayoutGuide: UILayoutGuide { get }

Use this layout guide when you want to create Auto Layout constraints that explicitly involve the frame rectangle of the scroll view itself, as opposed to its content rectangle.
当您想要创建与滚动视图的内容区域相关的自动布局约束时，请使用此布局指南。

frameLayoutGuide与contentLayoutGuide

从苹果的官方文档的说明中，我们可以看出frameLayoutGuide主要是用来设置与scrollView的frame有关的约束，比如内容区的宽或高是与frame的对应值相等，x横坐标或者y纵坐标与frame的对应值相等的，而contentLayoutGuide主要是用来设置与滚动的内容区域有关的约束，例如：内容区是纵向滚动的，那么内容区的top和bottom是与contentLayoutGuide相等的，水平方向是与它中间对齐的。

3. 设置contentView与scrollView的frameLayoutGuide的左、右两个方向的约束为0；
   因为contentView与scrollView等宽且横轴方向位置固定为0。

设置与frameLayoutGuide的约束

4. 设置contentView与scrollView的contentLayoutGuide的上、下两个方向的约束为0，水平方向中间对齐；
   因为contenView即scrollView的内容区且纵向滚动，所以纵轴方向与内容区的相对位置固定，与内容区水平方向对齐。

设置与contentLayoutGuide的约束

5. 约束好内容区即contentView的高度;
   上一步设置完约束还是会报错，因为内容区即contenView的高度还未确定，如果内容区的高度是固定的，可以设置contentView的高度约束为固定值；如果内容区高度根据不同的内容而变化，那就不需要设置contentView的高度约束，只要根据需要将控件添加到contentView，然后从上到下设置好各个控件纵向的约束。

三、结语

本篇文章介绍的只是UIScollView纵向滚动自动布局的实现，但是我相信大家看完这篇文章后应该可以举一反三，自己实现UIScollView横向滚动自动布局的设置。