iOS圆环进度条渐变
介绍
圆环进度条是一种常见的UI控件，常用于展示任务进度、下载进度等。在iOS开发中，我们可以利用Core Graphics框架绘制一个圆环，并通过动画控制其进度。本文将介绍如何在iOS中实现一个能够渐变的圆环进度条，并提供代码示例。
实现思路
要实现一个圆环进度条，我们需要进行以下几个步骤：
- 绘制圆环：使用Core Graphics框架绘制一个圆环并添加到视图上。
- 控制进度：通过动画控制圆环的进度，实现动态效果。
- 渐变效果：使用CAGradientLayer添加渐变效果，使圆环的颜色能够渐变。
绘制圆环
首先，我们需要创建一个UIView的子类来绘制圆环。在这个子类中，我们可以重写draw(_ rect: CGRect)方法来绘制圆环。
class CircleProgressView: UIView {
var progress: CGFloat = 0.0
override func draw(_ rect: CGRect) {
super.draw(rect)
let center = CGPoint(x: rect.midX, y: rect.midY)
let radius = min(rect.width, rect.height) / 2.0
let startAngle = CGFloat(-Double.pi / 2)
let endAngle = startAngle + progress * CGFloat(Double.pi * 2)
let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
path.lineWidth = 10.0
UIColor.blue.setStroke()
path.stroke()
}
}
在上面的代码中，我们首先获取到圆环的中心点和半径，然后根据进度计算起始角度和结束角度，使用UIBezierPath绘制一个圆环路径，并设置其线宽和颜色。
接下来，我们可以在ViewController中使用这个自定义视图，并通过改变progress属性来控制进度。
class ViewController: UIViewController {
var circleProgressView: CircleProgressView!
override func viewDidLoad() {
super.viewDidLoad()
circleProgressView = CircleProgressView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
view.addSubview(circleProgressView)
Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { [weak self] timer in
guard let self = self else {
timer.invalidate()
return
}
if self.circleProgressView.progress >= 1.0 {
timer.invalidate()
} else {
self.circleProgressView.progress += 0.01
self.circleProgressView.setNeedsDisplay()
}
}
}
}
在上面的代码中，我们创建了一个定时器，每0.1秒增加进度值，并重新绘制圆环。当进度达到100%时，定时器停止。
至此，我们已经实现了一个基本的圆环进度条。
添加渐变效果
要给圆环添加渐变效果，我们可以使用CAGradientLayer来实现。首先，我们需要在CircleProgressView类中创建一个渐变图层。
class CircleProgressView: UIView {
// ...
private var gradientLayer: CAGradientLayer!
override init(frame: CGRect) {
super.init(frame: frame)
setupGradientLayer()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setupGradientLayer()
}
private func setupGradientLayer() {
gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor, UIColor.green.cgColor]
gradientLayer.locations = [0.0, 0.5, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
layer.addSublayer(gradientLayer)
}
override func layoutSubviews() {
super.layoutSubviews()
gradientLayer.frame = bounds
gradientLayer.mask = createMaskLayer()
}
private func createMaskLayer() -> CAShapeLayer {
let maskLayer = CAShapeLayer()
let center = CGPoint(x: bounds.midX, y: bounds.midY)
let radius = min(bounds.width, bounds.height) / 2.0
let startAngle =
