こんにちは！22新卒の大石です。
最近、アニメ『笑ゥせぇるすまん』を見ています。おすすめです。
第1話が衝撃的すぎるので見てみて下さい笑。

スクロールできる画面を作ろう

今回はUIScrollViewとAutoLayoutで下方向にスクロールできる画面を作ります。
WebページではCSSで簡単に実装できるスクロールですが、iOSでは少し複雑です。
私が個人開発でかなり詰まった内容です。困っている方の助けになれば幸いです。

環境

•  Xcode 13.0
•  Swift 5.5

完成のイメージ

1. UIScrollViewを配置、制約を設定

UIScrollViewを配置し、上下左右全て０で設定します。
※手順を最後まで進めるとエラーは解消されるので、エラーは無視でOK

2. UIScrollView上にUIViewを配置する

先ほど配置したUIScrollViewの上にUIViewを配置します。
今回はUIViewをinnerViewという名前とします。このinnerViewの上からスクロールさせたいコンテンツを配置する感じです。この時innerViewの横幅を画面いっぱいに広げておきましょう。
明示的に背景を青くします。

3. UIScrollViewとinnerViewの制約を設定する

UIScrollViewとinnerViewの制約を設定します。
Content Layout Guide とinnerView を両方選択(commandを押しながら選択)し、Add New Alignment Constraintsを選択し、上部4つの項目をすべて０でチェックを付けます。

加えて、controlを押しながらinnerViewからFrame Layout Guideにドラッグドロップし、Equal Widthを選択します。

4. innerViewの高さを設定する

最後にinnerViewの高さ(Height)を設定します。この高さがスクロールできる長さとなります。
ここでお好みの長さに設定してください。※エラーが出ている場合は何かが間違っています。

これで完了です。正確に設定できている場合、StoryBoard上でinnerViewを選択状態にして二本指でスワイプすると制約の青い線が上下に動くと思います。

innerViewの背景を白くし、innerViewの上にUIViewを配置することで記事冒頭のGIFのような実装ができます。

最後に

今回は、UIScrollViewを用いたスクロール画面の実装方法を紹介しました。
私はアプリ開発を始めたての頃はTableViewを使いがちだったのですが、スクロール画面を実装できるようになったことで開発の幅が大きく広がりました。単純な実装ですが、重要な知識だと思います。

知識の引き出しを増やしていきましょう！！
記事を閲覧していただきありがとうございました！！