iOS开发圆形进度条

来源：互联网发布：java 架构师编辑：程序博客网时间：2024/05/21 17:00

好久不写东西了，最近比较有时间，然后根据项目中的需求总结这篇文章————圆形进度条的展示

1.一个简单的进度条，一个view，一个label（用来展示数据）就okl

2.进度条无非就是贝塞尔曲线画出来

//初始化label标签

- (UILabel *)progressLabel {
    if (!_progressLabel) {
        _progressLabel = [[UILabel alloc] initWithFrame:self.progressView.bounds];
        [_progressLabel setText:@"0%"];
        [_progressLabel setBackgroundColor:[UIColor blackColor]];
        [_progressLabel setTextAlignment:NSTextAlignmentCenter];
        [_progressLabel.layer setCornerRadius:25];
        [_progressLabel.layer setMasksToBounds:YES];

        [_progressLabel setTextColor:[UIColor whiteColor]];

    }
    return _progressLabel;
}
//进度条的view
- (UIView *)progressView {
    if (!_progressView) {
        _progressView = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-25, 50, 50)];
        [_progressView setBackgroundColor:[UIColor blackColor]];
        [_progressView.layer setCornerRadius:25];
        [_progressView.layer setMasksToBounds:YES];

        [_progressView addSubview:self.progressLabel];
        [self addProgress];

    }
    return _progressView;
}

//接下来贝塞尔曲线画线

首先先画出来灰色默认的标示进度的圈圈

self.outLayer = [CAShapeLayer layer];
    CGRect rect = CGRectMake(1, 1, self.progressView.frame.size.width-2, self.progressView.frame.size.height-2);
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];
    self.outLayer.strokeColor = [UIColor lightGrayColor].CGColor;
    self.outLayer.lineWidth = 2;
    self.outLayer.fillColor = [UIColor clearColor].CGColor;
    self.outLayer.path = path.CGPath;
    [self.progressView.layer addSublayer:self.outLayer];

    [self addProgressLayer];

//然后画出来表示进度的其他颜色的进度条

其实跟上一步一样，只是画笔颜色改变一下

    self.progressLayer = [CAShapeLayer layer];
    CGRect rect = CGRectMake(1, 1, self.progressView.frame.size.width-2, self.progressView.frame.size.height-2);
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];
    self.progressLayer.strokeColor = [UIColor blueColor].CGColor;
    self.progressLayer.lineWidth = 2;
    self.progressLayer.fillColor = [UIColor clearColor].CGColor;
    self.progressLayer.lineCap = kCALineCapRound;
    self.progressLayer.path = path.CGPath;
    [self.progressView.layer addSublayer:self.progressLayer];

//此时不出以外就能看到圆形进度条的雏形了

此时会发现蓝色进度条显示位置不对，我们可以通过翻转progressView来实现

[_progressView setTransform:CGAffineTransformMakeRotation(-M_PI_2)];

这样进度条就会从顶端开始

然后这样还有一个问题就是label数据展示位置不正，同样我们也给label翻转一下

[_progressLabel setTransform:CGAffineTransformMakeRotation(M_PI_2)];

注意这个要顺时针翻转而不是逆时针

最后一步就是传递要展示的数据

- (void)updateProgressWithNumber:(NSUInteger)number {
    [self.progressLabel setText:[NSString stringWithFormat:@"%ld%@",number,@"%"]];
    [CATransaction begin];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
    [CATransaction setAnimationDuration:0.5];
    self.progressLayer.strokeEnd = number/100.0;
    [CATransaction commit];
}

到此一个最简单的进度展示就完成了，简单吧，请大家多多指教

阅读全文

0 0