Storyboard 上で UIScrollView を AutoLayout を使って設定する

環境: Xcode8.2.1, Swift3

Storyboard 上で UIScrollView を AutoLayout を使って設定する方法について。
ちょっとハマったのでメモ。

ビューの階層構造は
UIViewController.view -> UIScrollView -> UIView
とする。

f:id:xyk:20170308121658p:plain

UIScrollView の制約

UIScrollView の制約は以下のように上下左右に設定。
f:id:xyk:20170308121705p:plain

UIScrollView上に追加する UIView の制約

UIScrollView上に追加する UIView の制約は以下のように設定。
制約はすべて Superview である UIScrollView に対して設定を行う。
上下左右の制約に加え、widthheight の制約も必要になる。
今回は UIScrollView の width , height と Equal な制約を追加する。
これにより UIScrollView のcontentSizeが決定する。
f:id:xyk:20170308121710p:plain

ちなみにControlを押しながらViewからUIScrollViewドラッグ&ドロップすると簡単に制約追加できる。
f:id:xyk:20170308130155p:plain
こんな感じになる。
f:id:xyk:20170308130220p:plain

Adjust Scroll View insets の設定

UIViewController の Adjust Scroll View insetsのチェックは外しておく。
(コード上ならself.automaticallyAdjustsScrollViewInsets = falseとなる)
f:id:xyk:20170308121713p:plain

UIViewController の Adjust Scroll View insets
UIViewController.view.subviews[0] が対象になるとのこと。

今回のケースではUIScrollViewに対して自動調整が設定されるが、UIScrollViewの上側の制約はtopLayoutGuideと Equal の設定をしており、ここからさらに更に余白(64pt)が追加されてしまうのでオフとしておく。


複数ビューを並べる例

ビューの階層構造は以下のような複数ビューを並べる場合。

UIViewController.view -> UIScrollView --> UIView1
                                      └-> UIView2

こんな感じ。

f:id:xyk:20170309104338p:plain

UIScrollView の制約

先ほどの例と同じ。

RedView の制約

上下左右の制約とwidth、heightの制約を追加。

f:id:xyk:20170309104407p:plain

BlueView の制約

上下左右の制約とheightの制約を追加。

f:id:xyk:20170309104410p:plain

これでcontentSizeが決定したため制約エラーがなくなり、設定が完了した。