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

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

ということらしいのです([引用元](https://appcoding.net/swift-uiscrollview-autorayout/))。

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

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

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

間違ってるところがあったら指摘してくれるとありがたいです🙇‍♂️<img width="630" alt="スクリーンショット 2020-01-06 22.18.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562702/1b2bcbd8-1177-d9d8-0f5c-7b7f97da935f.png">


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

##やり方
###1
ViewControllerの適当な場所にScrollViewを配置し、Autolayoutで制約を設定する。
<img width="554" alt="スクリーンショット 2020-01-06 22.03.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562702/ae248414-70e6-16aa-6ce0-2e69964e5314.png">

###2
するとこのように赤く警告されてしまいます。
<img width="554" alt="スクリーンショット 2020-01-06 22.03.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562702/d4ed2f51-fa94-9abb-6de3-f59b029f85d1.png">

###3
理由を見てみると、
"Has ambiguous scrollable content height and width"
つまり、「スクロール可能なコンテンツの高さと幅があいまい」ということです。
<img width="328" alt="スクリーンショット 2020-01-06 22.04.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562702/ea05d8d2-0611-95aa-48ec-8edeccf1320c.png">

###4
とりあえずこのエラーは無視しますw
そして、ScrollViewの中にContainerViewを配置します。
この時ScrollViewとContainerViewが親子関係となっていることを確認してください。
<img width="630" alt="スクリーンショット 2020-01-06 22.18.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562702/b9aaa6ce-1c86-97f8-84d2-f3d3582290ef.png">

###5
このScrollViewのContent Layout GuideとContainerViewをコマンドキー⌘を使って選択したあと、AutolayoutのAlignを使って上下左右を固定します。
<img width="868" alt="スクリーンショット 2020-01-06 22.26.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562702/2986cb41-7d6d-e995-e6a7-b7f40d0d2521.png">

###6
そして、Container Viewから副クリックもしくはcontrolキーを押しながらFrame Layout Guideに青い線を伸ばし、Equal Widthsを選択します。
<img width="428" alt="スクリーンショット 2020-01-06 22.27.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562702/1ae6bb77-3b40-920b-227d-afbb01c5f8e4.png">

###7
最後にContainerViewの高さを設定し、ScrollViewは終わりです！
<img width="520" alt="スクリーンショット 2020-01-06 22.31.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562702/7fa44295-b0bb-0c99-f68a-38837da542fa.png">

###8
あとはContainer Viewに接続されたViewにUI部品を配置するだけです。
<img width="455" alt="スクリーンショット 2020-01-06 22.51.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562702/ec22d7ed-8f57-afc4-e76a-7c2ee46bc1ae.png">

##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位かもサポートしたいんだけど。。。](https://qiita.com/owen/items/2fab4a4482834b95e349#ios10以下もサポートしたいんだけど)

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

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

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