之前由于项目中需要自定义一个带有渐变色的进度条(也可以成为progressView),最近抽出一点时间来整理一下。一来可以记录一下,二来也可以和大家分享一下他的实现过程。
首先,需求是这样的。看图。
今天,我们的目的就是这个环形进度条的实现。要实现这样一个需求,需要三步:
第一步:从0%到99%的那个灰色背景的环形Layer。
第二步:具有进度的progressLayer(就是上图有颜色的那个layer,但是这个时候没有渐变色哦)
第三步:给progressLayer 加上渐变色
既然知道每一步该干啥,那就直接开始入手了。首先勾勒出环形背景
背景写好了,接下来我们来完成progress的layer这个时候还是没有渐变色的
添加渐变色,最主要的是设置CAGradientLayer。
比如 progressLayer.strokeEnd = 0.5。我们的进度为50%.duang,一个带有渐变色的进度条就实现了
当然你也可以加上动画,让他在改变的时候看起来更舒服。
好了,如果正好对你有帮助,你也可以试试看。