はじめに
UIScrollView を使おうと思ったら、AutoLayout の制約をかけるのにつまづいてしまいました。
ここでは、Xcode 12.4 の UIScrollView の AutoLayout の制約をかける方法をまとめてます。
環境
Xcode 12.4
macOS Big Sur 11.1 M1チップ
実践
1. UIScrollView の AutoLayout の制約をかける
はじめに、Storyboard の ViewController の上に ScrollView を追加します。
上下左右を 0 で固定しましょう。
固定する前に手動でいっぱいまで広げておくと見やすくなります。
上に固定のヘッダーがあるアプリをよく見るので、上に imageView を置いてみました（これで合ってる分からないですが、つけてみたかったので笑）。ない場合でもやることは同じです！
そうすると、下の画像のように赤いラインで表示されてしまいます。
ここで僕はつまづいてました。
次に、ScrollView が選択された状態で右の sizeページを開いて、
Content Layout Guides のチェックを外します。（画像見切れててすみません）
チェックを外すと、左側の ScrollView の中の ContentLa...と FrameLay...が消えることが確認できます。
2. Scrollview の上に View をのせる
ScrollView の中に View が入るように追加します。
こちらも ScrollView と同じように上下左右を 0 で固定しましょう。
それと Height を表示したい長さにします。
親に同じ View という名前があるので、こちらの View は ContentView という名前をつけてます。
次に、コントロール or 右クリック を押しながらドラッグドロップで
ContentView から View に引っ張ります。
項目が表示されるので、Equal Widths を選択します。
ここで赤のラインとエラーが消えれば OK です。
3. ViewControllerのサイズを変える
これで最後です！
左の ViewController もしくは Storyboard上の上部バーのアイコンを選択して、右の sizeページにいきましょう。
SimulatedSize が Fixed になってるので Freeform にします。
するとHeight の項目が出てくるので、先ほど View を追加したときに設定した Height と同じ値を入れましょう。
これで ViewController が指定した長さになります。
完成！
ラベルなどをつけて確認してみましょう。AutoLayout も忘れずに...
ちゃんと下まで動きました！
他の機種で実行しても問題なく表示されました。
上のヘッダーは ScrollView の中にはないので固定されてます。
あとは View の背景色を同じ色にすれば完璧ですね。
最後に
いかがでしたでしょうか？
ContentLayoutGuide と FrameLayoutGuide を消すのはどうなのかなと、書いてて疑問に思いました。
それは使えない・もっと簡単な方法があるなどございましたら、教えていただけるとありがたいです！
初めての投稿なので分かりづらいところがあったかもしれません。こちらもご指摘いただければと思います。