[Xcode11] UIScrollViewとAutolayoutのベストプラクティス

UIScrollViewでよくつまずいてたけど、うまくできるようになったのでシェアします。
##はじめに
みなさんはScrollViewは使ってますか？
おそらくほとんどのアプリで使われていると思います。
しかし、

ScrollViewでAuto layoutで並べるのはApple開発者でも難しい

ということらしいのです(引用元)。

Apple開発者というのはAppleで働いているエンジニアの方なのか、Appleデバイス用のアプリのデベロッパーなのかわかりませんが(おそらく前者だとは思いますが)、結構複雑で久しぶりにやると忘れてしまうし、Xcode 11になってやり方が変わったのでここに残しておきますね。

ここではScrollViewにContainerViewを入れて、視覚的にわかりやすくデザインを組めるようなやり方を説明します。

あとこの文章はStoryboardとAutolayoutユーザー向けです。

間違ってるところがあったら指摘してくれるとありがたいです🙇‍♂️

##開発環境
Xcode11
Swift 5
iOS 11+ (←これ重要です！理由は後述します)

##やり方
###1
ViewControllerの適当な場所にScrollViewを配置し、Autolayoutで制約を設定する。

###2
するとこのように赤く警告されてしまいます。

###3
理由を見てみると、
"Has ambiguous scrollable content height and width"
つまり、「スクロール可能なコンテンツの高さと幅があいまい」ということです。

###4
とりあえずこのエラーは無視しますw
そして、ScrollViewの中にContainerViewを配置します。
この時ScrollViewとContainerViewが親子関係となっていることを確認してください。

###5
このScrollViewのContent Layout GuideとContainerViewをコマンドキー⌘を使って選択したあと、AutolayoutのAlignを使って上下左右を固定します。

###6
そして、Container Viewから副クリックもしくはcontrolキーを押しながらFrame Layout Guideに青い線を伸ばし、Equal Widthsを選択します。

###7
最後にContainerViewの高さを設定し、ScrollViewは終わりです！

###8
あとはContainer Viewに接続されたViewにUI部品を配置するだけです。

##iOS 10以下はこれが使えない理由
実はContent Layout GuideとFrame Layout GuideはiOS 11から使えるようになっていたけれどしばらくStoryboard上では使えず、やっとXcode 11でStoryboard上で使えるようになったのです。正直iOS 11以上はiOSユーザーの9割が使っているのでiOS 10以下はメンテナンスの費用を考えるとサポートを切った方が良いと思うのですが、業務などでiOS 10以下もサポートしないといけない場合は以下のサイトを見てみてください。

Xcode11のIBに追加されたContentLayoutGuideとFrameLayoutGuideについて iOS10位かもサポートしたいんだけど。。。

##最後に
お疲れ様でした！
これでうまくScrollViewを設定できたでしょうか。
少しめんどくさいのでXcodeのアプデでもっと楽にできるようになることを期待します。

この記事を読んでScrollViewをうまく設定できた方は、良ければいいね👍お願いします！

最後までお読みいただきありがとうございました😊