[iOS] カスタムプログレスバー公開

2011年3月30日水曜日 | Published in | 3 コメント

このエントリーをはてなブックマークに追加

カスタムプログレスバーのソースコードを 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 ライセンスです。商用・非商用を問わず自由にご利用下さい。連絡も不要です(でもくれるとうれしい)。

- - - -
最近は2種類のアプリを開発中(iPad向け、iPhone向け)。4月には公開できそう。

Responses

  1. 335g
    2011年3月31日 0:40

    現在作っているアプリに雰囲気も合うので、さっそくですが使わせていただきます。ありがとうございます

  2. 335g
    2011年3月31日 0:40

    現在作っているアプリに雰囲気も合うので、さっそくですが使わせていただきます。ありがとうございます

  3. xcatsan says:
    2011年3月31日 22:45

    こんばんは。
    役に立てそうで何よりですw

  4. xcatsan says:
    2011年3月31日 22:45

    こんばんは。
    役に立てそうで何よりですw

  5. jikkojikko says:
    2013年6月20日 0:34

    こんばんは。
    カスタムプログレスバーの実装に悩んでいたので、ぜひとも使わせて頂きます。appを公開するときはまたここでお知らせします。

  6. jikkojikko says:
    2013年6月20日 0:34

    こんばんは。
    カスタムプログレスバーの実装に悩んでいたので、ぜひとも使わせて頂きます。appを公開するときはまたここでお知らせします。

Leave a Response

人気の投稿(過去 30日間)