Swift

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

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

こんにちは、コンジ(@pippi_kon)です。

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

MBCircularProgressBarとは?

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

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

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


出典:MBCircularProgressBar/README.md(GitHub)

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

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

 

インストール方法

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

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

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

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

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

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

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

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

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

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

 


StoryBoardの編集

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

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

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

Main.storyboardにviewを配置

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

 

Classの設定

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

MBCircularProgressBarViewを指定

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

 

パラメータの設定(任意)

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

MBCircularProgressBarViewのプロパティ

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

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

 

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

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

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」の使い方』についてご紹介しました。

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

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

初心者向け!Swift入門にオススメの参考書_サムネ
【2020年版】初心者向け!Swift入門にオススメの参考書『Swift初心者にオススメしたいSwiftプログラミング参考書』をご紹介します。...
無料体験あり!初心者におすすめの人気プログラミングスクール3選_サムネ
無料体験あり!初心者におすすめの人気プログラミングスクール3選『プログラミングを学ぶことができる人気のプログラミングスクール』についてご紹介します。...
ABOUT ME
コンジ
コンジ
自分のやりたいことでお金を稼げる生活に憧れて脱サラ。 アプリ開発やブログ運営をしながらのんびり暮らしています。