最近项目需求里有一个环形渐变进度条。在查阅相关资料后，决定自己撸一个，当然感谢ios 做一个完整的渐变进度条（OC原版）文章作者提供的思路和Demo。
首先，上效果图：
效果图.gif
思路
利用layer层的遮罩完成整个功能。
实现步骤：
1、绘制环形路径（贝塞尔曲线实现）
2、绘制背景环状layer层，添加曲线路径。
3、绘制渐变色layer层，添加到view的子layer上。
4、绘制进度layer层，添加曲线路径（用shapeLayer的strokeEnd属性来控制进度的结尾处）。
利用到的主要的功能类有：
UIBezierPath： 绘制环形的主要功能类
CAShapeLayer： 主要结合贝塞尔曲线进行各种形状的绘制类
CAGradientLayer： 渲染渐变色的主要功能类
UIView: 这个就不多说了
代码实现
首先创建View类用于自定义视图：
类中包含的属性以及方法.png
1、开始添加可能用到的属性
属性：
var progess: CGFloat = 0.0 // 环形进度
var label: UILabel? // 中心文本显示
var lineWidth: CGFloat = 0.0 // 环形的宽
private var foreLayer: CAShapeLayer? // 进度条的layer层（可做私有属性）
2、添加完属性后，首先开始覆写父类的构造器，并自定义自己的便利构造器（这里需要注意的是在swift中本类的便利构造器只能调用本类的构造器，本类的构造器里，只能调用父类的构造器进行覆写）
关于构造器的覆写的概念，上述是我自己的理解，我本人也不是太明确，如果有明白的读者发现我的理解有误，请不吝指正 ，非常感谢。
首先覆写父类的构造器：
override init(frame: CGRect) {
super.init(frame: frame)
}
// 覆写父类构造器后这个方法是必须实现的
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
然后，编写自己的遍历构造器
// 遍历构造器传入frame，以及进度条宽度
convenience init(frame: CGRect, lineWidth: CGFloat) {
self.init(frame: frame)
self.lineWidth = lineWidth
seup(rect: frame) // 绘制自定义视图的函数
}
最后，实现seup函数：
func seup(rect: CGRect) -> Void {
// 背景圆环（灰色背景）
let shapeLayer: CAShapeLayer = CAShapeLayer.init()
// 设置frame
shapeLayer.frame = CGRect.init(x: 0, y: 0, width: rect.size.width, height: rect.size.height)
shapeLayer.lineWidth = self.lineWidth
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.init(red: 50/255, green: 40/255, blue: 50/255, alpha: 1).cgColor
let center: CGPoint = CGPoint.init(x: rect.size.width/2, y: rect.size.height/2)
// 画出曲线（贝塞尔曲线）
let bezierPath: UIBezierPath = UIBezierPath.init(arcCenter: center, radius: (rect.size.width - self.lineWidth)/2, startAngle: CGFloat(-0.5 * Double.pi), endAngle: CGFloat(1.5 * Double.pi), clockwise: true)
shapeLayer.path = bezierPath.cgPath // 将曲线添加到layer层
self.layer.addSublayer(shapeLayer) // 添加蒙版
// 渐变色 加蒙版 显示蒙版区域
let gradientLayer: CAGradientLayer = CAGradientLayer.init()
gradientLayer.frame = self.bounds
gradientLayer.colors = NSArray.init(array: [UIColor.init(hexString: "#5F98FC").cgColor, UIColor.init(hexString: "#47BF00").cgColor]) as? [Any]
gradientLayer.startPoint = CGPoint.init(x: 0, y: 0)
gradientLayer.endPoint = CGPoint.init(x: 0, y: 1)
self.layer.addSublayer(gradientLayer) // 将渐变色添加带layer的子视图
self.foreLayer = CAShapeLayer.init()
self.foreLayer?.frame = self.bounds
self.foreLayer?.fillColor = UIColor.clear.cgColor
self.foreLayer?.lineWidth = self.lineWidth
self.foreLayer?.strokeColor = UIColor.red.cgColor
self.foreLayer?.strokeEnd = 0
/* The cap style used when stroking the path. Options are `butt', `round'
* and `square'. Defaults to `butt'. */
self.foreLayer?.lineCap = kCALineCapRound // 设置画笔
self.foreLayer?.path = bezierPath.cgPath
// 修改渐变layer层的遮罩, 关键代码
gradientLayer.mask = self.foreLayer
self.label = UILabel.init(frame: self.bounds)
self.label?.text = ""
self .addSubview(self.label!)
self.label?.font = UIFont.boldSystemFont(ofSize: 42)
self.label?.textColor = UIColor.white
self.label?.textAlignment = NSTextAlignment.center
}
至此，我们初步实现了整个视图的绘制，调整进度的关键在于，foreLayer的strokeEnd属性的值，范围在0到1之间。
接下来，我们实现函数setProgress(value:)的方法，来暴露设置百分比的对外接口，如下;
func setProgress(value: CGFloat) -> Void {
progess = value // 设置当前属性的值
self.label?.text = String.init(format: "%.f%%", progess * 100) // 设置内部Label显示的值(注意字符的格式化)
self.foreLayer?.strokeEnd = progess // 视图改变的关键代码
}
OK 这样在视图的环节，我们的所有功能就实现了，接下来，在ViewController中，添加一个sliderbar实验一下我们的视图（以下代码均在ViewDidLoad中， self是当前的ViewController）
self.view.backgroundColor = UIColor.black
//添加进度视图，这里是VC的一个属性
self.pathView = LXCircle.init(frame: CGRect.init(x: 0, y: 0, width: self.view.bounds.size.width - 30, height: self.view.bounds.size.width - 30), lineWidth: 30)
pathView?.center = self.view.center
pathView?.backgroundColor = UIColor.clear
self.view .addSubview(pathView!)
let slider: UISlider = UISlider.init(frame: CGRect.init(x: 50, y: (pathView?.frame.maxY)! + 50, width: self.view.bounds.size.width - 2*50, height: 30))
slider.addTarget(self, action: #selector(sliderMethod(slider:)), for: UIControlEvents.valueChanged)
slider.maximumValue = 1.0
slider.minimumValue = 0
slider.minimumTrackTintColor = UIColor.init(hexString: "#5F98FC")
self.view.addSubview(slider)
添加滑动方法：
@objc
func sliderMethod(slider: UISlider) -> Void {
self.pathView?.setProgress(value: CGFloat(slider.value))
}
最终就实现了如效果图所示的Demo。
补充和完善（非常重要）
上文中在UIColor中的init(hexString:)的方法，并非是系统的方法，而是我自己写的将16进制的字符串颜色，转化为color的方法，写在了UIColor的扩展里（这里和objective-c中的类目的用法一样，但概念上是有很大区别的）
具体的实现大家可以自行google，有很多实现方法，在这里就不赘述了。
另外，上文中，如果需要给视图传递一个初始化的进度，需要在seup函数中做如下修改即可：
// self.foreLayer?.strokeEnd = 0
self.foreLayer?.strokeEnd = self.progess
至于为什么，我想大家应该一眼就可以看明白。
最后，关于layer层的遮罩的顺序，以及利用Quartz2D去实现相同功能的视图，我还是不是非常清楚，希望有读者看到这个最后的补充有兴趣我们可以多交流下。
最后的最后，附上一篇在简书的社区里发现的利用Quart2D实现环形进度的文章。
文章对你有帮助的话，请点赞哟！！！
网友评论