Swift4撸一个圆形渐变进度条

2018-02-09 12:48:19来源:https://www.jianshu.com/p/510980438631作者:莫寂岚人点击

分享


最近项目需求里有一个环形渐变进度条。在查阅相关资料后,决定自己撸一个,当然感谢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实现环形进度的文章。


简书传送门《iOS_Quartz2D_环形进度条绘制》


文章对你有帮助的话,请点赞哟!!!








最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台