【Swift】DataSourceでParchmentを実装する方法

はじめに

ページャーを実装する必要があり、自分で作るのはめんどくさかったので、いいライブラリないかなと思い調べたところParchmentというライブラリを見つけたので実装方法をメモします。

前提条件

Parchmentライブラリがインストールされていること

実装方法

完成イメージ

今回は、画面全体にページャーを実装するのではなく、表示させたい範囲に実装しています。

手順1

まず初めに表示したいViewとViewControllerのセットをそれぞれ作成します。

手順２

ページャーを実装したいView内にUIViewを配置して、ViewControllerとOutlet接続してください。

手順3

Parchmentをページャーを実装したいメインのView内にimportします。

import Parchment

手順4

メニューに表示させたいタイトルと表示させるViewを配列に格納します。

    let titles = [
        "商品情報",
        "レビュー"
    ]
    var vcs: [UIViewController] = [
        ProductInformationViewController(),
        ReviewViewController()
    ]

手順5

DataSourceの設定をします。

    // ページの数
    func numberOfViewControllers(in pagingViewController: Parchment.PagingViewController) -> Int {
        return titles.count
    }
    // 各ページViewContollerのイニシャライズ
    func pagingViewController(_: Parchment.PagingViewController, viewControllerAt index: Int) -> UIViewController {
        return vcs[index]
    }
    // メニュータイトルの設定と、選択中のVCの連動設定
    func pagingViewController(_: Parchment.PagingViewController, pagingItemAt index: Int) -> Parchment.PagingItem {
        return PagingIndexItem(index: index, title: titles[index])
    }

手順6

viewDidLoad内に以下のような設定をしておわりになります。
僕の場合は、UIViewの名前を「InfoAndReviewView」としていますが、そこは各々で作成したUIViewの名前にしてください。

override func viewDidLoad() {
    super.viewDidLoad()
    // PagingViewControllerというものをインスタンス化
    let pagingVC = PagingViewController()
    pagingVC.dataSource = self
    pagingVC.select(index: 0)
    addChild(pagingVC)
    // ペジャーを表示させるUIViewの中にViewを追加する
    InfoAndReviewView.addSubview(pagingVC.view)
    pagingVC.didMove(toParent: self)
    pagingVC.view.translatesAutoresizingMaskIntoConstraints = false
    
    // メニューアイテム設定
    pagingVC.selectedBackgroundColor = .blue
    pagingVC.indicatorColor = .green
    pagingVC.textColor = .white
    pagingVC.selectedTextColor = .purple
    pagingVC.menuBackgroundColor = .red
    // 制約の設定
    pagingVC.view.leadingAnchor.constraint(equalTo: InfoAndReviewView.safeAreaLayoutGuide.leadingAnchor).isActive = true
    pagingVC.view.trailingAnchor.constraint(equalTo: InfoAndReviewView.safeAreaLayoutGuide.trailingAnchor).isActive = true
    pagingVC.view.bottomAnchor.constraint(equalTo: InfoAndReviewView.safeAreaLayoutGuide.bottomAnchor).isActive = true
    pagingVC.view.topAnchor.constraint(equalTo: InfoAndReviewView.safeAreaLayoutGuide.topAnchor).isActive = true
}

全体ソース

import UIKit
import Parchment

class ComparisonViewController: UIViewController {
    
    let titles = [
        "商品情報",
        "レビュー"
    ]
    var vcs: [UIViewController] = [
        ProductInformationViewController(),
        ReviewViewController()
    ]
    // ペジャーを表示させるUIView
    @IBOutlet weak var InfoAndReviewView: UIView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // PagingViewControllerというものをインスタンス化
        let pagingVC = PagingViewController()
        pagingVC.dataSource = self
        pagingVC.select(index: 0)
        addChild(pagingVC)
        // ペジャーを表示させるUIViewの中にViewを追加する
        InfoAndReviewView.addSubview(pagingVC.view)
        pagingVC.didMove(toParent: self)
        pagingVC.view.translatesAutoresizingMaskIntoConstraints = false
        
        // メニューアイテム設定
        pagingVC.selectedBackgroundColor = .blue
        pagingVC.indicatorColor = .green
        pagingVC.textColor = .white
        pagingVC.selectedTextColor = .purple
        pagingVC.menuBackgroundColor = .red
        // 制約の設定
        pagingVC.view.leadingAnchor.constraint(equalTo: InfoAndReviewView.safeAreaLayoutGuide.leadingAnchor).isActive = true
        pagingVC.view.trailingAnchor.constraint(equalTo: InfoAndReviewView.safeAreaLayoutGuide.trailingAnchor).isActive = true
        pagingVC.view.bottomAnchor.constraint(equalTo: InfoAndReviewView.safeAreaLayoutGuide.bottomAnchor).isActive = true
        pagingVC.view.topAnchor.constraint(equalTo: InfoAndReviewView.safeAreaLayoutGuide.topAnchor).isActive = true
    }
}
extension ComparisonViewController: PagingViewControllerDataSource {
    // ページの数
    func numberOfViewControllers(in pagingViewController: Parchment.PagingViewController) -> Int {
        return titles.count
    }
    // 各ページViewContollerのイニシャライズ
    func pagingViewController(_: Parchment.PagingViewController, viewControllerAt index: Int) -> UIViewController {
        return vcs[index]
    }
    // メニュータイトルの設定と、選択中のVCの連動設定
    func pagingViewController(_: Parchment.PagingViewController, pagingItemAt index: Int) -> Parchment.PagingItem {
        return PagingIndexItem(index: index, title: titles[index])
    }
}

おわりに

今回は基本的な実装方法になりますので、Documentを見てメニューの表示などを変更してみると面白いかもしれないですね！