UIScrollView　swift

#■UIScrollView
名の通り画面をスクロールさせる奴
基本的にアプリをつくる際sclolViewを敷いていれば急な対応に柔軟に対応できる！

例：画面幅いっぱいの中に急に新しい項目を追加したい時にスクロールで画面幅を広げれば一応画面内に
項目を追加できるので一時的に対応はできる。
その後デザイン修正などが行われる。

#■UIScrollViewが持つパラメーター
パラメーターと言われれば何の事か想像しづらいが
UIScrollViewが持っている領域の事である。

■ContentLayoutGuide
スクロール領域
画面をスクロールできる領域の事である。
まあ領域展開みたいな物ww

■FrameLayoutGuide
UIScrollViewの領域
実際のUIScrollViewの範囲の事

これを踏まえて作っていく

#1
■画面にUIScrollViewを貼り四角ぞれぞれ0の制約をつける。

エラーでるけど無視でOK!
スクロール領域決まってないけど決まってない範囲にどやって制約つけるねんって言ってる！
![スクリーンショット 2021-05-03 16.48.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/db621f5e-13f9-3d49-3054-97a80606715f.png)


#2
■UIScrollViewの中にViewを入れる。
とりあえず何も考えず中にViewを入れよう！
このViewの名前はContentViewなどにしておこう！


![スクリーンショット 2021-05-03 16.53.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/58a7e2be-603f-86bd-eb95-20639357a7ac.png)

#3
■中に入れたContentViewの四角をContentLayOutGuideと合わせよう！
ほなContentViewがスクロール領域になる。

Comand押しながらContentViewとContentLayOutGuide二つを選択して
右下らへんのAdd New Alignment Constraintsを選択
画像のように
Leading Edges
Trailing Edges
Top Edges
Bottom Edges
にチェックマークをつけAdd 4 Constraintsを押す。


![スクリーンショット 2021-05-03 16.55.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/50ff01cc-1445-a8da-be64-1b9d61ecdb68.png)

#4
■ContentViewのwidthとheightを決める。
最終的にContentViewのwidthとheightが全体の画面をスクロールできる領域になる！

例：必ずしもではないがContentViewのwidthとheightをFrameLayoutGuideに合わせて作ることもできる。

ContentViewを選択controlを押して青い線を伸ばしつつFrameLayoutGuideを選択
EqualWidth
EqualHeight
を選択する。
ContentViewの横幅と縦をFrameLayoutGuideに合わせるよ！

![スクリーンショット 2021-05-03 17.13.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/1f61a597-5efb-06df-ec59-b85a158e0e29.png)


そして制約の
横幅
ContentView.Width = FrameLayoutGuide
の右メニューのMultiliperの数値を変更すれば横のスクロール領域が増える。
Multiliper1なら1画面分の横幅
Multiliper2なら2画面分の横幅
![スクリーンショット 2021-05-03 17.14.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/123994e1-4536-27be-f874-851c04ba3e2f.png)


縦幅
ContentView.height = FrameLayoutGuide
の右メニューのMultiliperの数値を変更すれば縦のスクロール領域が増える。
Multiliper1なら1画面分の縦幅
Multiliper2なら2画面分の縦幅
![スクリーンショット 2021-05-03 17.15.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/20397d22-52d2-5d21-0e6c-811bc65b8bce.png)

もちろんただ単にContntViewのwidthとheightのに数値を与1画面のでかさを越えればその分スクロール領域になる。

#■実際の応用編 StackViewを使用
上記の1の工程を終える。

ScrollViewの中に二つViewを入れる。
Page1
Pag2とする。
![スクリーンショット 2021-05-03 18.33.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/506c6503-5a4e-0127-2419-428e524d32c0.png)


このPage1とPage2をStackViewに入れ込む。
![スクリーンショット 2021-05-03 18.34.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/f0e3b7a9-f0f4-cc2f-8dab-7c41fe7af576.png)

#2
stackViewに制約をつける。

top,trailing,bottomはScrollViewに合わせる。
leadingのみFrameLayoutGuideに合わせる。
widthをContentLayOutGuideに合わせる。



![スクリーンショット 2021-05-03 18.38.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/76bb5b9c-ab26-a973-ff91-1dba6105c5a0.png)

#3
stackViewの中身
Page1
Page2
のそれぞれの幅をFrameLayOutGuideと合わせる。
EqualWidth
EqualHeightを使う。

![スクリーンショット 2021-05-03 18.42.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/5708457b-1d4a-fdb9-521a-937c2bac795b.png)

#4
Page1Page2の二つのviewのheightとwidthの幅を変更

Page1.width = 0.57971 x Frame Layout Guide.width
Page1.height = 0.156479 x Frame Layout Guide.height
Page2.width = 0.57971 x Frame Layout Guide.width
Page2.height = 0.156479 x Frame Layout Guide.height
のそれぞれの制約の右メニューのMultiliperの数値を変更1にした場合。

FrameLayOutGuideの1画面分のデカさの縦幅横幅2枚分がstackViewに入ることになり
スクロールできるようになりエラーが消える。

![スクリーンショット 2021-05-03 18.48.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/97a85947-af07-8225-f7c3-9b368398d190.png)
![スクリーンショット 2021-05-03 18.48.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/97731403-c408-9d01-a254-5d1f25c3e976.png)

#5
■StackViewの場合
右メニューAxisを変更するだけで横縦とスクロール領域を変更できる。
![スクリーンショット 2021-05-03 18.51.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/cf1f107b-ebd6-b39e-3287-04117ed259f7.png)

Vertical(縦)
Horizontal(横)

Horizontalにすると

![スクリーンショット 2021-05-03 18.51.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/c5e77699-d157-bac9-8a44-4422b4a8c682.png)
![スクリーンショット 2021-05-03 18.51.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/0b493170-216d-42de-7645-28a181e17c2a.png)


以上UIScrollViewの作り方でした！