对简易弧形进度条的实现的理解

末蓝、 2022-07-28 09:27 203阅读 0赞

![Center][]![Center 1][]

图A:这种进度条100%就是一整个圆

图B:这种进度条100%是从-240度到30度，样式根据开发需要随意设置，下面具体谈实现

**第一步：用UIView类写一个方法****使用CAShapeLayer和UIBezierPath画出完整的圆形轨道，方法名为**

\- (void)drawProgress；

\#define degreesToRadians(x) (M\_PI\*(x)/180.0)//把角度转换成PI的方式

CGPoint center = CGPointMake(100, 100);

CGFloat radius = 90;

CGFloat startA =  degreesToRadians(-210);  //设置进度条起点位置

CGFloat endA = degreesToRadians(-210) + degreesToRadians(240)  \* \_progress;  //设置进度条终点位置

//获取环形路径（画一个圆形，填充色透明，设置线框宽度为10，这样就获得了一个环形）

\_progressLayer = \[CAShapeLayerlayer\];//创建一个track shape layer

\_progressLayer.frame = self.bounds;

\_progressLayer.fillColor = \[\[UIColorclearColor\] CGColor\];  //填充色为无色

\_progressLayer.strokeColor = \[\[UIColorcyanColor\]  CGColor\]; //指定path的渲染颜色,这里可以设置任意不透明颜色

\_progressLayer.opacity = 1; //背景颜色的透明度

\_progressLayer.lineCap = kCALineCapRound;//指定线的边缘是圆的

\_progressLayer.lineWidth = 10;//线的宽度

UIBezierPath \*path = \[UIBezierPathbezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES\];//上面说明过了用来构建圆形

\_progressLayer.path =\[path CGPath\];  //把path传递給layer，然后layer会处理相应的渲染，整个逻辑和CoreGraph是一致的。

\[self.layeraddSublayer:\_progressLayer\];

**第二步：渐变色的设置，分成两块，左边是从黄色色变成绿色。右边是从黄色变成红色,效果图如下，然后用progressLayer来截取渐变层即可达到圆形彩色轨道效果**

![Center 2][]

//生成渐变色

CALayer \*gradientLayer = \[CALayerlayer\];

//左侧渐变色

CAGradientLayer \*leftLayer = \[CAGradientLayerlayer\];

leftLayer.frame = CGRectMake(0, 0, self.bounds.size.width / 2, self.bounds.size.height);    // 分段设置渐变色

leftLayer.locations = @\[@0.3, @0.9, @1\];

leftLayer.colors = @\[(id)\[UIColoryellowColor\].CGColor, (id)\[UIColorgreenColor\].CGColor\];

\[gradientLayer addSublayer:leftLayer\];

//右侧渐变色

CAGradientLayer \*rightLayer = \[CAGradientLayerlayer\];

rightLayer.frame = CGRectMake(self.bounds.size.width / 2,  0, self.bounds.size.width / 2,  self.bounds.size.height);

rightLayer.locations = @\[@0.3, @0.9, @1\];

rightLayer.colors = @\[(id)\[UIColoryellowColor\].CGColor, (id)\[UIColorredColor\].CGColor\];

\[gradientLayer addSublayer:rightLayer\];

\[gradientLayer setMask:\_progressLayer\]; //用progressLayer来截取渐变层

\[self.layeraddSublayer:gradientLayer\];

**第三部：外部调用此进度条的方法，使用传入一个0-1的float类型的参数控制进度条的进度即可**

\- (void)drawProgress:(CGFloat )progress

\_progress = progress;

\_progressLayer.opacity = 0;

\[selfsetNeedsDisplay\];

\- (void)drawRect:(CGRect)rect \{

\[selfdrawProgress\];

[Center]: https://img-blog.csdn.net/20160413162849352?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220724/7d807568a3af438881059322f34416ae.png
[Center 2]: /images/20220724/bb31f0dbf1f9431fa1e136aaf5a98c40.png