【iOS】UICircularProgressRingを試す

UICircularProgressRingとは?

↓ こちらを見れば一目瞭然ですが、よく見かける丸型のProgressを簡単に実現できるライブラリです。

環境構築

---

UICircularProgressRing自体はCocoaPodsやCarthageでも導入できます。
今回はCarthageで導入します。
まずは以下の内容でCartfileを作成。

github "luispadron/UICircularProgressRing"

次に以下コマンドで手元にダウンロード&ビルドします。

$ carthage update --platform iOS

Xcodeに戻ってTargetsのGeneralの「Framework, Libraries, and Embedded Content」に
./Carthage/Build/iOS/UICircularProgressRing.frameworkを追加。

次に「Build Phases」で新規に「New Run Script Phases」を追加し

/usr/local/bin/carthage copy-frameworks

上記を設定し、Input Files に $(SRCROOT)/Carthage/Build/iOS/UICircularProgressRing.frameworkを設定します。

ここまででライブラリの導入は完了になります。

実装

---

簡単なサンプル

README に乗っていた単純なサンプルを少し修正して試してみます。

import UIKit
import UICircularProgressRing

class ViewController: UIViewController {

    private let progressRing = UICircularProgressRing()
    override func viewDidLoad() {
        super.viewDidLoad()

        progressRing.maxValue = 50
        progressRing.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        progressRing.center = self.view.center
        self.view.addSubview(progressRing)
    }
    // Viewのレイアウトが決定した後じゃないとアニメーションされない
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        progressRing.startProgress(to: 50, duration: 2.0) {
          print("Done animating!")
        }
    }
}

↓シュミレータで実施した結果

---

UICircularRingStyle

UICircularProgressRing で設定できるスタイルとして以下があります。

• inside (デフォルト ↑と同じ)

• ontop
  

• dashed ( .dashed(pattern: [7.0, 7.0]) )
  

• dotted
  

• bordered ( .bordered(width: 2.0, color: UIColor.red) )
  

---

中のテキストを非表示にする

以下のプロパティ shouldShowValueText を false に設定すれば非表示になります。

progressRing.shouldShowValueText = false

---

リングカラーを設定する

        progressRing.outerRingColor = UIColor.red
        progressRing.innerRingColor = UIColor.blue

---

開始アングルを設定する

startAngle で設定可能。デフォルトは 0 で設定されています。

• startAngle=90
  

• startAngle=180
  

• startAngle=270
  

---

UICircularTimerRing

Timerを設定できる様にしたクラスです。

import UIKit
import UICircularProgressRing

class ViewController: UIViewController {

    private let timerRing = UICircularTimerRing()
    override func viewDidLoad() {
        super.viewDidLoad()
        timerRing.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        timerRing.center = self.view.center
        self.view.addSubview(timerRing)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        timerRing.startTimer(to: 10) { state in
            print("state: \(state)")
        }
    }
}

↑のサンプルでは10秒後にリングが閉じる様に設定しています。

参考になったURL

---

• Applications Using UICircularProgressRing · Issue #54 · luispadron/UICircularProgressRing