【Swift】UICircularProgressRingでタイマーを作る

どうも、ねこきち（@nekokichi1_yos2）です。

 今回は、UICircularProgressRing、で”プログレスバーを搭載したタイマー”を実装する。

↓

github.com

（参考）

↓

qiita.com

完成

解説

UICircularProgressRingでは、

• UICircularProgressRing
• UICircularTImerRing 

の2種類が用意されており、今回は後者を使う。

UICircularTimerRingをインスタンス化し、startTimer()、でタイマー処理を実装。

//0秒から10秒まで
timerRing.startTimer(to: 10) { (state) in
}
//1秒から10秒まで
timerRing.startTimer(from: 1, to: 10) { (state) in
}

startTimer内でタイマーの状態（state）別に処理を分岐できる。

switch state {
case .finished: //タイマー終了時
case .continued: //タイマー再開
case .paused: //タイマー停止
}

タイマーの状態（起動前/実行中/停止中）を検知するために、変数flagを用意。

var flag = 0

 
タイマーを各状態へ移行するには、下記のメソッド。

.continueTimer()はタイマーが停止の状態でないと無反応。

//ストップ
timerRing.pauseTimer()
//再開
timerRing.continueTimer()
//最初の状態にリセット
timerRing.resetTimer()

今回の実装は、変数flagで

• ０：タイマー起動前
• １：タイマー実行中
• ２：タイマー停止

と仮定して、ボタンを押すごとに

• 開始→ストップ→再開→ストップ→開始

と処理を変化させている。

ちなみに、outerRingColor、を未設定にした状態。

↓

ソースコード

import UIKit
import UICircularProgressRing

class UCRViewController: UIViewController {
    
    @IBOutlet weak var start: UIButton!
    
    //UICircularTimerRing
    let timerRing = UICircularTimerRing()
    //プログレスバーの状態を示した数値
    var flag = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        setting()
    }
    
    @IBAction func start(_ sender: Any) {
        switch flag {
        case 0:
            self.flag = 1
            self.start.setTitle("ストップ", for: .normal)
            timerRing.startTimer(to: 5) { state in
                switch state {
                case .finished:
                    self.flag = 0
                    self.start.setTitle("開始", for: .normal)
                    //リセット
                    self.timerRing.resetTimer()
                case .continued:
                    self.flag = 1
                    self.start.setTitle("ストップ", for: .normal)
                case .paused:
                    self.flag = 2
                    self.start.setTitle("再開", for: .normal)
                }
            }
        case 1:
            //ストップ
            timerRing.pauseTimer()
        case 2:
            //再開
            timerRing.continueTimer()
        default:break
        }
    }
    
    //プログレスバーの設定
    func setting()  {
        //幅と高さ
        timerRing.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        //中央に設置
        timerRing.center = self.view.center
        //経過時間を示すテキストの表示
        timerRing.shouldShowValueText = true
        //バーの外側の色
        timerRing.outerRingColor = .clear
        //バーの色
        timerRing.innerRingColor = .blue
        self.view.addSubview(timerRing)
    }
    
}