UIProgressViewでプログレスバーを作成/カスタマイズする

UIProgressViewによるプログレスバーの作成とカスタマイズ方法について解説します。

UIProgressViewの例

UIProgressViewを利用してプログレスバーを作成する

プログレスバーを作成するには、initWithProgressViewStyle:関数を利用してUIProgressViewインスタンスを作成し、frameプロパティで表示位置とサイズを指定します。

initWithProgressViewStyle:関数の引数には、プログレスバーの表示スタイルをUIProgressViewStyle列挙子で指定します。

UIProgressViewStyle列挙子と外見(進捗率30%):
UIProgressViewStyleDefaultUIProgressViewStyleDefaultの例
UIProgressViewStyleBarUIProgressViewStyleBarの例

UIProgressViewの幅や表示位置は、frameプロパティやboundsプロパティで指定します。ただし、高さについては変更することができません。例えば、frameプロパティで大きな高さを指定しても、プログレスバーのサイズに自動的に調整されます。iOS 5.0の場合、プログレスバーの高さは11に固定されています。

バーの高さを変更する方法は下記「transformプロパティを利用してバーを伸縮/回転させる」を参照してください。

サンプルコード:UIProgressViewを作成する
UIProgressView * progress1 = [ [ [ UIProgressView alloc ] initWithProgressViewStyle:UIProgressViewStyleDefault ] autorelease ];
progress1.frame = CGRectMake( 10, 50, 320 - 20, 30 );
[ parentView addSubview:progress1 ];

initWithProgressViewStyle:関数の公式リファレンス

UIProgressViewStyle列挙子の公式リファレンス

プログレスバーの進捗を指定する

プログレスバーの進み具合(進捗状況)は、progressプロパティまたはsetProgress:animated:関数で設定します。

進捗状況は0~1.0の値で指定します。0が0%、1.0が100%となります。

UIProgressViewStyleDefaultスタイルでのサンプル:

UIProgressViewのprogress設定例
上から0(0%)、0.2(20%)、0.5(50%)、0.8(80%)、1.0(100%)

progressプロパティを利用すると、設定した値が即座に画面に反映されます。

setProgress:animated:関数を利用すると、animated:引数で進捗変化のアニメーション有無を指定できます。例えば、animated:引数にYESにを指定して進捗状況を0.2から0.9に変更すると、プログレスバーが20%の状態から90%の状態になめらかに変化します。

なお、setProgress:animated:関数はiOS 5.0以降でのみ利用できます。

サンプルコード:
progress1.progress = 0.3; // progressプロパティで進捗を指定
[ m_progress5 setProgress:0.2 animated:YES ]; // アニメーション付きで進捗を指定

progressプロパティの公式リファレンス

setProgress:animated:関数の公式リファレンス

UIProgressViewの色を変更する

progressTintColorプロパティやtrackTintColorプロパティを利用して、UIProgressViewの色を変更できます。progressTintColorプロパティで進捗バーの色を、trackTintColorプロパティでバーの背景色を変更します。

なお、これらのプロパティはiOS 5.0以降で利用できます。

・スタイル:UIProgressViewStyleDefault、progressTintColor:赤

progressTintColorの設定例1

・スタイル:UIProgressViewStyleBar、progressTintColor:赤

progressTintColorの設定例2

・スタイル:UIProgressViewStyleDefault、progressTintColor:緑、trackTintColor:黒

progressTintColorの設定例3

・スタイル:UIProgressViewStyleBar、progressTintColor:緑、trackTintColor:黒

progressTintColorの設定例4

サンプルコード:progressTintColorとtrackTintColorを設定する
UIProgressView * progress6_4 = [ [ [ UIProgressView alloc ] initWithProgressViewStyle:UIProgressViewStyleBar ] autorelease ];
progress6_4.frame = CGRectMake( 10, 600, 320 - 20, 30 );
progress6_4.progress = 0.4;
progress6_4.progressTintColor = [ UIColor greenColor ];
progress6_4.trackTintColor = [ UIColor blackColor ];
[ parentView addSubview:progress6_4 ];

progressTintColorプロパティの公式リファレンス

trackTintColorプロパティの公式リファレンス

UIProgressViewに画像を貼り付ける

progressImageプロパティやtrackImageプロパティを利用して、UIProgressViewに画像を貼り付けることができます。progressImageプロパティで進捗バーの画像を、trackImageプロパティでバー背景の画像を指定します。

画像は進捗状況やバーのサイズに応じて伸縮した状態で表示されます。また、画像を設定するとプログレスバー両端は角丸になりません。

なお、これらのプロパティはiOS 5.0以降で利用できます。

設定例:

・progressImageへの設定画像:

progressImageの設定画像

・trackImageへの設定画像:

trackImageの設定画像

・表示:

progressImageとtrackImageの設定例

サンプルコード:progressImageとtrackImageを設定する
UIProgressView * progress7_3 = [ [ [ UIProgressView alloc ] initWithProgressViewStyle:UIProgressViewStyleDefault ] autorelease ];
progress7_3.frame = CGRectMake( 10, 750, 320 - 20, 30 );
progress7_3.progress = 0.4;
progress7_3.progressImage = [ UIImage imageNamed:@"UIProgressView_progressImage.png" ];
progress7_3.trackImage = [ UIImage imageNamed:@"UIProgressView_trackImage.png" ];
[ parentView addSubview:progress7_3 ];

progressImageプロパティの公式リファレンス

trackImageプロパティの公式リファレンス

transformプロパティを利用してバーを伸縮/回転させる

UIViewのtransformプロパティを利用すると、プログレスバーを縦方向に伸ばして表示したり、回転して縦に表示できます。

例1:プログレスバーの高さを3倍にする

プログレスバーの高さを3倍にする

UIProgressView * progress8_2 = [ [ [ UIProgressView alloc ] initWithProgressViewStyle:UIProgressViewStyleDefault ] autorelease ];
progress8_2.frame = CGRectMake( 10, 850, 320 - 20, 30 );
progress8_2.progress = 0.4;
progress8_2.transform = CGAffineTransformMakeScale( 1.0f, 3.0f ); // 横方向に1倍、縦方向に3倍して表示する
[ parentView addSubview:progress8_2 ];

例2:プログレスバーを縦方向にする

プログレスバーの縦方向にする

UIProgressView * progress8_4 = [ [ [ UIProgressView alloc ] initWithProgressViewStyle:UIProgressViewStyleDefault ] autorelease ];
progress8_4.frame = CGRectMake( 10, 1000, 100, 30 );
progress8_4.progress = 0.0f;
progress8_4.transform = CGAffineTransformMakeRotation( -90.0f * M_PI / 180.0f ); // 反時計回りに90度回転して表示する
[ parentView addSubview:progress8_4 ];

transformプロパティの公式リファレンス