dev5tec/FBProgressView - GitHub
iOS版 Twitterアプリや iDisk などで使われているあの表現↓
インストール
GitHubからプロジェクトをダウンロードし、その中から FBProgressView.h と FBProgressView.m を自分のプロジェクトへコピーして追加する。
使い方
FBProgressView のインスタンスを作成し progress プロパティへ 0.0〜1.0 の値を渡すだけ。以下はコードでインスタンスを生成する例。
FBProgressView* progressView = [[FBProgressView alloc] initWithFrame:CGRectMake(100, 100, 200, 40)]; [self.view addSubView:progressView];Interface Builder で Custom View を貼りつけ、そのクラスに FBProgressView を指定しても良い（付属のサンプルではこの方法を使っている）。
後は進捗率(0.0〜1.0)を progress プロパティへ渡すだけで良い。
progreeView.progress = 0.5; // 50%
カスタマイズ
その他、カスタマイズ用にいくつかプロパティを用意している。
progressViewStyle // default: FBProgressViewStyleDefault
lineWidth // default: 5.0
hidesUntilStart // default: YES
typedef enum {
FBProgressViewStyleDefault = 0,
FBProgressViewStyleGray,
FBProgressViewStyleWhite
} FBProgressViewStyle;ソース解説
UIBezierPath を使ってベタに描画してる。外枠のパス作成はこんな感じ。
- (void)_createOutlinePath
{
[outlinePath_ release];
outlinePath_ = [[UIBezierPath bezierPath] retain];
CGSize size = self.bounds.size;
CGFloat unit = size.height/2.0 - self.lineWidth;
CGPoint c1 = CGPointMake(unit+self.lineWidth, unit+self.lineWidth);
[outlinePath_ addArcWithCenter:c1
radius:unit
startAngle:3*M_PI/2 endAngle:M_PI/2
clockwise:NO];
[outlinePath_ addLineToPoint:CGPointMake(size.width - c1.x,
size.height - self.lineWidth)];
CGPoint c2 = CGPointMake(size.width - unit - self.lineWidth,
unit+self.lineWidth);
[outlinePath_ addArcWithCenter:c2
radius:unit
startAngle:M_PI/2 endAngle:-M_PI/2
clockwise:NO];
[outlinePath_ addLineToPoint:CGPointMake(c1.x, self.lineWidth)];
[outlinePath_ setLineWidth:self.lineWidth];
}中のバーはこう- (void)_drawProgressBar
{
CGFloat margin = self.lineWidth + MARGIN_UNIT;
CGSize size = self.bounds.size;
size.width -= margin*2;
size.height -= margin*2;
CGFloat unit = size.height/2.0;
CGFloat progressWidth = size.width * self.progress;
if (progressWidth < unit*2) {
progressWidth = unit*2;
}
CGRect barRect = CGRectMake(margin,
margin,
progressWidth,
size.height);
UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:barRect
cornerRadius:unit];
[path fill];
iOS 4.0 から Mac OS X と同じように Bezier Path が使えるようになったのはかなり便利。
ライセンス
MIT ライセンスです。商用・非商用を問わず自由にご利用下さい。連絡も不要です（でもくれるとうれしい）。
- - - -
最近は２種類のアプリを開発中（iPad向け、iPhone向け）。４月には公開できそう。
