iOS 自訂控制項 progressView(環形進度條)

iOS 自訂控制項 progressView(環形進度條)

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

先把自訂控制項的貼出來。

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

.h檔案的內容就是一些聲明

#import

@interface ProgressView :UIView

//中心顏色

@property (strong,nonatomic)UIColor *centerColor;

//圓環背景色

@property (strong,nonatomic)UIColor *arcBackColor;

//圓環色

@property (strong,nonatomic)UIColor *arcFinishColor;

@property (strong,nonatomic)UIColor *arcUnfinishColor;

//百分比數值（0-1）

@property (assign,nonatomic)float percent;

//圓環寬度

@property (assign,nonatomic)float width;

@end

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

#import "ProgressView.h"

@implementation ProgressView

- (id)initWithFrame:(CGRect)frame{

self = [superinitWithFrame:frame];

if (self) {

self.backgroundColor =ClearColor;

_percent = 0;

_width = 0;

}

return self;

}

- (void)setPercent:(float)percent{

_percent = percent;

[selfsetNeedsDisplay];

}

- (void)drawRect:(CGRect)rect{

[selfaddArcBackColor];

[selfdrawArc];

[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_PI,0);

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_PI,0);

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_PI,0);

CGContextSetFillColorWithColor(contextRef, color);

CGContextFillPath(contextRef);

}

- (void)addCenterLabel{

NSString *percent = @"";

float fontSize = 14;

UIColor *arcColor = [UIColorblueColor];

if (_percent ==1) {

percent =@"100%";

fontSize =14;

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

}elseif(_percent <1 && _percent >=0){

fontSize =13;

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

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

}

CGSize viewSize = self.bounds.size;

NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStylealloc] init];

paragraph.alignment =NSTextAlignmentCenter;

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

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

}

@end

具體的調用就是

ProgressView *progress = [[ProgressViewalloc]initWithFrame:CGRectMake(detil.width-65,10, 60, 60)];

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

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

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

progress.percent =1;

[detiladdSubview:progress];

當然這些都有預設值，也可以不設定。
當然這麼簡單肯定會有缺陷，所以如果你有發現什麼問題，或更好地方法可以提出來大家一起研究。
最後，如果你不想粘貼代碼，那麼源碼我也已經上傳到資源。
progressView 資源： 空間傳送門
最後的最後，感謝你一直看到結尾 —— LC