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

はじめに

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

CHIPageControlとは

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

READMEより引用。

日本語だと

「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」を設定します。

storyboard

パラメーターを設定

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

プロパティ名 説明 デフォルト値 今回設定した値
numberOfPages ページ数 0 4
progress ページの進捗、進み具合 0 0
Padding ドットとドットの間隔 5 8
Radius ドットの大きさ 10 6
inactiveTransparency アクティブでないドットの透明度。0.0が透明、1.0が非透明。 0.4 0.4
hidesForSinglePage numberOfPagesが0の場合にコントロールを非表示にするかどうか true Default(=true)
borderWidth ドットの線幅 0 0

attributes_inspector

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

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

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

Aji

CHIPageControlAleppo

Aleppo

CHIPageControlChimayo

Chimayo

CHIPageControlFresno

Fresno

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

CHIPageControlJalapeno

Jalapeno

CHIPageControlJaloro

Jaloro

CHIPageControlPaprika

Paprika

CHIPageControlPuya

Puya

おわりに

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