如何在 iOS 中创建带有渐进透明度的圆形进度条？

IOS

2024-07-26 06:02:09

在 iOS 应用开发中，圆形进度条常常被用来以一种更优雅、更直观的方式向用户展示任务进度。而为进度条添加渐进透明度，无疑能让你的应用在细节上更胜一筹，提升用户体验。

那么，如何在 iOS 中创建带有渐进透明度的圆形进度条呢？本文将为你揭晓答案。

准备工作

在开始之前，我们需要先了解一下实现这一效果的关键要素：

CAShapeLayer: CAShapeLayer 是 Core Animation 框架中的一部分，用于绘制矢量图形。我们可以利用它来创建圆形的进度条路径。
CAGradientLayer: CAGradientLayer 允许我们创建颜色渐变效果。通过将其与 CAShapeLayer 结合，我们可以实现进度条的渐进透明度。
UIBezierPath: UIBezierPath 用于创建基于矢量的路径，我们可以用它来绘制圆形进度条的轨迹。

代码实现

import UIKit

class AlphaProgressBar: UIView {

    private let trackLayer = CAShapeLayer() // 进度条背景轨迹
    private let progressLayer = CAShapeLayer() // 进度条前景
    private let gradientLayer = CAGradientLayer() // 渐变层

    // 进度值，取值范围 0.0 - 1.0
    var progress: CGFloat = 0 {
        didSet {
            // 进度变化时更新 UI
            updateProgress()
        }
    }

    // MARK: - 初始化方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }

    // MARK: - 设置图层
    private func setupLayers() {
        // 设置背景轨迹图层
        trackLayer.fillColor = UIColor.clear.cgColor
        trackLayer.strokeColor = UIColor.lightGray.cgColor
        trackLayer.lineWidth = 10
        layer.addSublayer(trackLayer)

        // 设置进度条图层
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.strokeColor = UIColor.blue.cgColor
        progressLayer.lineWidth = 10
        progressLayer.lineCap = .round // 设置圆角线条
        layer.addSublayer(progressLayer)

        // 设置渐变图层
        gradientLayer.colors = [
            UIColor.blue.cgColor,
            UIColor.blue.withAlphaComponent(0.5).cgColor,
            UIColor.clear.cgColor
        ]
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1)
        // 将渐变层作为 progressLayer 的 mask
        progressLayer.mask = gradientLayer 
    }

    // MARK: - 更新进度
    private func updateProgress() {
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = min(bounds.width, bounds.height) / 2 - trackLayer.lineWidth / 2
        let startAngle: CGFloat = -CGFloat.pi / 2 // 从顶部开始
        let endAngle = startAngle + 2 * .pi * progress // 根据进度计算结束角度

        // 创建圆形路径
        let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        
        // 更新进度条图层的路径
        progressLayer.path = path.cgPath
    }

    // MARK: - 布局更新
    override func layoutSubviews() {
        super.layoutSubviews()
        // 更新图层 frame
        gradientLayer.frame = bounds
        trackLayer.frame = bounds
        updateProgress()
    }
}

代码解读

创建自定义 View: 我们创建了一个名为 AlphaProgressBar 的自定义 UIView 子类，用于封装圆形进度条的实现逻辑。
初始化图层: 在 setupLayers 函数中，我们创建并初始化了三个图层：trackLayer 用于绘制背景轨迹，progressLayer 用于绘制进度条，gradientLayer 用于创建颜色渐变效果。
设置渐变效果: 我们为 gradientLayer 设置了颜色数组、起始点和结束点，并将 gradientLayer 设置为 progressLayer 的 mask，从而为进度条添加了渐进透明度。
更新进度: updateProgress 函数根据当前进度值 progress 计算圆弧路径，并更新 progressLayer 的 path 属性，从而实现进度条的动态更新。
处理布局变化: 在 layoutSubviews 函数中，我们更新了各个图层的 frame，确保在视图布局发生变化时进度条能够正确显示。

使用示例

在你的 ViewController 中，你可以像使用普通的 UIView 一样使用 AlphaProgressBar：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建 AlphaProgressBar 实例
        let progressBar = AlphaProgressBar(frame: CGRect(x: 50, y: 100, width: 200, height: 200))
        view.addSubview(progressBar)

        // 设置进度
        progressBar.progress = 0.75 
    }
}

常见问题解答

如何修改进度条的颜色？

你可以修改 progressLayer 的 strokeColor 属性来改变进度条的颜色。例如，将其设置为 UIColor.red.cgColor 将会得到一个红色的进度条。
如何调整进度条的粗细？

你可以修改 trackLayer 和 progressLayer 的 lineWidth 属性来调整进度条的粗细。
如何改变渐变的方向？

你可以修改 gradientLayer 的 startPoint 和 endPoint 属性来改变渐变的方向。例如，将 startPoint 设置为 CGPoint(x: 0, y: 0.5)，将 endPoint 设置为 CGPoint(x: 1, y: 0.5) 将会得到一个水平方向的渐变。
如何实现动画效果？

你可以使用 Core Animation 提供的动画 API 来实现进度条的动画效果。例如，使用 CABasicAnimation 可以实现进度条的平滑过渡。
如何自定义进度条的背景？

你可以修改 trackLayer 的相关属性来自定义进度条的背景。例如，你可以设置 fillColor 属性来填充背景颜色，或者设置 lineDashPattern 属性来创建虚线背景。