[Swift][OSS] 普通のUIPageControlにはもう飽きた！アニメーションがクールなCHIPageControl

はじめに

こんにちは。モバイルアプリサービス部の加藤です。
今日githubでSwiftのtrendingを見てみたら簡単に導入できそうなCHIPageControlというOSSを見かけたので試してみました。

CHIPageControlとは

CHIPageControl is a set of cool animated page controls to replace boring UIPageControl.

日本語だと

「CHIPageControlはありきたりなUIPageControlを置き換えるクールなアニメーションページコントロールのセットです。」

こんな感じでしょうか。 MITライセンスで公開されており、使用するための条件は以下です。

• iOS 9.0+
• Xcode 8+
• Swift 3

検証環境

本記事の検証環境は以下の通りです。

• Xcode Version 8.2.1（8C1002）
• Swift Version 3.0.2
• CocoaPods Version 1.2.0

導入手順

CocoaPodsでインストール可能です。
以下のようにPodfileにpod 'CHIPageControl', '~> 0.0.1'と記載してpod installすればOKです。

platform :ios, '9.0'

target 'ターゲット名' do
  use_frameworks!
  pod 'CHIPageControl', '~> 0.0.1'
end

2017/3/23追記 記事執筆時点のバージョンは0.0.1でしたが、頻繁にアップデートが行われており、2017/3/23現在の最新バージョンは0.0.6です。 都度バージョンを確認することをお勧めします。

8種類のクラス

CHIPageControlでは以下のクラスが提供されていて、クラスによってアニメーションが異なります。
それぞれ試してみました。

• CHIPageControlAji
• CHIPageControlAleppo
• CHIPageControlChimayo
• CHIPageControlFresno
• CHIPageControlJalapeno
• CHIPageControlJaloro
• CHIPageControlPaprika
• CHIPageControlPuya

Storyboardにコントロールを配置

コードでコントロールを生成して表示することも可能ですが、今回はStoryboardにコントロールを配置します。 以下のようにUIViewを任意の位置・大きさで配置します。
次にIdentity inspectorでClassには上記8種類のクラスのいずれかを、Moduleには「CHIPageControl」を設定します。

パラメーターを設定

Attributes inspectorで「Base Page Control」のパラメーターとして、以下を設定することが可能です。 今回は以下のように設定しました。

progressをアニメーションさせる

ページコントロールのset(progress:animated:)メソッドでprogressをアニメーションさせます。 １秒ごとにアニメーションするようにしました。

import UIKit
import CHIPageControl

enum Direction {
    case left
    case right

    func newProgress(withCurrentProgress current: Int) -> Int {
        switch self {
        case .left:
            return current - 1
        case .right:
            return current + 1
        }
    }
}

class ViewController: UIViewController {

    @IBOutlet weak var pageControl: CHIBasePageControl!

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        var direction = Direction.right
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
            let currentProgress = Int(self.pageControl.progress)
            let numberOfPages = self.pageControl.numberOfPages

            if currentProgress == numberOfPages - 1 {
                direction = .left
            } else if currentProgress == 0 {
                direction = .right
            }

            let newProgress = direction.newProgress(withCurrentProgress: currentProgress)
            self.pageControl.set(progress: newProgress, animated: true)
        }
    }
}

実行結果

全てシミュレーターのiPhone7 iOS 10.2で実行しました。

CHIPageControlAji

CHIPageControlAleppo

CHIPageControlChimayo

CHIPageControlFresno

2017/3/23追記 記事執筆時点（バージョン0.0.1）ではキャプチャを見て分かる通り一番右端のドットの位置がずれてしまっていたのですが、 バグレポートを行ったところ速やかに対応してくれました。 バージョン0.0.6では直っています。

CHIPageControlJalapeno

CHIPageControlJaloro

CHIPageControlPaprika

CHIPageControlPuya

おわりに

CHIPageControlを試してみました。非常にお手軽に使える印象です。
皆さんも試してみてはいかがでしょうか。