![見出し画像](https://assets.st-note.com/production/uploads/images/78583442/rectangle_large_type_2_123b11c685cc0a069c15ccc336dadd95.png?width=1200)
Photo by
okanote
Scroll Viewを使ってみた
スクロールはどのアプリにも大体ありますよね。
備忘用に基礎的な実装をしてみます。
1-1
Storyboardを開く
![](https://assets.st-note.com/img/1652583927362-lHzPygre8U.png?width=1200)
1-2
scrollViewを追加する
![](https://assets.st-note.com/img/1652583963232-byTz3u4OkA.png?width=1200)
1-3
制約をつける、全てsafeAreaから0に設定
*この時点で制約エラーが出ますが一旦無視してOKです。
![](https://assets.st-note.com/img/1652584074978-CKndcC9aOK.png?width=1200)
1-4
Viewを追加する(わかりやすく色をつけておきましょう)
![](https://assets.st-note.com/img/1652584161137-moMCNloz3P.png?width=1200)
![](https://assets.st-note.com/img/1652584192813-tjYTRZCiBb.png?width=1200)
1-5
Viewにも制約をつける、全てscrollViewから0に設定 & 高さを2,000にする
![](https://assets.st-note.com/img/1652584254710-VRj1WCwzbC.png?width=1200)
1-6
scrollViewとViewを両方選択した状態で以下Gifのように"Equal Width"にチェクを入れる
![](https://assets.st-note.com/production/uploads/images/78582900/picture_pc_d788c1ba7a64d9a7c980eed0d5fcfae9.gif?width=1200)
1-7
スクロールを2,000に設定したのでstoryboard上でも下まで確認できるようにデバイスの高さを可変にしましょう。
storyboard全体をクリックして右上のSimulated SizeをFixedからFree Formに変更すると下のスクロール部分も確認できます。
![](https://assets.st-note.com/img/1652584493325-c5E6tzvWdO.png?width=1200)
![](https://assets.st-note.com/img/1652584632738-OIen4zOeCm.png?width=1200)
1-8
スクロールしたことがわかりやすいように下部分にテキトーにボタンとかを置いておきましょう。
![](https://assets.st-note.com/img/1652584786277-DTOgEevv9j.png?width=1200)
◉ここまでできたらビルドをしてきちんとスクロールができているか確認しましょう。
![](https://assets.st-note.com/production/uploads/images/78583411/picture_pc_80a7b42da083d519832c09331c915cbf.gif?width=1200)
今回は以上です。