dasukoの技術ブログ

現役エンジニアのブログです。

【Swift】UIPageControlを使ってみる

はじめに

今回はUIPageControlを使ってみます!

公式ドキュメントはこちらです。

Apple Developer Documentation

UIPageControlは水平方向にページング用のドットを複数表示します。

これだけだと伝わらないと思うので、最後にgif載せます!

 

今回の実装では、前回のUIPageViewControllerを使用しています。

dasuko.hatenadiary.jp

実装してみる

今回は前回使ったUIPageViewControllerと組み合わせてUIPageControlを使ってみたいと思います!

import UIKit

class PageViewController: UIPageViewController {
    // ViewControllerを管理する
    var controllers: [UIViewController] = []
    var pageControl: UIPageControl!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // 赤いViewController
        let redVC = UIViewController()
        redVC.view.backgroundColor = .red
        
        // 青いViewController    
        let blueVC = UIViewController()
        blueVC.view.backgroundColor = .blue

        controllers = [redVC, blueVC]
        // 最初のViewControllerを赤色のViewControllerを設定
        setViewControllers([controllers[0]], direction: .forward, animated: true, completion: nil)
        self.dataSource = self
        
        pageControl = UIPageControl(frame: CGRect(x:0, y:self.view.frame.height - 100, width:self.view.frame.width, height:50))
        pageControl.numberOfPages = controllers.count
        pageControl.currentPage = 0
        self.view.addSubview(pageControl)
    }
}

// MARK: - UIPageViewControllerDataSource
extension PageViewController: UIPageViewControllerDataSource {
    func presentationCount(for pageViewController: UIPageViewController) -> Int {
        return controllers.count
    }
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        var index = controllers.firstIndex(of: viewController)!
        pageControl.currentPage = index
        index = index - 1

        if index < 0 {
            return nil
        }
        
        return controllers[index]
    }
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        var index = controllers.firstIndex(of: viewController)!
        pageControl.currentPage = index
        
        if index == controllers.count - 1 {
            return nil
        }

        index = index + 1
        return controllers[index]
    }
}

プロパティ

現在のページを指定するにはcurrentPageに現在のページのインデックスを設定します。

pageControl.currentPage = 0

 

表示するページ数を設定します。

pageControl.numberOfPages = controllers.count

UIPageControlのドットの色を指定します。

pageControl.pageIndicatorTintColor

実行してみる

実行してみました。

少し判定がシビアで、ページを完全に切り替えないと、UIPageControlに反映されないですね gyazo.com

参考

Apple Developer Documentation

PageViewControllerとPageControl - すいすいSwift