iOS : UIProgressViewでプログレスバーを作成／カスタマイズする
UIProgressViewによるプログレスバーの作成とカスタマイズ方法について解説します。
UIProgressViewを利用してプログレスバーを作成する
プログレスバーを作成するには、initWithProgressViewStyle:関数を利用してUIProgressViewインスタンスを作成し、frameプロパティで表示位置とサイズを指定します。
initWithProgressViewStyle:関数の引数には、プログレスバーの表示スタイルをUIProgressViewStyle列挙子で指定します。
UIProgressViewStyle列挙子と外見（進捗率30%）：
| UIProgressViewStyleDefault |  |
| UIProgressViewStyleBar |  |
UIProgressViewの幅や表示位置は、frameプロパティやboundsプロパティで指定します。ただし、frameプロパティやboundsプロパティでは高さを変更することができません。例えば、frameプロパティで大きな高さを指定しても、プログレスバーのサイズに自動的に調整されます。iOS 5.０の場合、プログレスバーの高さは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スタイルでのサンプル
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 ]; // アニメーション付きで進捗を指定setProgress:animated:関数の公式リファレンス
UIProgressViewの色を変更する
progressTintColorプロパティやtrackTintColorプロパティを利用して、UIProgressViewの色を変更できます。progressTintColorプロパティで進捗バーの色を、trackTintColorプロパティでバーの背景色を変更します。
なお、これらのプロパティはiOS 5.0以降で利用できます。
スタイル：UIProgressViewStyleDefault、progressTintColor：赤
スタイル：UIProgressViewStyleBar、progressTintColor：赤
スタイル：UIProgressViewStyleDefault、progressTintColor：緑、trackTintColor：黒
スタイル：UIProgressViewStyleBar、progressTintColor：緑、trackTintColor：黒
サンプルコード：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プロパティの公式リファレンス
UIProgressViewに画像を貼り付ける
progressImageプロパティやtrackImageプロパティを利用して、UIProgressViewに画像を貼り付けることができます。progressImageプロパティで進捗バーの画像を、trackImageプロパティでバー背景の画像を指定します。
画像は進捗状況やバーのサイズに応じて伸縮した状態で表示されます。また、画像を設定するとプログレスバー両端は角丸になりません。
なお、これらのプロパティはiOS 5.0以降で利用できます。
設定例：
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 ];transformプロパティを利用してバーを伸縮／回転させる
UIViewのtransformプロパティを利用すると、プログレスバーを縦方向に伸ばして表示したり、回転して縦に表示できます。
例1：プログレスバーの高さを3倍にする
UIProgressView * progress8_2 =
[ [ [ UIProgressView alloc ] initWithProgressViewStyle:UIProgressViewStyleDefault ] autorelease ];
progress8_2.frame = CGRectMake( 10, 850, 320 - 20, 30 );
progress8_2.progress = 0.4;
// 横方向に1倍、縦方向に3倍
progress8_2.transform = CGAffineTransformMakeScale( 1.0f, 3.0f );
[ 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;
// 反時計回りに90度回転
progress8_4.transform = CGAffineTransformMakeRotation( -90.0f * M_PI / 180.0f );
[ parentView addSubview:progress8_4 ];