ios环形进度条圆点

原创

mob64ca12e95b2b 2024-05-31 04:13:45 ©著作权

文章标签 环形进度条 ci iOS 文章分类 iOS 移动开发

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

科普文章：iOS环形进度条圆点

在iOS开发中，环形进度条是一个常见的UI组件，用来展示某个任务或操作的进度。而在环形进度条中添加圆点标记，可以更加直观地显示进度的变化。本文将介绍如何在iOS环形进度条中添加圆点标记，并给出相关代码示例。

环形进度条简介

环形进度条是一种常见的UI控件，用来展示任务或操作的进度。它通常由一个圆环组成，根据进度的变化而动态改变其填充比例。环形进度条可以帮助用户更直观地了解任务的完成情况，提高用户体验。

添加圆点标记

在环形进度条中添加圆点标记可以让用户更清晰地看到进度的变化。我们可以通过绘制一个圆形的视图，并根据进度的变化来动态改变圆点的位置。

实现步骤

下面是实现添加圆点标记的步骤：

// 创建圆点视图
let dotView = UIView()
dotView.backgroundColor = UIColor.red
dotView.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
dotView.layer.cornerRadius = 5
dotView.clipsToBounds = true

flowchart TD
    A[开始] --> B[创建圆点视图]
    B --> C[设置圆点样式]
    C --> D[设置圆点位置]

代码示例

下面是一个简单的环形进度条控件，其中添加了圆点标记的代码示例：

class CircularProgressBar: UIView {
    
    private let progressLayer = CAShapeLayer()
    private let dotView = UIView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupProgressBar()
        setupDotView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupProgressBar()
        setupDotView()
    }
    
    private func setupProgressBar() {
        // 绘制环形进度条
        let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 3 * CGFloat.pi / 2, clockwise: true)
        progressLayer.path = circularPath.cgPath
        progressLayer.strokeColor = UIColor.blue.cgColor
        progressLayer.lineWidth = 10
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.lineCap = .round
        layer.addSublayer(progressLayer)
    }
    
    private func setupDotView() {
        // 创建圆点视图
        dotView.backgroundColor = UIColor.red
        dotView.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
        dotView.layer.cornerRadius = 5
        dotView.clipsToBounds = true
        addSubview(dotView)
    }
    
    func updateProgress(to progress: CGFloat) {
        // 更新进度
        let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 3 * CGFloat.pi / 2 * progress, clockwise: true)
        progressLayer.path = circularPath.cgPath
        
        // 更新圆点位置
        let angle = 2 * CGFloat.pi * progress - CGFloat.pi / 2
        let x = center.x + 90 * cos(angle)
        let y = center.y + 90 * sin(angle)
        dotView.frame.origin = CGPoint(x: x, y: y)
    }
}

使用环形进度条

现在我们可以使用上面的环形进度条控件，来展示任务或操作的进度，并动态更新圆点标记的位置。

示例

下面是一个简单的示例，展示如何使用环形进度条控件：

let circularProgressBar = CircularProgressBar(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
view.addSubview(circularProgressBar)

circularProgressBar.updateProgress(to: 0.5)