【Swift】横スクロールするページをStoryboardで実装する

コードで実装する横スクロールについては、以前に下記記事で取り上げました。

今回はStoryboardで横スクロールを実装する方法について教えていただいたので、備忘も兼ねて記事に残します。

・【Swift】横スクロールするページを実装する(UIScrollView/UIPageControl) - Swift・iOS

・【Swift】UIScrollViewで無限に左右スクロールできるページを実装する - Swift・iOS

・【Swift】自動でスクロールするページを実装する（UIScrollView/Timer） - Swift・iOS

■開発環境

・Xcode 10.3

・Swift 5.0.1

■サンプルのイメージ

■実装手順

1.StoryboardでUIScrollViewを配置

2.UIScrollViewに上下左右の制約と高さの制約を追加

3.UIScrollViewの中にUIViewを配置

4.UIViewの上下左右の制約を0で設定

5.UIViewの高さをUIScrollViewに合わせる

ScrollViewとViewをShiftキーで選択

↓

Add New ConstraintsでEqual Width、Equal Heightを選択して制約を追加

6.UIViewの横幅をUIScrollViewの3倍にする

UIViewの横幅の制約を選択

↓

Multiplierを3:1に設定

7.UIViewの中にUIImageViewを3つ追加

8.3つのUIImageViewの上下左右の制約を0にする

9.3つのUIImageViewの幅を揃える

3つのUIImageViewをShiftで選択し、Add New ConstraintsでEqual Widthの制約を追加

10.UIImageViewに画像を設定

11.UIScrollViewのShow Horizontal IndicatorとPaging Enabledを設定して完成