1. 程式人生 > >iOS 簡單實用的圓形進度條

iOS 簡單實用的圓形進度條

之前做專案的時候有用到環形進度條,先是在網上找了一下第三方控制元件,發現好用是好用,就是東西太多了,有點複雜,還不如自己寫一個簡單點適合自己用的。

先把自定義控制元件的效果圖貼出來。

      

其實我寫的這個控制元件很簡單。索性就直接把原始碼貼出來吧。

// 新建一個View 

.h檔案的內容就是一些宣告

#import <UIKit/UIKit.h>

@interface ProgressView : UIView

//中心顏色

@property (strongnonatomic)UIColor *centerColor;

//圓環背景色

@property (

strongnonatomic)UIColor *arcBackColor;

//圓環色

@property (strongnonatomic)UIColor *arcFinishColor;

@property (strongnonatomic)UIColor *arcUnfinishColor;

//百分比數值(0-1

@property (assignnonatomic)float percent;

//圓環寬度

@property (assignnonatomic)float width;

@end



.m檔案裡就是具體實現了

#import 

"ProgressView.h"

@implementation ProgressView

- (id)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];

    if (self) {

self.backgroundColor = ClearColor;

        _percent = 0;

        _width = 0;

    }

returnself;

}

- (void)setPercent:(float)percent{

    _percent = percent;

    [

selfsetNeedsDisplay];

}

- (void)drawRect:(CGRect)rect{

    [selfaddArcBackColor];

    [self drawArc];

    [selfaddCenterBack];

    [selfaddCenterLabel];

}

- (void)addArcBackColor{

    CGColorRef color = (_arcBackColor == nil) ? [UIColorlightGrayColor].CGColor : _arcBackColor.CGColor;

CGContextRef contextRef = UIGraphicsGetCurrentContext();

    CGSize viewSize = self.bounds.size;

    CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);

// Draw the slices.

    CGFloat radius = viewSize.width / 2;

CGContextBeginPath(contextRef);

    CGContextMoveToPoint(contextRef, center.x, center.y);

    CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI0);

CGContextSetFillColorWithColor(contextRef, color);

    CGContextFillPath(contextRef);

}

- (void)drawArc{

    if (_percent == 0 || _percent > 1) {

        return;

    }

    if (_percent == 1) {

        CGColorRef color = (_arcFinishColor == nil) ? [UIColorgreenColor].CGColor : _arcFinishColor.CGColor;

CGContextRef contextRef = UIGraphicsGetCurrentContext();

        CGSize viewSize = self.bounds.size;

        CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);

// Draw the slices.

        CGFloat radius = viewSize.width / 2;

        CGContextBeginPath(contextRef);

        CGContextMoveToPoint(contextRef, center.x, center.y);

        CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI0);

CGContextSetFillColorWithColor(contextRef, color);

        CGContextFillPath(contextRef);

    }else{

        float endAngle = 2*M_PI*_percent;

        CGColorRef color = (_arcUnfinishColor == nil) ? [UIColorblueColor].CGColor : _arcUnfinishColor.CGColor;

CGContextRef contextRef = UIGraphicsGetCurrentContext();

        CGSize viewSize = self.bounds.size;

        CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);

// Draw the slices.

        CGFloat radius = viewSize.width / 2;

        CGContextBeginPath(contextRef);

        CGContextMoveToPoint(contextRef, center.x, center.y);

        CGContextAddArc(contextRef, center.x, center.y, radius,0,endAngle, 0);

CGContextSetFillColorWithColor(contextRef, color);

        CGContextFillPath(contextRef);

    }

}

-(void)addCenterBack{

    float width = (_width == 0) ? 5 : _width;

    CGColorRef color = (_centerColor == nil) ? [UIColorwhiteColor].CGColor : _centerColor.CGColor;

CGContextRef contextRef = UIGraphicsGetCurrentContext();

    CGSize viewSize = self.bounds.size;

    CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);

// Draw the slices.

    CGFloat radius = viewSize.width / 2 - width;

CGContextBeginPath(contextRef);

    CGContextMoveToPoint(contextRef, center.x, center.y);

    CGContextAddArc(contextRef, center.x, center.y, radius,0,2*M_PI0);

CGContextSetFillColorWithColor(contextRef, color);

    CGContextFillPath(contextRef);

}

- (void)addCenterLabel{

    NSString *percent = @"";

    float fontSize = 14;

    UIColor *arcColor = [UIColor blueColor];

    if (_percent == 1) {

        percent = @"100%";

        fontSize = 14;

        arcColor = (_arcFinishColor == nil) ? [UIColorgreenColor] : _arcFinishColor;

    }else if(_percent < 1 && _percent >= 0){

        fontSize = 13;

        arcColor = (_arcUnfinishColor == nil) ? [UIColorblueColor] : _arcUnfinishColor;

        percent = [NSStringstringWithFormat:@"%0.2f%%",_percent*100];

    }

    CGSize viewSize = self.bounds.size;

NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyleallocinit];

    paragraph.alignment = NSTextAlignmentCenter;

NSDictionary *attributes = [NSDictionarydictionaryWithObjectsAndKeys:[UIFontboldSystemFontOfSize:fontSize],NSFontAttributeName,arcColor,NSForegroundColorAttributeName,[UIColorclearColor],NSBackgroundColorAttributeName,paragraph,NSParagraphStyleAttributeName,nil];

    [percent drawInRect:CGRectMake(5, (viewSize.height-fontSize)/2, viewSize.width-10, fontSize)withAttributes:attributes];

}

@end

具體的呼叫就是

  ProgressView *progress = [[ProgressViewalloc]initWithFrame:CGRectMake(detil.width-65106060)];

    progress.arcFinishColor = COLOR_STRING(@"#75AB33");

    progress.arcUnfinishColor = COLOR_STRING(@"#0D6FAE");

    progress.arcBackColor = COLOR_STRING(@"#EAEAEA");

    progress.percent = 1;

    [detil addSubview:progress];