Swift

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

こんにちは!KON(@pippi_kon)です。

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

バージョン情報

この記事は以下のバージョンで記載しています。

Xcode:9.4

Swift:4.1.2

MBCircularProgressBarとは?

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

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

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



出典:MBCircularProgressBar/README.md(GitHub)

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

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

 

インストール方法

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

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

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

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

あわせて読みたい
【Swift4】iPhoneアプリにバナー広告を貼る方法(Firebase編) この記事では、SwiftでiPhoneアプリにバナー広告を設定する方法をご紹介します。 広告を貼るためには以下の3つのこと...

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

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

あわせて読みたい
【Swift4】複数のPodfileをインストールする方法 Swiftでは、有志の方々が作ってくださった素晴らしいライブラリを多数使用することができます。 これらのライブラリを使うた...

 

インストール後、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文を追加します。

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

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


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

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

 

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

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

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

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

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

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


このようになります。

ちゃんと進捗率が表示されましたね!

今回は進捗率を「progressViewBar.value = 40.0」と直接数字で書きましたが、40.0の代わりに変数を指定してやれば動的に変更させることも可能です。

 

まとめ

いかがだったでしょうか?

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

このようなグラフをアプリに取り入れるとアプリが華やかに見えますよね。

ライブラリを使用すれば簡単に実装可能なので是非取り入れてみてはいかがでしょうか。

少しでもご参考になれば幸いです。