CircleProgress 理财产品的进度圆形，CAShapeLayer

最新推荐文章于 2024-05-17 09:33:46 发布

super_man_风清扬

最新推荐文章于 2024-05-17 09:33:46 发布

阅读量513

点赞数

CC 4.0 BY-SA版权

分类专栏： iOS开发文章标签： iOS circleProgress

本文链接：https://blog.youkuaiyun.com/super_man_ww/article/details/52764635

iOS开发专栏收录该内容

132 篇文章

订阅专栏

本文介绍了一个使用Objective-C实现的圆形进度条控件，该控件能够动态显示进度，并通过调整角度来更新进度条的视觉效果。文章详细展示了如何创建和设置CAShapeLayer以绘制不同颜色的圆弧来表示进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#import "CCCircleView.h"

#define GreenColor [UIColor colorWithRed:98/255.0 green:200/255.0 blue:166/255.0 alpha:1]
// rgb颜色转换（16进制->10进制）
#define KHexColor(hexValue) [UIColor \
colorWithRed:((float)((hexValue & 0xFF0000) >> 16))/255.0 \
green:((float)((hexValue & 0xFF00) >> 8))/255.0 \
blue:((float)(hexValue & 0xFF))/255.0 alpha:1.0]
#define kFont(size) [UIFont systemFontOfSize:size]

@interface CCCircleView()
@property(nonatomic, strong) UILabel *labProgress;
//红色的layer
@property(nonatomic, strong) CAShapeLayer *progressLayer;
//灰色的layer
@property(nonatomic, strong) CAShapeLayer *grayProgressLayer;
@end

@implementation CCCircleView
{
    float _p;
    NSTimer *_timer;
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
         [self drawProgressCircleWithEndAngle:-M_PI_2 + M_PI * 2 isGrayCircle:YES];
    }
    return self;
}

- (void)setProgress:(double)progress {
    _progress = progress;
    NSString *s = @"%";
    self.labProgress.text = [NSString stringWithFormat:@"%0.1f%@",progress*100,s];
    if (_progress == 1.0) {
       self.labProgress.text = @"100%";
    }
    [self performSelector:@selector(delay) withObject:nil afterDelay:0.5];
    [self drawProgressCircleWithEndAngle:- M_PI_2 + M_PI * 2* (_progress) isGrayCircle:NO];
}

- (void)delay {
    _timer = [NSTimer scheduledTimerWithTimeInterval:0.020 target:self selector:@selector(drawProgress) userInfo:nil repeats:YES];
}

- (void)drawProgress {
    if (_p > self.progress + 0.01) {
        [_timer invalidate];
        _timer = nil;
        return;
    }
    [self drawProgressCircleWithEndAngle:- M_PI_2 + M_PI * 2* (_p) isGrayCircle:NO];
    _p += 0.05;
}

- (void)drawProgressCircleWithEndAngle:(CGFloat)endAngle isGrayCircle:(BOOL)isGrayCircle {
    CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.width / 2);
    CGFloat radius = self.frame.size.width / 2;
    CGFloat startA = -M_PI_2;
    CGFloat endA = endAngle;

    CAShapeLayer *layer;
    if(isGrayCircle) {
        layer = self.grayProgressLayer;
    }
    else {
        layer = self.progressLayer;
    }

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    layer.path =[path CGPath];
}

- (UILabel *)labProgress {
    if (!_labProgress) {
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(1, 0, self.frame.size.width-2, self.frame.size.height)];
        label.textAlignment = NSTextAlignmentCenter;
        label.center = CGPointMake(self.frame.size.width / 2, self.frame.size.width / 2);
        label.textColor = KHexColor(0xf23f3f);
        label.font = kFont(14);
        [self addSubview:label];
        _labProgress = label;
    }
    return _labProgress;
}

- (CAShapeLayer *)grayProgressLayer {
    if(!_grayProgressLayer) {
        _grayProgressLayer = [CAShapeLayer layer];
        _grayProgressLayer.frame = self.bounds;
        _grayProgressLayer.fillColor = [[UIColor clearColor] CGColor];
        _grayProgressLayer.strokeColor = [KHexColor(0xffe8e8) CGColor];
        _grayProgressLayer.opacity = 1;
        _grayProgressLayer.lineCap = kCALineCapRound;
        _grayProgressLayer.lineWidth = 4.0;
        [self.layer addSublayer:_grayProgressLayer];
    }
    return _grayProgressLayer;
}

- (CAShapeLayer *)progressLayer {
    if(!_progressLayer) {
        _progressLayer = [CAShapeLayer layer];
        _progressLayer.frame = self.bounds;
        _progressLayer.fillColor = [[UIColor clearColor] CGColor];
        _progressLayer.strokeColor = [KHexColor(0xf23f3f) CGColor];
        _progressLayer.opacity = 1;
        _progressLayer.lineCap = kCALineCapRound;
        _progressLayer.lineWidth = 4.0;
        [self.layer addSublayer:_progressLayer];
    }
    return _progressLayer;
}