IOS 圆环进度条圆角

原创

mob649e8162c013 2024-11-15 05:40:44 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8162c013的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何实现 iOS 圆环进度条的圆角效果

在 iOS 开发中，圆环进度条是一种常见的用户界面元素，通常用于展示任务的完成度。在这篇文章中，我们将学习如何实现一个有圆角效果的圆环进度条。以下是实现这一功能的整个流程：

步骤	描述
1. 创建自定义视图	创建一个继承自 UIView 的自定义视图
2. 绘制圆环	使用 Core Graphics 绘制圆环
3. 实现圆角效果	修改绘图路径以实现圆角效果
4. 添加进度更新功能	使用方法更新进度值并重绘视图
5. 测试和调整	测试效果并根据需要调整代码

以下是对每一步的详细解释和代码：

1. 创建自定义视图

首先，我们需要创建一个自定义视图，继承自 UIView。这个视图将用于绘制我们的圆环。

import UIKit

class CircularProgressView: UIView {

    var progress: CGFloat = 0.0 {
        // 观察到 progress 变化时重绘视图
        didSet {
            setNeedsDisplay() // 调用 draw 方法重新绘制视图
        }
    }
    
    // 配置圆角的半径
    var cornerRadius: CGFloat = 10.0
    
    // 设置视图的边界框
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.layer.cornerRadius = cornerRadius // 使视图具有圆角
        self.clipsToBounds = true // 防止超出的内容
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2. 绘制圆环

我们接下来将在自定义视图的 draw(_:) 方法中绘制圆环。

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }
    
    // 计算圆环的中心和半径
    let center = CGPoint(x: rect.midX, y: rect.midY)
    let radius = min(rect.width, rect.height) / 2 - cornerRadius
    
    // 创建圆环的路径
    let circularPath = UIBezierPath(arcCenter: center,
                                     radius: radius,
                                     startAngle: -CGFloat.pi / 2,
                                     endAngle: (2 * CGFloat.pi * progress) - CGFloat.pi / 2,
                                     clockwise: true)
    
    // 设置圆环的颜色和宽度
    context.setStrokeColor(UIColor.blue.cgColor) // 设置圆环颜色
    context.setLineWidth(10.0) // 设置圆环宽度
    
    // 添加绘制路径
    context.addPath(circularPath.cgPath)
    
    // 绘制圆环
    context.strokePath()
}

3. 实现圆角效果

在 draw(_:) 方法中圆环本身已经使用了圆角，如果我们想要实现更复杂的效果，我们可以调整路径的处理方式，确保路径的结束处是圆角的。

4. 添加进度更新功能

为了能够动态更新进度，我们可以增加一个更新方法。

func setProgress(to progress: CGFloat, animated: Bool) {
    self.progress = min(max(progress, 0.0), 1.0) // 限制进度值在0到1之间
    
    // 动画效果
    if animated {
        UIView.animate(withDuration: 0.5) {
            self.setNeedsDisplay() // 重绘视图
        }
    } else {
        self.setNeedsDisplay() // 不带动画时直接重绘视图
    }
}

5. 测试和调整

最后，我们可以在视图控制器中实例化 CircularProgressView，并测试其功能。

class ViewController: UIViewController {
    let progressView = CircularProgressView()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        progressView.frame = CGRect(x: 100, y: 100, width: 200, height: 200) // 设置位置和大小
        view.addSubview(progressView)

        // 测试圆环进度
        progressView.setProgress(to: 0.75, animated: true) // 将进度设置为75%
    }
}

gantt
    title iOS 圆环进度条实现流程
    dateFormat  YYYY-MM-DD
    section 创建自定义视图
    创建 CircularProgressView :a1, 2023-10-01, 1d
    section 绘制圆环
    实现圆环绘制 :a2, after a1, 2d
    section 实现圆角效果
    优化绘图逻辑 :a3, after a2, 1d
    section 添加进度更新功能
    编写更新进度方法 :a4, after a3, 1d
    section 测试和调整
    在视图控制器中测试 :a5, after a4, 1d