#21 UIScrollViewの使い方1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11


##part1
`UINavigationBar`と検索する．

<img width="680" alt="スクリーンショット 2020-02-03 午前0.24.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/9cd4c063-d6d6-084f-53b0-3a33578bf78c.png">



##part2
`UINavigationBar`を`UIViewController`に追加する．

<img width="288" alt="スクリーンショット 2020-02-03 午前0.24.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/713aa24e-8c01-5eee-4345-1abb3f60e298.png">



##part3
`UINavigationBar`に以下の3つの制約を追加する．

<img width="266" alt="スクリーンショット 2020-02-03 午前0.24.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/13632729-0a3d-0ee9-d247-6ccb9d76d550.png">



##part4
`UIViewController`を選択した状態で，`Size inspector`の`Simulated Size`を`Freeform`に変更する．

<img width="259" alt="スクリーンショット 2020-02-03 午前0.25.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/d644e7a7-f376-36c9-3c81-c6a64245f8dc.png">



##part5
`Height`を任意のサイズに変更する．

<img width="261" alt="スクリーンショット 2020-02-03 午前0.25.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/9a61139e-fb71-a523-0d55-8372ac1c6869.png">



##part6
`Main.storyboard`の`UIViewController`が長くなっている事を確認する．

<img width="285" alt="スクリーンショット 2020-02-03 午前0.25.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/67336556-8f67-fd0a-d2ca-38ce37e5aab4.png">



##part7
`UIScrollView`と検索する．

<img width="682" alt="スクリーンショット 2020-02-03 午前0.25.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/c4d1c75b-ab4a-9f8b-ae0a-430121efaed5.png">



##part8
`UIScrollView`を`UIViewController`に追加する．

<img width="277" alt="スクリーンショット 2020-02-03 午前0.26.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/15d8a535-cc62-c05d-e49b-4438373a3616.png">



##part9
`UIScrollView`に以下の4つの制約を追加する．

<img width="267" alt="スクリーンショット 2020-02-03 午前0.26.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/237fcb55-ad62-8307-77a9-9fb8ca29bdce.png">



##part10
`UIScrollView`を選択した状態で，`Size inspector`の`Content Layout Guides`のチェックを外す．

<img width="260" alt="スクリーンショット 2020-02-03 午前0.26.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/e3732c55-225a-6b3e-5bb0-7f7fa8b2b9e0.png">



##part11
`UIView`と検索する．


<img width="682" alt="スクリーンショット 2020-02-03 午前0.26.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/dcf87829-7e47-0dfa-2db7-016b0b0dd2c9.png">



##part12
`UIView`を`UIViewController`に追加する．

<img width="282" alt="スクリーンショット 2020-02-03 午前0.27.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/2c2229eb-c424-b172-d34e-3ea5d9c5ec16.png">



##part13
`UIView`に以下の5つの制約を追加する．

<img width="269" alt="スクリーンショット 2020-02-03 午前0.27.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/d419ad07-da52-b725-08aa-b2310f7b10f8.png">



##part14
`Control`キーを押しながら，先ほど追加した`UIView`から，元々`UIViewController`上にあった`UIView`へドラッグ・ドロップする．
`Equal Widths`を選択する．

<img width="341" alt="スクリーンショット 2020-02-03 午前0.27.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/24f545af-01e6-2d08-f4a0-8ac01d856291.png">



##part15
すると制約がズレることがあるので，`UIView`を正しい位置に戻して`Selected Views`の`Update Constraint Constants`を選択する．

<img width="642" alt="スクリーンショット 2020-02-03 午前0.28.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/e69f5228-5e8a-ecb6-9959-c29718c1f9ff.png">



##part16
適当にラベルを乗っけてビルドし，動作に問題がなければOK．

<img width="307" alt="スクリーンショット 2020-02-03 午前0.29.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/3ce2ebf8-cf0f-d506-bcfe-1843991d6f68.png">