Swift: ページャーライブラリParchmentの使い方

2020-05-102020-05-26

こんにちわ、しょーです。

最近は一つ作りたいアプリがあって、個人開発に勤しんでいます。
そこでSmartNewsなどに使用されているページャーライブラリ、

Parchment

を使用しているので使い方を記事にしようと思います。

それでは行ってみよう！

1. ライブラリ情報
2. 使い方
3. 追記（2020/05/26）
4. 終わりに

ライブラリ情報

Parchment(github)

使い方

インストール

今回はいつも通りCocoaPodsを使用します。

  pod 'Parchment'

podfileに記入し

pod install

やっちゃいましょう。

必要なページを用意する

今回はタブバー配下に設置しますが、基盤となるViewControllerが一つ必要です。
こちらに追加したいページ分のViewControllerを追加していく形になります。

基盤となるViewControllerを作成したら、必要なページの分のViewContollerを定義しましょう。
それとメニューに表示するタイトルを用意すると良きです。

class ItemViewController: UIViewController {}

private var vcs: [UIViewController]  = [
    ItemViewController(),
    ItemViewController(),
    ItemViewController()
]

private var titles: [String]  = [
    "First",
    "Second",
    "Third"
]

静的に追加する場合はこのように定義すれば問題ないのですが、
何かしらの情報をベースに動的に追加したい場合はメソッドを用意して作成する必要がありますね。

その場合はmap等を駆使して作成しましょう。

private var vcs: [UIViewController] {
    return contentsList.map { ItemController(list: $0.list) }
}

初期設定をしよう

ライブラリをインポートして初期設定をしていきます。

import Parchment

初期設定は至って簡単です。
README通りにやってしまえばあのページャーが簡単に実装できるぜ！

private func initPagingVC() {
        // インスタンスを作成して先程作ったVCの配列を入れ込む
        let pagingVC = PagingViewController(viewControllers: vcs)
        // それをChildViewControllerに入れる
        addChild(pagingVC)
        view.addSubview(pagingVC.view)
        pagingVC.didMove(toParent: self)
        pagingVC.view.translatesAutoresizingMaskIntoConstraints = false

        pagingVC.view.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom)
            make.leading.trailing.equalToSuperview()
        }


        // メニューアイテムの色設定
        pagingVC.selectedBackgroundColor = .clear
        pagingVC.indicatorColor = .green
        pagingVC.textColor = .white
        pagingVC.selectedTextColor = .green
        pagingVC.menuBackgroundColor = .clear
        pagingVC.borderColor = .clear

        pagingVC.dataSource = self
        pagingVC.select(index: 0)

}

ぶっちゃけこれだけで設定は完了です。
あとはdataSourceメソッドに諸々設定していきます。

ポイントとしては、Autolayoutを設定するときに
ナビバーを使用している場合はtop と bottom はsafearea に合わせてください。
出ないとメニューバーの位置が飛び出してしまいます。

Datasourceの設定

こちらにはページの数、メニューバーと連動する各ページのタイトルなどを設定します。

extension HomeViewController: PagingViewControllerDataSource {
    // ページの数
    func numberOfViewControllers(in pagingViewController: PagingViewController) -> Int {
        return vcs.count
    }

    // 各ページViewContollerのイニシャライズ
    func pagingViewController(_: PagingViewController, viewControllerAt index: Int) -> UIViewController {
        return  ItemViewController()
    }

　// メニュータイトルの設定と、選択中のVCの連動設定
    func pagingViewController(_: PagingViewController, pagingItemAt index: Int) -> PagingItem {
        return PagingIndexItem(index: index, title: titles[index])
    }
}

あ、以上です。

簡単スギィ。

これでベースとなるコーディングは終了です。
他にも拡張delegateメソッドがたくさん用意されているので、
もしカスタムしたい場合はREADMEを参考にしてみてください。

追記（2020/05/26）

ページの変更（横スクロール）を非活性にしたい場合、デフォルトでは機能がないようです。
なので、UIPageViewController にアクセスして非活性にする必要がありました。

func isPagingVCScrollEnabled(isEnabled: Bool) {
        let tabbar = UIApplication.shared.keyWindow?.rootViewController
        // タブバーの場所を指定
        let nvc = tabbar?.children[0]
        // ナビバーのルート
        let base = nvc?.children[0]
        // PagingViewController にアクセスしてVCを取得
        let pvc = base?.children[0] as! PagingViewController
        // PageViewController のsubviewにアクセスしてスクロールの活性・非活性を指定
        for view in pvc.pageViewController.view.subviews {
            if let subView = view as? UIScrollView {
                subView.isScrollEnabled = isEnabled
            }
        }
}

このようなメソッドを用意しておくと任意の場所でスクロールをさせないことができました。