UIPageControlで横スライドのチュートリアルを作る方法【Swift】

■はじめに

本記事では、「UIPageControl」「UIScrollView」を使用して、横スクロールのよくあるチュートリアル画面を作る方法をまとめています。
使用している画像はサンプルの画像なので、チュートリアルの画像に差し替えて使用してください。

■手順

ソースコードは、こちらにアップしていますので、とりあえず動かしてみたい方はクローンして確認してください。

本記事の方法だと、スクロールした時に、以下のようにUIPageControlが切り替わるようになります。

フィールドに、今回のチュートリアルで使用する「UIPageControl」「UIScrollView」の定義と、使用する画像名を保持しているリストを宣言します。

var pageControl: UIPageControl!
var scrollView: UIScrollView!
    
// 表示する画像の名前のリスト
let imageArray = ["memoruntyo", "dc_dentaku", "fx_sp", "check_imikotoba", "patata_talk", "patata_wiq", "shiftter"]

「viewDidLoad」にて、画面のサイズを取得して定数として定義した後に、スクロールビューの定義を行います。

// 画面の横のサイズを取得する
let scWidth = self.view.frame.width
// 画面の縦のサイズを取得する
let scHeight = self.view.frame.height

// ScrollViewを取得する
scrollView = UIScrollView()
scrollView.frame = CGRect(x: 0, y: 0, width: scWidth, height: scHeight)
// 横方向のスクロールバーを非表示にする
scrollView.showsHorizontalScrollIndicator = false;
// 縦方向のスクロールバーを非表示にする
scrollView.showsVerticalScrollIndicator = false
// ページングを許可する（中途半端な位置でスクロールが止まらないように設定）
scrollView.isPagingEnabled = true
// ScrollViewのデリゲートを設定する
scrollView.delegate = self
// スクロールの画面サイズを指定する
scrollView.contentSize = CGSize(width: CGFloat(imageArray.count) * scWidth, height: 0)
// ScrollViewをViewに追加する
self.view.addSubview(scrollView)

「viewDidLoad」にて、上記で定義したスクロールビューにチュートリアルの画像を設定します。

// 画像をページ数分設定する
for i in 0 ..< imageArray.count {
    let imgView = UIImageView()
    imgView.frame = CGRect(x: CGFloat(i) * scWidth, y: 0, width: scWidth, height: scHeight)
    imgView.image = UIImage(named: imageArray[i])
    scrollView.addSubview(imgView)
}

「viewDidLoad」にて、ページコントロールの定義を行います。

// PageControlを作成する
pageControl = UIPageControl(frame: CGRect(x: 0, y: scHeight - 50, width: scWidth, height: 50))
// PageControlするページ数を設定する
pageControl.numberOfPages = imageArray.count
// 現在ページを設定する
pageControl.currentPage = 0
// 「pageControl」のタップイベントを止める
pageControl.isUserInteractionEnabled = false
// pageControlをViewに追加する
self.view.addSubview(pageControl)

「scrollViewDidEndDecelerating」の関数を定義し、その内部にて、ページが切り替わった際には、ページコントロールも切り替えるように処理を追加します。

/// スクロール終了後の処理
/// - Parameter scrollView: scrollView description
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    // スクロール数が1ページ分になったら時
    if fmod(scrollView.contentOffset.x, scrollView.frame.maxX) == 0 {
        // ページの場所を切り替える
        pageControl.currentPage = Int(scrollView.contentOffset.x / scrollView.frame.maxX)
    }
}

これで、よく見る横スクロールのチュートリアルの完成です。
ソースコードの全量は以下に記載しておきます。

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {
    
    var pageControl: UIPageControl!
    var scrollView: UIScrollView!
    
    // 表示する画像の名前のリスト
    let imageArray = ["memoruntyo", "dc_dentaku", "fx_sp", "check_imikotoba", "patata_talk", "patata_wiq", "shiftter"]
    
    override func viewDidLoad() {
        // 画面の横のサイズを取得する
        let scWidth = self.view.frame.width
        // 画面の縦のサイズを取得する
        let scHeight = self.view.frame.height
        
        // ScrollViewを取得する
        scrollView = UIScrollView()
        scrollView.frame = CGRect(x: 0, y: 0, width: scWidth, height: scHeight)
        // 横方向のスクロールバーを非表示にする
        scrollView.showsHorizontalScrollIndicator = false;
        // 縦方向のスクロールバーを非表示にする
        scrollView.showsVerticalScrollIndicator = false
        // ページングを許可する（中途半端な位置でスクロールが止まらないように設定）
        scrollView.isPagingEnabled = true
        // ScrollViewのデリゲートを設定する
        scrollView.delegate = self
        // スクロールの画面サイズを指定する
        scrollView.contentSize = CGSize(width: CGFloat(imageArray.count) * scWidth, height: 0)
        // ScrollViewをViewに追加する
        self.view.addSubview(scrollView)
        
        // 画像をページ数分設定する
        for i in 0 ..< imageArray.count {
            let imgView = UIImageView()
            imgView.frame = CGRect(x: CGFloat(i) * scWidth, y: 0, width: scWidth, height: scHeight)
            imgView.image = UIImage(named: imageArray[i])
            scrollView.addSubview(imgView)
        }
        
        // PageControlを作成する
        pageControl = UIPageControl(frame: CGRect(x: 0, y: scHeight - 50, width: scWidth, height: 50))
        // PageControlするページ数を設定する
        pageControl.numberOfPages = imageArray.count
        // 現在ページを設定する
        pageControl.currentPage = 0
        // 「pageControl」のタップイベントを止める
        pageControl.isUserInteractionEnabled = false
        // pageControlをViewに追加する
        self.view.addSubview(pageControl)
    }
    
    
    /// スクロール終了後の処理
    /// - Parameter scrollView: scrollView description
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        // スクロール数が1ページ分になったら時
        if fmod(scrollView.contentOffset.x, scrollView.frame.maxX) == 0 {
            // ページの場所を切り替える
            pageControl.currentPage = Int(scrollView.contentOffset.x / scrollView.frame.maxX)
        }
    }
}