【Swift】円形プログレスバー「MBCircularProgressBar」の使い方

こんにちは、コン（@pippi_kon）です。

この記事では、『円形プログレスバーを表示できるライブラリ「MBCircularProgressBar」の使い方』についてご紹介します。

MBCircularProgressBarとは？

MBCircularProgressBarは円形プログレスバーを表示できるライブラリです。

通常、プログレスバーは横棒の表示が一般的です。

しかし、MBCircularProgressBarライブラリを使えば、横棒のプログレスバーを円の形にすることができるんです。

出典：MBCircularProgressBar/README.md（GitHub）

円形のプログレスバーとはこのような感じのものです。

このような円弧グラフを簡単にかけてしまうライブラリなのです。

インストール方法

CocoaPodsを使用してインストールします。

「pod init」で作成したPodfileを以下のように書き換え、「pod install」でインストールします。

「プロジェクト名」の部分はインストールする環境（Xcodeのプロジェクト名）に合わせて設定してください。

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'

target 'プロジェクト名' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for プロジェクト名
  pod "MBCircularProgressBar"

end

「pod init」や「pod install」の使い方については以下の記事をご参考にしてください。

【Swift】iPhoneアプリにバナー広告を貼る方法（Firebase編）iPhoneアプリへのバナー広告の貼り方（Firebase編）をご紹介します。...

すでに他のライブラリ（広告表示用のFirebase/AdMobなど）をインストール済みの場合は、Podfileに少し工夫が入ります。

以下の記事をご確認ください。

【Swift】複数のPodfileをインストールする方法『複数のPodfile（ライブラリ）を同時にインストールする方法』をご紹介します。...

インストール後、XCodeのプロジェクトを開いていたら一旦閉じてください。

そして、「.xcworkspace」ファイルを開いてください。

StoryBoardの編集

インストールが終わったら次はStoryBoardを編集します。

円形グラフを表示するViewを配置

「Main.storyboard」を開き、適当なサイズのViewを配置します。

Viewのサイズは好きなように変更してOKです。

Classの設定

Viewを配置したら、Viewの「Identity Inspector」を開き、Custom ClassのClassに「MBCircularProgressBarView」を指定します。

手動で入力してもOKですし、青い矢印ボタンを押すと一覧に表示されるのでそこから選んでもOKです。

パラメータの設定（任意）

Viewの「Attributes Inspector」を開くと円形プログレスバーのデザインに関するパラメータの設定が可能です。

各パラメータの意味はMBCircularProgressBarのREADMEを参照。

なお、これらのパラメータはプログラムコードからも変更可能です。

Storyboardとプログラムコードを接続

Main.storyboardに配置したViewをプログラムコードに接続します。

Main.storyboardのViewを「controlキー」を押しながらプログラムコードへドラッグ＆ドロップします。

この例ではXcode起動時に「Single View App」で新規作成したプロジェクトを使用していますので、「ViewController.swift」のファイルに対してドラッグ＆ドロップしています。

ドラッグ＆ドロップすると接続パラメータの設定画面が表示されるので以下のように設定します。

Connection	Outlet
Name	progressViewBar（任意の値）
Type	MBCircularProgressBarView

プログラムコードの編集

Viewとプログラムコードの接続が終わったら、最後にプログラムコードを編集します。

Viewを接続したプログラムファイルに以下のimport文を追加します。

import MBCircularProgressBar

最低限この1文を記述すればビルドは通りますので試しにビルドしてみてください。

なお、コードに「No such module ‘MBCircularProgressBar’」とエラーが出るかもしれませんが気にせずビルドしてOKです。

ビルドするとこのようになります。

先ほど配置したViewに円形プログレスバーが表示されました！

ただ、これだけではプログレスバーの役目が果たせませんよね。

プログレスバーに必須の進捗情報をプログラムコードで入力してみましょう。

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
        
    progressViewBar.value = 40.0
}

viewDidLoad()に「progressViewBar.value = 40.0」を追記しました。

これは進捗を40にするという意味です。

デフォルトだとプログレスバーの最小値は0、最大値は100なので、40を指定するということは進捗率40%ということです。

これでビルドしてみると…