Swift带有渐变色的环形进度条如何实现?

        之前由于项目中需要自定义一个带有渐变色的进度条(也可以成为progressView),最近抽出一点时间来整理一下。一来可以记录一下,二来也可以和大家分享一下他的实现过程。

        首先,需求是这样的。看图。

这是一个很常见的带有渐变色的环形进度条

        今天,我们的目的就是这个环形进度条的实现。要实现这样一个需求,需要三步:

        第一步:从0%到99%的那个灰色背景的环形Layer。

        第二步:具有进度的progressLayer(就是上图有颜色的那个layer,但是这个时候没有渐变色哦)

        第三步:给progressLayer 加上渐变色     

        既然知道每一步该干啥,那就直接开始入手了。首先勾勒出环形背景

通过layer和贝塞尔曲线勾勒出环形的背景


           背景写好了,接下来我们来完成progress的layer这个时候还是没有渐变色的

设置progressLayer的基本属性

            添加渐变色,最主要的是设置CAGradientLayer。

设置mask必不可少,后面我们可以通过控制progresslayer的stokeend来控制进度

              比如 progressLayer.strokeEnd = 0.5。我们的进度为50%.duang,一个带有渐变色的进度条就实现了

大功告成

    当然你也可以加上动画,让他在改变的时候看起来更舒服。

progress的取值为0-1

    好了,如果正好对你有帮助,你也可以试试看。

你可能感兴趣的:(Swift带有渐变色的环形进度条如何实现?)