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

UIScrollViewとUIPageControlを使って横スクロールするページを実装してみました。

Storyboardは使わずコードのみで実装しています。

※2019/2 追記

UIScrollViewに関しては以下記事でも取り上げています！

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

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

※2019/8 追記

↓Storyboardで横スクロールを実装する方法について記事にしました

www.hfoasi8fje3.work

■開発環境

・Xcode 10.1

・Swift 4.2.1

■サンプルのイメージ

■実装部分

・ViewController.swift

import UIKit

class ViewController: UIViewController {
    
    private var scrollView: UIScrollView!
    private var pageControl: UIPageControl!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // scrollViewの画面表示サイズを指定
        scrollView = UIScrollView(frame: CGRect(x: 0, y: 200, width: self.view.frame.size.width, height: 200))
        // scrollViewのサイズを指定（幅は1メニューに表示するViewの幅×ページ数）
        scrollView.contentSize = CGSize(width: self.view.frame.size.width*3, height: 200)
        // scrollViewのデリゲートになる
        scrollView.delegate = self
        // メニュー単位のスクロールを可能にする
        scrollView.isPagingEnabled = true
        // 水平方向のスクロールインジケータを非表示にする
        scrollView.showsHorizontalScrollIndicator = false
        self.view.addSubview(scrollView)
        
        // scrollView上にUIImageViewをページ分追加する(今回は3ページ分)
        let imageView1 = createImageView(x: 0, y: 0, width: self.view.frame.size.width, height: 200, image: "image1")
        scrollView.addSubview(imageView1)
        
        let imageView2 = createImageView(x: self.view.frame.size.width, y: 0, width: self.view.frame.size.width, height: 200, image: "image2")
        scrollView.addSubview(imageView2)
        
        let imageView3 = createImageView(x: self.view.frame.size.width*2, y: 0, width: self.view.frame.size.width, height: 200, image: "image3")
        scrollView.addSubview(imageView3)
        
        // pageControlの表示位置とサイズの設定
        pageControl = UIPageControl(frame: CGRect(x: 0, y: 370, width: self.view.frame.size.width, height: 30))
        // pageControlのページ数を設定
        pageControl.numberOfPages = 3
        // pageControlのドットの色
        pageControl.pageIndicatorTintColor = UIColor.lightGray
        // pageControlの現在のページのドットの色
        pageControl.currentPageIndicatorTintColor = UIColor.black
        self.view.addSubview(pageControl)
    }
    
    // UIImageViewを生成
    func createImageView(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat, image: String) -> UIImageView {
        let imageView = UIImageView(frame: CGRect(x: x, y: y, width: width, height: height))
        let image = UIImage(named:  image)
        imageView.image = image
        return imageView
    }
}

// scrollViewのページ移動に合わせてpageControlの表示も移動させる
extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        pageControl.currentPage = Int(scrollView.contentOffset.x / scrollView.frame.size.width)
    }
}

■関連リンク

・UIScrollView - UIKit | Apple Developer Documentation

・UIPageControl - UIKit | Apple Developer Documentation

・【Swift4】UIScrollViewで横スクロールのページングを3分で実装する方法 | ニートに憧れるプログラム日記

※サンプル画像は以下のサイトの画像を使用しています。

https://pixabay.com/ja/