环形进度条
一个简单的环形进度组件。
用UIBezierPath + CAShaperLayer绘制
实际效果
1、由于使用的是CAShaperLayer进行的绘制，所有我把绘制的代码放在- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx的方法下面，还需要显示文字，文字使用的是CATextLayer。
2、需要设置底部导轨、和进度条的线条宽度lineWidth，导轨颜色trackColor和进度条颜色progressColor。
//设置进度条的半径
self.cornerRadius = MIN(self.fl_width, self.fl_height) * 0.5 - self.lineWidth * 0.5;
//导轨颜色
self.trackColor = [UIColor colorWithRed:247/255.0 green:247/255.0 blue:247/255.0 alpha:1.0];
//线条宽度
self.lineWidth = 10.0;
3、绘制导轨
- (void)fl_drawCircleBackgroundLayer {
//从 π/2 开始绘制一个圆形导轨
CGPoint center = CGPointMake(self.fl_width * 0.5, self.fl_height * 0.5);
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:self.cornerRadius startAngle:M_PI / 2 endAngle:2 * M_PI + M_PI / 2 clockwise:YES];
self.circleBackgroundLayer.path = circlePath.CGPath;
[self.layer addSublayer:self.circleBackgroundLayer];
}
4、绘制进度条，将进度条的progressLayer加在 导轨上
- (void)fl_drawProgressLayer {
//从 π/2 开始绘制一个进度
CGPoint center = CGPointMake(self.fl_width * 0.5, self.fl_height * 0.5);
UIBezierPath *progressPath = [UIBezierPath bezierPathWithArcCenter:center radius:self.cornerRadius startAngle:M_PI / 2 endAngle:2 * M_PI + M_PI / 2 clockwise:YES];
self.progressLayer.path = progressPath.CGPath;
self.progressLayer.strokeStart = 0.0;
self.progressLayer.strokeEnd = self.progress;
[self.circleBackgroundLayer addSublayer:self.progressLayer];
}
5、绘制文字，这里可以使用UILabel或CATextLayer，我这里选择的CATextLayer，增加了对文本显示最大宽度的约束，防止文字过长超出。
//计算文字大小
- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullable NSDictionary<NSAttributedStringKey, id> *)attributes context:(nullable NSStringDrawingContext *)context NS_AVAILABLE(10_11, 7_0);
- (void)fl_drawContentTextLayer {
//文字大小
CGSize textSize = [self.contentText fl_sizeForFont:self.contentTextFont];
CGPoint center = CGPointMake(self.fl_width * 0.5, self.fl_height * 0.5);
//增加对文字最大宽度的约束
CGFloat textWidth = MIN(textSize.width, self.fl_width - 2 * self.lineWidth);
CGRect textFrame = CGRectMake(center.x - textWidth * 0.5, center.y - textSize.height * 0.5, textWidth, textSize.height);
self.contentTextLayer.frame = textFrame;
self.contentTextLayer.string = self.contentText;
[self.layer addSublayer:self.contentTextLayer];
}
6、绘制完成，通过调用drawRect:来间接实现调用drawLayer:inContext:，系统会先走drawLayer:inContext:，后走drawRect:方法，不写drawRect:方法是不会进入drawLayer:inContext:的。
- (void)drawRect:(CGRect)rect {
// Drawing code
}
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
[super drawLayer:layer inContext:ctx];
[self fl_drawCircleBackgroundLayer];
[self fl_drawProgressLayer];
//判断文本长度，选择是否绘制
if (_contentText.length) {
[self fl_drawContentTextLayer];
}
}
需要的注意的是，在实际情况中，一开始是没有文字显示的，最后得到数据重新赋值文本，在setContentText中，判断了contentTextLayer是否存在，如果不存在，则绘制文字，已经存在的需要重新计算大小后，调整contentTextLayer.frame再赋值，因为新赋值的文本大小的和之前的文本大小不同，不重新计算可能超出的文字就不会显示了。
- (void)setContentText:(NSString *)contentText {
_contentText = contentText;
if (_contentTextLayer) {
//重新计算文字大小
CGSize textSize = [contentText fl_sizeForFont:self.contentTextFont];
CGPoint center = CGPointMake(self.fl_width * 0.5, self.fl_height * 0.5);
CGFloat textWidth = MIN(textSize.width, self.fl_width - 2 * self.lineWidth);
CGRect textFrame = CGRectMake(center.x - textWidth * 0.5, center.y - textSize.height * 0.5, textWidth, textSize.height);
self.contentTextLayer.frame = textFrame;
self.contentTextLayer.string = contentText;
} else {
[self fl_drawContentTextLayer];
}
}
如何使用
FLCircleProgressView *circleProgressView = [[FLCircleProgressView alloc] init];
circleProgressView.frame = CGRectMake(CGRectGetWidth(self.view.frame) * 0.5 - 100.0, CGRectGetHeight(self.view.frame) * 0.5 - 100.0, 200.0, 200.0);
//设置背景颜色
circleProgressView.backgroundColor = [UIColor whiteColor];
//设置进度条颜色
circleProgressView.progressColor = [UIColor orangeColor];
//设置字体大小
circleProgressView.contentTextFont = [UIFont systemFontOfSize:18.0];
//设置文字
circleProgressView.contentText = @"-----------80.00℃-----------";
//设置进度[0, 1]
circleProgressView.progress = 0.8;
[self.view addSubview:circleProgressView];
重新赋值
//可直接赋值，有动画效果
self.circleProgressView.progress = 0.5;
self.circleProgressView.contentText = @"Test";
这就是一个简单的环形进度条。希望能对大家有用。
最后附上demo地址
