【Swift4】UIScrollViewで横スクロールのページングを3分で実装する方法

UIScrollViewで横スクロール型のページングを実装する方法です。
Storyboardを使用してサクッと作成していきます。

手順
1.UIScrollViewとUIPageControlの配置
2.UIScrollViewの中身を配置
3.UIScrollViewのコンテンツサイズを指定
4.UIScrollViewのデリゲートを設定しUIPageControlと連携させる

1.UIScrollViewとUIPageControlの配置

まずプロジェクトを作成したら Main.storyboard に UIScrollView と UIPageControl を配置します。

UIScrollViewは初期ではページング設定になっていないのでページングできるようにの設定を変更します。

Paging Enabled → チェックをいれる

UIPageControlの点々は初期で白色なのでわかりやすいように現在のページを黒、その他をグレーに設定しておきましょう。

その他の色 → Tint Color
現在の色 → Current Page 

2.UIScrollViewの中身を配置

UIScrollViewとUIPageControlの配置ができたら、UIScrollViewの中身となるLabelを配置してきます。

今回はLabelを3つ用意し、全てUIScrollViewの中に配置ました。
また、スクロール時にわかりやすいよう、数字と背景の色を変えています。

ここで重要なのがUIScrollViewのサイズと3つのLabelのサイズです。

ScrollView → x = 0, y = 0, width = 375, height = 300
Label 1      → x = 0, y = 0, width = 375, height = 300
Label 2      → x = 375, y = 0, width = 375, height = 300
Label 3      → x = 750, y = 0, width = 375, height = 300 

3つのLabelのx座標を ScrollViewのwidth * n となるように設定します。

3.UIScrollViewのコンテンツサイズを指定

UIScrollViewの中身を配置したら、UIScrollViewのコンテンツサイズを指定します。

 

UIScrollViewをReferencing OutletsでViewControllerに紐付け「scrollView」として使用できるようにします。

 

次に、scrollView.contentSizeでコンテンツサイズを指定するプログラムを記述します。

ここで補足です、UIScrollViewには2つの領域が存在します。

UIScrollViewの表示領域 = scrollView.frame
UIScrollViewの内容領域 = scrollView.contentSize

表示領域は内容領域が見える範囲です。
内容領域はスクロールして見える領域です。

内容領域が大きければ大きいほど、たくさんスクロールできるということになります。
今回はこの 内容領域にあたる横幅 を 表示領域の横幅*3 としています。
つまり、3ページ分の内容領域にしたということになります。

以上で3つめの手順は終わりです。
この状態で既に横スクロールのページングは完成しています!
試しにビルドしてみてください。

UIScrollViewのデリゲートを設定しUIPageControlと連携させる

UIScrollViewのコンテンツサイズを指定し、横スクロールできるようになったら、最後にUIPageControlと連携させて、現在何ページ目を表示しているかわかるようにしてあげましょう。

 


まず最初にUIScrollViewのdelegeteをViewControllerに設定します。

 

プログラム側も変更します。
UIScrollViewDelegate を追加しましょう。

 

UIPageControlをReferencing OutletsでViewControllerに紐付け「pageControl」として使用できるようにします。

 

最後にスクロールビューのデリゲートメソッドを用意し、その中でページコントロールの現在のページ番号を指定する計算式を記述して終わりです。

まとめ