【iOS】UICircularProgressRingを試す

## UICircularProgressRingとは?

<a href="https://github.com/luispadron/UICircularProgressRing"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/94c5e072-eb1b-ea99-2f7a-15bc9a80123e.png" width="460px"></a>


↓ こちらを見れば一目瞭然ですが、よく見かける丸型のProgressを簡単に実現できるライブラリです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/7a6ee714-811e-eecb-51e9-f631ee04f161.gif" width="400" />


###  :computer:環境構築
****

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

```Cartfile
github "luispadron/UICircularProgressRing"
```
次に以下コマンドで手元にダウンロード&ビルドします。

```sh
$ carthage update --platform iOS
```
Xcodeに戻ってTargetsのGeneralの「Framework, Libraries, and Embedded Content」に
`./Carthage/Build/iOS/UICircularProgressRing.framework`を追加。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/a951b258-69e5-ff80-4564-81796559b107.png" width="450" />

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

```sh
/usr/local/bin/carthage copy-frameworks
```
上記を設定し、`Input Files` に `$(SRCROOT)/Carthage/Build/iOS/UICircularProgressRing.framework`を設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/c79a2d3a-4765-b373-f45a-7e7c09027d1e.png" width="450" />
ここまででライブラリの導入は完了になります。

### :pencil: 実装
****

#### 簡単なサンプル
[README](https://github.com/luispadron/UICircularProgressRing#uicircularprogressring-example) に乗っていた単純なサンプルを少し修正して試してみます。

```swift
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!")
        }
    }
}
```
↓シュミレータで実施した結果
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/400ede75-f8be-b087-767b-7e76f32415a3.gif" width="250" />

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

- inside (デフォルト ↑と同じ)
- ontop
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/53de89ab-f4d1-d2d1-7ad3-bb27e3da8e88.gif" width="200" />

- dashed ( `.dashed(pattern: [7.0, 7.0])` )
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/b7546c32-3f54-238d-4aa0-cd58a8acdfc6.gif" width="200" />

- dotted
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/f145f6ec-7ece-670f-1218-560b576698f0.gif" width="200" />

- bordered ( `.bordered(width: 2.0, color: UIColor.red)` )
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/2c4391d2-a261-cfeb-cd4d-96c58ac6630c.gif" width="200" />

----
### 中のテキストを非表示にする
以下のプロパティ `shouldShowValueText` を `false` に設定すれば非表示になります。

```swift
progressRing.shouldShowValueText = false
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/af27d834-e19a-6dc2-4316-6eee1d1490dc.gif" width="200" />

----
### リングカラーを設定する

```swift
        progressRing.outerRingColor = UIColor.red
        progressRing.innerRingColor = UIColor.blue
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/566de083-2653-13c4-6bed-115f5306e4ce.gif" width="200" />

----
### 開始アングルを設定する
`startAngle` で設定可能。デフォルトは `0` で設定されています。

- `startAngle=90`
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/50b571e8-5d73-adfe-e122-bcd83b61b4a1.gif" width="200" />

- `startAngle=180`
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/40139169-c426-1d73-f44b-189ffaf7da0b.gif" width="200" />

- `startAngle=270`
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/634fb43a-bb6f-2683-aac0-c5f1770fe9ae.gif" width="200" />

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

```swift
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秒後にリングが閉じる様に設定しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/2e9467f6-77de-fb2d-a514-f4dfafe0f7c5.gif" width="200" />

### :link: 参考になったURL
****
- [Applications Using UICircularProgressRing · Issue #54 · luispadron/UICircularProgressRing](https://github.com/luispadron/UICircularProgressRing/issues/54)