ちょっと話題の記事

[iOS][Swift] MBCircularProgressBar で円形のプログレスバーを実現!

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回の概要

iOS Simulator Screen Shot Aug 3, 2015, 20.47.26

アプリ上にパーセンテージを表示する際、一番簡単なのは、UILabel を使って数値を表示する方法でしょう。

iOS Simulator Screen Shot Aug 3, 2015, 11.38.02

ただ、もっとカッコよく、分かりやすく表示したいとなると、やはりグラフ表示となるのではないでしょうか。

そこで、今回ご紹介するのは、このような円弧グラフを簡単に実現する MBCircularProgressBar です。イスラエルの Mati Bot さんが作成されました。

この OSS を Xcode プロジェクトに組み込み、円形プログレスバーを表示し、さらにプロパティを変更して様々なビジュアル表現をするところまでご紹介します。

プロジェクト作成 と pod install

Screen Shot 2015-08-03 at 20.51.15

まずは、Single View Application テンプレートを使ってプロジェクトを作成します。

次に、プロジェクトフォルダ上に Podfile を作成します。

use_frameworks!
pod "MBCircularProgressBar"

上記を Podfile に追加し、pod install します。

一旦プロジェクトを閉じ、(プロジェクト名).xcworkspace ファイルを開きましょう。

Storyboard

Screen Shot 2015-08-03 at 10.46.01

Main.Storyboard を開き、適当な大きさの View を画面上に追加しましょう。

Screen Shot 2015-08-03 at 10.46.34

上記 View の Identity Inspector を表示し、 Custom ClassClass 欄に MBCircularProgressBarView を指定しましょう。

Screen Shot 2015-08-03 at 10.46.52

Attributes Inspector を表示すると、 Circular Progress Bar View の各種プロパティが、直接指定できるようになっています。

プロパティ名 解説 備考
percent CGFloat パーセンテージを指定 0.0 - 100.0
progressRotationAngle CGFloat プログレスバーの開始点を表す角度 0.0 - 100.0
progressAngle CGFloat 円弧の中心角の360度に対するパーセンテージ 0.0 - 100.0
progressLineWidth CGFloat バーの太さ
progressColor UIColor バーの色
progressStrokeColor UIColor バーの淵の色
progressCapType NSInteger バーの端の形 数値を変えると端の形が丸や角ばった形になる
emptyLineWidth CGFloat バーが表示されていない部分のラインの太さ
emptyLineColor UIColor バーが表示されていない部分のラインの色
emptyCapType NSInteger バーが表示されていない部分のラインの端の形 数値を変えると端の形が丸や角ばった形になる

上記の「バーが表示されていない部分」とは、たとえば percent が 40.0(%) の場合、残りの 60.0(%) 部分の事を表しています。

ひとまず、どんなグラフが実現できるのかを試すため、各プロパティに数値を入れてみましょう。

Screen Shot 2015-08-03 at 11.38.17 iOS Simulator Screen Shot Aug 3, 2015, 11.38.02

例えば、こんな数値を入力すると、こんなグラフが表示されました!いい感じです!

もちろん、これらのプロパティの値はコードから直接変更することができます。

コードとStoryboardを接続

ViewController.swift に移りましょう。

import MBCircularProgressBar

MBCirucularProgressBar をインポートします。

Screen Shot 2015-08-03 at 11.35.09

次に、Storyboard 上の Circular Progress Bar View を コード上に IBOutlet での接続しましょう。

プロパティをいろいろ変更

画面上からパーセントを変更できるようにしつつ、各種プロパティの値を変更してみましょう。

Screen Shot 2015-08-03 at 21.17.47

画面上にスライダーを付けてみました。

import UIKit
import MBCircularProgressBar

class ViewController: UIViewController {
    @IBOutlet weak var progressBarView: MBCircularProgressBarView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.manageCircularProgressBar()
    }

    @IBAction func percentSliderValueChanged(sender: UISlider) {
        progressBarView.percent = CGFloat(sender.value)
    }

    (略)
}

スライダーの動きに合わせて、MBCircularProgressBarViewpercent プロパティが変化するように記述しました。

iOS Simulator Screen Shot Aug 3, 2015, 21.10.59 iOS Simulator Screen Shot Aug 3, 2015, 21.10.19 iOS Simulator Screen Shot Aug 3, 2015, 21.10.21

こんな風に、パーセンテージを変更すると、アニメーションしながら、バーが伸び縮みします!

iOS Simulator Screen Shot Aug 3, 2015, 21.40.24

更にグラフを追加してみました! 各種カラーを変更すると、見た目がかなり変わりますね。 グラフを太くしたり細くしたり。半円にしてみたり、もっと短いバーにしてみたり!

まとめ

MBCircularProgressBar を使えば、円形のバーグラフ表現が自由自在です。

アプリ画面を設計するとき、この OSS をふと思い出したら、使ってみてはいかがでしょうか。画面がより直感的でリッチになるかもしれません!