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

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

## 前提条件
Parchmentライブラリがインストールされていること

## 実装方法

### 完成イメージ
今回は、画面全体にページャーを実装するのではなく、表示させたい範囲に実装しています。
![Simulator Screen Recording - iPhone 14 Pro - 2023-09-15 at 10.39.49.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3072069/1a93fb42-2e5c-a1a1-67a3-7e098310a9d5.gif)


### 手順1
まず初めに表示したい**View**と**ViewController**のセットをそれぞれ作成します。
![スクリーンショット 2023-09-15 10.52.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3072069/fbc8affa-d7d1-d1b5-e3a1-c7c218c4d0d3.png)
![スクリーンショット 2023-09-15 10.51.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3072069/9f5871bb-50bd-8188-f29a-9ea2a8f42578.png)

### 手順２
ページャーを実装したいView内に``UIViewを配置して、ViewControllerとOutlet接続してください。``
![スクリーンショット 2023-09-15 11.01.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3072069/556e2376-1461-5661-a953-48c1f5a03461.png)

### 手順3
Parchmentをページャーを実装したいメインのView内にimportします。
```Swift:
import Parchment
```
### 手順4
メニューに表示させたいタイトルと表示させるViewを配列に格納します。
```Swift:
    let titles = [
        "商品情報",
        "レビュー"
    ]
    var vcs: [UIViewController] = [
        ProductInformationViewController(),
        ReviewViewController()
    ]
```
### 手順5
DataSourceの設定をします。
```Swift:
    // ページの数
    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の名前にしてください。
```Swift:
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
}
```

## 全体ソース

```Swift:
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を見てメニューの表示などを変更してみると面白いかもしれないですね！

https://github.com/rechsteiner/Parchment/tree/main