自定义环形进度条UIAnnularProgress（Swift）

最新推荐文章于 2024-08-02 19:31:23 发布

一步一迹

最新推荐文章于 2024-08-02 19:31:23 发布

阅读量3.8k

点赞数 1

分类专栏： iOS swift 进度条文章标签： swift 进度条

本文链接：https://blog.csdn.net/qq_30970529/article/details/52679198

版权

本文介绍了如何使用Swift自定义环形进度条控件UIAnnularProgress，通过继承UIView并利用CAShapeLayer创建环形图层，设置颜色、宽度和动画效果。文章展示了创建底层和进度图层的过程，以及通过CATransaction添加动画的实现方式。最后，提供了在控制器中使用该控件的示例。

摘要由CSDN通过智能技术生成

很多地方都会使用环形进度条，这里我们就继承自UIView，自定义一个环形进度条控件，可以设置进度条颜色，宽度，进度，动画效果。

我们自定义一个环型图层添加到UIView的图层上去，从而实现环形控件。我们使用CAShapeLayer类创建自己的图层。它有几个常用的属性：frame 尺寸，fillColor图层填充色，strokeColor图层边界的颜色，lineWidth 边界线宽，path 图层路径通过这个路径我们可以控制图层的形状在这里我们会给图层一个圆形路径让整个视图呈现环状，strokeStart简单点理解就是绘制的起点在这我们把它作为初始进度，strokeEnd绘制的终点它可以作为结束的进度。
我们先创建一个图层，完全绘制作为进度条的底部图形：

 let path = UIBezierPath(ovalInRect: bounds).CGPath       
 let trackLayer = CAShapeLayer()
 trackLayer.frame = bounds
 trackLayer.fillColor = UIColor.clearColor().CGColor
 trackLayer.strokeColor = progressProperty.trackColor.CGColor
 trackLayer.lineWidth = progressProperty.width
 trackLayer.path = path
 layer.addSublayer(trackLayer)

let path = UIBezierPath(ovalInRect: bounds).CGPath //这是我们以视图尺寸创建的一个内切圆，将这个圆作为路径。

接下来我们再创建一个图层，表示进度条视图的进度，并且给这个图层一个初始的进度

        progressLayer.frame = bounds
        progressLayer.fillColor = UIColor.clearColor().CGColor
        progressLayer.strokeColor = progressProperty.progressColor