如何绘制具有外部边框的圆形进度视图？

2024-03-16 14:59:07

绘制具有外部边框的圆形进度视图：分步指南

简介

绘制带有外部边框的圆形进度视图看似简单，但在实现中却并非易事。本文将提供一个分步指南，教你如何使用 CAShapeLayer 创建一个带有外部边框的圆形进度视图，轻松应对这种常见的设计需求。

问题解析

在绘制圆形进度视图时，常见的问题之一是进度条从圆形的内侧开始，而不是从外侧开始。造成这种情况的原因是 CAShapeLayer 的 strokeStart 属性默认值为 0，表示笔触从内侧开始。要使笔触从外侧开始，需要将 strokeStart 设置为 1。

此外，为了让外部边框与进度条保持一致，还需要调整 progressLayer 的 lineDashPattern。lineDashPattern 是一个数组，用于控制笔触的虚线模式。在这个场景中，使用 [4,4] 模式，将创建一段 4 像素长的实线和一段 4 像素长的虚线。

分步指南

创建 CAShapeLayer 对象

首先，创建一个 CAShapeLayer 对象来表示进度条的路径：

let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0 - 2, y: frame.size.height / 2.0 - 2), radius: (frame.size.width) / 2, startAngle: -(.pi / 2), endAngle: .pi * 1.5, clockwise: true)

创建跟踪图层和进度图层

接下来，创建一个 CAShapeLayer 对象作为跟踪图层，另一个 CAShapeLayer 对象作为进度图层：

var trackLayer = CAShapeLayer()
var progressLayer = CAShapeLayer()

设置跟踪图层

将跟踪图层的路径设置为 circlePath，并设置其线宽、颜色和填充颜色：

trackLayer.path = circlePath.cgPath
trackLayer.strokeColor = UIColor.gray.cgColor
trackLayer.lineWidth = 10
trackLayer.strokeEnd = 1.0
trackLayer.lineDashPattern = [4,4]
trackLayer.fillColor = UIColor.red.cgColor

设置进度图层

将进度图层的路径设置为 circlePath，并设置其线宽、颜色和填充颜色：

progressLayer.path = circlePath.cgPath
progressLayer.fillColor = UIColor.clear.cgColor
progressLayer.strokeColor = progressColor.cgColor
progressLayer.lineWidth = progressLineWidth
progressLayer.strokeStart = 1.0
progressLayer.strokeEnd = CGFloat(progress)
progressLayer.lineDashPattern = [4,4]

添加图层到视图

最后，将跟踪图层和进度图层添加到视图：

layer.addSublayer(trackLayer)
layer.addSublayer(progressLayer)

代码示例

将上述步骤整合到一个完整的代码示例中，如下所示：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建圆形路径
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0 - 2, y: frame.size.height / 2.0 - 2), radius: (frame.size.width) / 2, startAngle: -(.pi / 2), endAngle: .pi * 1.5, clockwise: true)

        // 创建跟踪图层
        var trackLayer = CAShapeLayer()
        trackLayer.path = circlePath.cgPath
        trackLayer.strokeColor = UIColor.gray.cgColor
        trackLayer.lineWidth = 10
        trackLayer.strokeEnd = 1.0
        trackLayer.lineDashPattern = [4,4]
        trackLayer.fillColor = UIColor.red.cgColor

        // 创建进度图层
        var progressLayer = CAShapeLayer()
        progressLayer.path = circlePath.cgPath
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.strokeColor = progressColor.cgColor
        progressLayer.lineWidth = progressLineWidth
        progressLayer.strokeStart = 1.0
        progressLayer.strokeEnd = CGFloat(progress)
        progressLayer.lineDashPattern = [4,4]

        // 添加图层到视图
        layer.addSublayer(trackLayer)
        layer.addSublayer(progressLayer)
    }
}