#25 横ScrollViewの使い方1例

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


#環境
Xcode：11.4
Swift：5.2
2020/04


##part1
`UIViewController`に`UINavigationBar`を置く．

<img width="680" alt="スクリーンショット 2020-04-11 午後9.06.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/73e416ca-0c13-a1c4-147e-80168f07a698.png">



##part2
`UINavigationBar`に下の4つの制約を付ける．

<img width="267" alt="スクリーンショット 2020-04-11 午後9.27.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/094f8c32-5d19-717b-ac81-ec3d6337670a.png">



##part3
`UIViewController`に`UIScrollView`を置く．

<img width="681" alt="スクリーンショット 2020-04-11 午後9.07.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/3c89a84a-9276-17dc-5952-71ecd43c9b50.png">



##part4
`UIScrollView`に下の4つの制約を付ける．

<img width="265" alt="スクリーンショット 2020-04-11 午後9.08.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/9a04d3b9-fd8e-23fc-7467-116bd3a65833.png">



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

<img width="261" alt="スクリーンショット 2020-04-11 午後9.08.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/30812cd0-1e4d-70a1-57fa-913d04825d18.png">



##part6
`UIScrollView`の上に`UIView`を置く．

<img width="681" alt="スクリーンショット 2020-04-11 午後9.09.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/bcba1d31-07ca-f7f0-3cf4-c66fd8591fbf.png">



##part7
`UIView`に下の4つの制約を付ける．

<img width="268" alt="スクリーンショット 2020-04-11 午後9.09.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/a7a6583d-8f39-2b3d-1342-41ecb8b21116.png">



##part8
`UIScrollView`と`UIView`を両方選択する．

<img width="272" alt="スクリーンショット 2020-04-11 午後9.10.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/fcf48fe5-c50f-062c-ab52-330f55620466.png">



##part9
`UIScrollView`と`UIView`に下の2つの制約を付ける．

<img width="267" alt="スクリーンショット 2020-04-11 午後9.10.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/755eafb8-8726-13a1-a9cf-6cd6982a178e.png">



##part10
`UIView`の`Constraints`の`View.width = width`を選択する．

<img width="270" alt="スクリーンショット 2020-04-11 午後9.11.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/41475cc0-ea95-ad0c-ffa9-7f7415528343.png">



##part11
`UIView`の`Constraints`の`View.width = width`を選択した状態で，`Size inspector`の`Multiplier`を`4:1`にする．

<img width="259" alt="スクリーンショット 2020-04-11 午後9.11.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/554fabe8-d6fd-6b67-d36f-80e406674b01.png">



##part12
`UIView`の上に`UIImageView`を4つ置く．

<img width="682" alt="スクリーンショット 2020-04-11 午後9.13.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/78910081-2337-296c-fe35-31ffe0eab9c5.png">



##part13
`UIImageView`を4つ横に並べる．

<img width="344" alt="スクリーンショット 2020-04-11 午後9.18.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/138a7a7f-1dd8-b94a-9559-dfdd1720dc0d.png">



##part14
`UIImageView`を4つ選択した状態で，下のように`上下左右`と`等しい横幅`の制約を付ける．

<img width="268" alt="スクリーンショット 2020-04-11 午後9.18.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/c73658d2-7f0b-5a93-616b-4b39e8a6ee9b.png">


##part16
`UIScrollView`を選択した状態で，`Attributes inspector`の`Show Horizontal Indicator`のチェックマークを外し，`Paging Enabled`のチェックマークを入れる．

<img width="259" alt="スクリーンショット 2020-04-11 午後9.55.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/b3f933a1-dbbf-9a8a-6555-8bef625f65e9.png">



##part17
後は`UIImageView`に好きなイメージをセットして完了．