【Swift】Progress Viewの使い方。目標までの進捗率をゲージで表示する。(Swift 2.1、XCode 7.2)

2020年6月16日

Progress Viewとは

前回の記事に続いて、Swiftで使える部品の確認を行う。今回の部品はProgress View(以下、ブログレスビュー)。
プログレスビュー

 

プログレスビューとは、目標までの進捗状況がどの程度進んでいるのかを表現するために使われるビューのことである。

サイトからファイルをダウンロードするときなどによく見る、ゲージが溜まっていくアレである。

画面に「ダウンロード中」とだけ表示されるより、「ダウンロード中、何%完了」とリアルタイムで表示されたほうが、待つことのストレスが軽くなる。
ダウンロード時のプログレスバー

 

まずはいつもの流れでラベルとボタンとブログレスビューをデバイス画面に配置し、ソースコードとコネクションを確立する。ボタンは「Connection ⇒ Action」、「Event⇒Touch Up Inside」で接続する。ラベルとプログレスビューは「Connection ⇒ Outlet」で接続する。

部品配置からコネクション確立の流れは過去の記事で説明しているので、詳しくはそちらを参照されたし。⇒「記事

デバイス画面にラベルとボタンとプログレスビューを配置

プログレスビューの設定を変更する

プログレスビューは初期状態では進捗50%の青いメモリが表示される。設定画面から見た目を変えることができるので変更してみよう。

デバイス画面にあるプログレスビューをクリックしたあとに、画面右上のアトリビュートインスペクタボタン(下図赤枠)をクリックする。すると、下にプログレスビューの設定画面が表示される。

プログレスビューのアトリビュートインスペクタ

 

設定項目を以下にまとめる。

設定名 説明
1 Style DefalutとBarの2つのデザインから選択する。プログレスバーのDefaultとBarの違い
2 Progress 初期状態の進捗率。0が0%、1が100%。
3 Progress Tint 進捗を表すメモリの色。
4 Trak Tint 未実施部分の色。
5 progress Image 進捗を表すメモリに画像を表示する。
6 Track Image 未実施部分に画像を表示する。

 

設定を以下のように変更した。

プログレスビューの設定変更後

 

以下のコードは、ボタンを押すとプログレスビューの進捗が10%増加する例。ラベルに現在の進捗率がパーセント表示される。

 

以下は実際のプレイ動画

 

ちなみに、ビューの太さをもっと太くしたい場合はソースコード内で設定する。以下のコードは、幅はそのままで、高さを10倍にする例。

プログレスビューの高さを変更

 

ビューの向きを縦方向にしたい場合は以下のコードのように設定する。M_PI_2とはSwiftに標準で定義されている定数で「π/2」を意味する。

プログレスビューを縦に表示