Cocoaの日々

カスタムプログレスバーのソースコードを GitHub にて公開しました。
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向け）。４月には公開できそう。