円型のプログレスバー実装（MBCircularProgressBar）

#はじめに#

こんにちはayumuです。
現在、個人で作っているアプリで円型のプログレスバーを実装する機会があり、せっかくなので記事にしようと思います。
（アプリは審査中… リリースした際は是非ダウンロードしてください！）
審査終了しました。リンクは一番下にあるのでよかったらダウンロードお願いします。

#MBCircularProgressBar#
今回はMBCircularProgressBarというライブラリを使って円型プログレスバーを実装しました。
##インストール##
CocoaPodsを使用してインストールしました。
pod "MBCircularProgressBar"
でインストール可能です。
https://github.com/MatiBot/MBCircularProgressBar

#Viewの作成#
今回はStoryBoardを使って作成していきます。

まずはViewControllerにViewを貼り付けます。
Viewのサイズは適当で大丈夫です。自分の意図する円グラフのサイズに調整していけばと思います。

配置したViewのViewの「Identity Inspector」を選択し、Custom ClassのClassをMBCircularProgressBarViewにします。
そうすると円型のViewが表示されます。
#円型プログレスバーのデザインを設定#
classを変更したらViewの「Attributes Inspector」にてデザインに関するパラメーターの調整が可能になります。コードからでも変更可能です。

ここで軽くパラメーターについて説明します。
showValueString
defaultではもともと用意されているテキストが表示されます。
今回はoffにしてLabelを配置しました。

Value、MaxValue
Valueはバーの現在の値、MaxValueはバーの最大値の値です。
上の写真だとValueは15、MaxValueは30です。これらのパラメーターは常に同じ値ではないのでコードに書きます。（コードに書くことでアニメーションも可能です）
progressRotationAngle
バーの回転を調整できます。
（50で真ん中から時計回り、0で真ん中から反時計回り）
progressAngle
バーの角度を調整できます。
（100で円型、0だと無くなります)
progressLine
バーの太さを調整できます
（上の写真だと黒いバーの部分）
progressColor
バーの色を調整できます。
（上の写真だと黒いバーの部分）
progressStrokeColor
バーのフレームの色を調整できます。
（上の写真だと黒いバーの部分、バーの色と同じにしているので単色になっています）
emptyLineWidth
空のバーの太さを調整できます。
（上の写真だと薄いグレーのバーの部分）
emptyLineColor
空のバーの色を調整できます。
（上の写真だと薄いグレーのバーの部分）
emptyLineStrokeColor
空のバーのフレームの色を調整できます。
（上の写真だと薄いグレーのバーの部分、空のバーの色と同じにしているので単色になっています）

他にも色々あります。詳しくは上のgithubのリンクからご覧ください。

#実装#
StoryBoardとプログラムコードを紐づけます。
紐づけたプログラムファイルにimport文を入力します。

ViewController.swift

import UIKit
import MBCircularProgressBar

class ViewController: UIViewController {
    @IBOutlet weak var progressView: MBCircularProgressBarView!
    @IBOutlet weak var progressValueLabel: UILabel!
    
//今回はshowValueStringをoffの状態です
    override func viewDidLoad() {
        super.viewDidLoad()
        progressView.value = 15
        progressView.maxValue = 30
        progressValueLabel.text = "\(progressView.value)"
    }

}

このようにvalue,maxValueに値を入れてあげることで下の図のような写真になります。

しかし表示させるだけでは物足りなさを感じるのでアニメーションをつけたいと思います。

ViewController.swift

import UIKit
import MBCircularProgressBar
class ViewController: UIViewController {
    @IBOutlet weak var progressView: MBCircularProgressBarView!
    @IBOutlet weak var progressValueLabel: UILabel!

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(true)
        progressView.value = 0
        progressView.maxValue = 30
        progressValueLabel.text = "\(progressView.value)"
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(true)
        UIView.animate(withDuration: 1.0) {
            self.progressView.value = 15
        }
    }
}

viewWillAppearでprogressView.value = 0
viewDidAppearでUIView.animateの中身をprogressView.value = 15
とすることでバーが0から設定してる値（ここでは15）までアニメーションします。

#おわりに#
最後まで読んでいただきありがとうございました。
簡単に実装できるのでよかったら試してみてください！
是非アプリのダウンロードよろしくお願いします！！！
https://itunes.apple.com/us/app/イマスル-今から習慣化/id1456245094?l=ja&ls=1&mt=8