这篇文章主要为大家详细介绍了iOS实现圆环比例图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了iOS实现圆环比例图的具体代码,供大家参考,具体内容如下
实现效果
实现方法
1. SSTCircleProgressView
@interface SSTCircleProgressView : UIView
/**
*进度条的角的类型
*/
@property (nonatomic,copy) CAShapeLayerLineCap lineCap;
/**
*进度条显示的文字
*/
@property (nonatomic,copy) NSString *progressLabelText;
/**
*进度条显示的文字的颜色
*/
@property (nonatomic,copy) UIColor *progressLabelTextColor;
/**
*进度条宽度
*/
@property (nonatomic,assign) CGFloat progressLineWidth;
/**
* 背景线条宽度
*/
@property (nonatomic,assign) CGFloat backgroundLineWidth;
/**
* 进度百分比
*/
@property (nonatomic,assign) CGFloat percentage;
/**
* 背景填充颜色
*/
@property (nonatomic,strong) UIColor *backgroundStrokeColor;
/**
* 进度条填充颜色
*/
@property (nonatomic,strong) UIColor *progressStrokeColor;
/**
* 距离边框边距偏移量
*/
@property (nonatomic,assign) CGFloat offset;
- (void)setProgress:(CGFloat)percentage animated:(BOOL)animated;
@end
#import "SSTCircleProgressView.h"
#define kDuration 1.0
#define kDefaultLineWidth 10
@interface SSTCircleProgressView()
@property (nonatomic,strong) CAShapeLayer *backgroundLayer;
@property (nonatomic,strong) CAShapeLayer *progressLayer;
@property (nonatomic,strong) UILabel *progressLabel;
@property (nonatomic,strong) NSTimer *timer;
@property (nonatomic,assign) CGFloat startAngle ; // M_PI*2
@property (nonatomic,assign) CGFloat endAngle ;
@end
@implementation SSTCircleProgressView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setBackgroundColor:[UIColor clearColor]];
[self createSubViews];
//init default variable
self.backgroundLineWidth = kDefaultLineWidth;
self.progressLineWidth = kDefaultLineWidth;
self.percentage = 0;
self.offset = 0;
self.startAngle = -M_PI_2;
self.endAngle = 0;
}
return self;
}
- (void)createSubViews
{
//self.progressLabel.text = @"0%";
self.progressLabel.textAlignment = NSTextAlignmentCenter;
self.progressLabel.font = FONTBOLD(12);
[self addSubview:self.progressLabel];
_backgroundLayer = [CAShapeLayer layer];
_backgroundLayer.frame = self.bounds;
_backgroundLayer.fillColor = nil;
_backgroundLayer.strokeColor = [UIColor lightGrayColor].CGColor;
_progressLayer = [CAShapeLayer layer];
_progressLayer.frame = self.bounds;
_progressLayer.fillColor = nil;
_progressLayer.strokeColor = [UIColor redColor].CGColor;
[self.layer addSublayer:_backgroundLayer];
[self.layer addSublayer:_progressLayer];
}
-(void)setProgressLabelText:(NSString *)progressLabelText{
_progressLabelText = progressLabelText;
self.progressLabel.text = progressLabelText;
}
-(void)setProgressLabelTextColor:(UIColor *)progressLabelTextColor{
_progressLabelTextColor = progressLabelTextColor;
self.progressLabel.textColor = progressLabelTextColor;
}
#pragma mark - Draw CircleLine
- (void)setBackgroundCircleLine
{
UIBezierPath *path = [UIBezierPath bezierPath];
path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x - self.frame.origin.x, self.center.y - self.frame.origin.y)
radius:(self.frame.size.width - _backgroundLineWidth)/2 - _offset
startAngle:self.startAngle
endAngle:self.endAngle
clockwise:NO];
_backgroundLayer.path = path.CGPath;
}
- (void)setProgressCircleLine
{
UIBezierPath *path = [UIBezierPath bezierPath];
path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x - self.frame.origin.x, self.center.y - self.frame.origin.y)
radius:(self.frame.size.width - _progressLineWidth)/2 - _offset
startAngle:self.startAngle
endAngle:self.endAngle
clockwise:NO];
_progressLayer.path = path.CGPath;
}
#pragma mark - Lazy Load
- (UILabel *)progressLabel
{
if (!_progressLabel) {
_progressLabel = [[UILabel alloc]initWithFrame:CGRectMake((self.bounds.size.width -100)/2, (self.bounds.size.height - 100)/2, 100, 100)];
}
return _progressLabel;
}
- (void)setBackgroundLineWidth:(CGFloat)backgroundLineWidth
{
_backgroundLineWidth = backgroundLineWidth;
_backgroundLayer.lineWidth = _backgroundLineWidth;
[self setBackgroundCircleLine];
}
-(void)setLineCap:(CAShapeLayerLineCap)lineCap{
_progressLayer.lineCap = lineCap;
[self setProgressCircleLine];
}
- (void)setProgressLineWidth:(CGFloat)progressLineWidth
{
_progressLineWidth = progressLineWidth;
_progressLayer.lineWidth = _progressLineWidth;
[self setProgressCircleLine];
}
- (void)setPercentage:(CGFloat)percentage {
_percentage = percentage;
}
- (void)setBackgroundStrokeColor:(UIColor *)backgroundStrokeColor {
_backgroundStrokeColor = backgroundStrokeColor;
_backgroundLayer.strokeColor = _backgroundStrokeColor.CGColor;
}
- (void)setProgressStrokeColor:(UIColor *)progressStrokeColor
{
_progressStrokeColor = progressStrokeColor;
_progressLayer.strokeColor = _progressStrokeColor.CGColor;
}
#pragma mark - progress animated YES or NO
- (void)setProgress:(CGFloat)percentage animated:(BOOL)animated
{
self.percentage = percentage;
_progressLayer.strokeEnd = _percentage;
if (animated) {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = [NSNumber numberWithFloat:0.0];
animation.toValue = [NSNumber numberWithFloat:_percentage];
animation.duration = kDuration;
[_progressLayer addAnimation:animation forKey:@"strokeEndAnimation"];
}else{
[CATransaction begin];
[CATransaction setDisableActions:YES];
_progressLabel.text = [NSString stringWithFormat:@"%.0f%%",_percentage*100];
[CATransaction commit];
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程学习网。
沃梦达教程
本文标题为:iOS实现圆环比例图
猜你喜欢
- 最好用的ios数据恢复软件:PhoneRescue for Mac 2023-09-14
- 作为iOS开发,这道面试题你能答出来,说明你基础很OK! 2023-09-14
- Android studio实现动态背景页面 2023-05-23
- Android MaterialButton使用实例详解(告别shape、selector) 2023-06-16
- iOS 对当前webView进行截屏的方法 2023-03-01
- Android实现轮询的三种方式 2023-02-17
- Android实现监听音量的变化 2023-03-30
- SurfaceView播放视频发送弹幕并实现滚动歌词 2023-01-02
- 详解flutter engine 那些没被释放的东西 2022-12-04
- Flutter实现底部和顶部导航栏 2022-08-31
