iOS 自定义进度条

一般成长值类型的进度条都是纯色的，比如这样的：

keep等级进度条

纯色的进度条无论用layer还是view，只要计算好比例就是很好做的。

我们的需求是自定义的进度条是这样的：

屏幕快照 2019-07-30 下午9.24.25.png

从图中可以看出我们的UI进度条是红粉相间的，而且单个的还是平行四边形。在实现方案上，考虑了下，就放弃了使用切图imageView实现的思路，因为进度条的长度代表当前值和总值的比例，就算是平行四边形也有可能不是完整的四边形，使用切图的方式是不好实现的。那么我们只能通过layer来实现了。

确定了基本的方案，还有几个问题：
1.如何实现粉红相间的效果
2.如何绘制每个平行四边形、进度条末端不完整的四边形以及进度条最后的弧线
3.这么大的图标占了一小段的进度条怎么办
4.怎么知道进度条要画多长，平行四边形要画多少个，以及进度条末端不完整的四边形的大小

现在我们来一一解答这些问题:

1.纯色的进度条可以很容易的用layer实现，但是多个颜色的不容易实现，是因为layer只能有一种fillColor或者strokeColor,设置两种fillColor或者strokeColor会以最后的设置来绘制。我也想过把红色、粉色分别作为fillColor和strokeColor,但是想想就放弃了，路径实现不好画。那我们如果用两个layer分别是粉色、红色的fillColor是不是就可以实现了？理论上是可以的。

- (CAShapeLayer *)redLayer
{
    if (!_redLayer) {
        _redLayer = [CAShapeLayer layer];
        _redLayer.fillColor = HKColor(252, 85, 108, 1).CGColor;
        _redLayer.strokeColor = HKColor(255, 153, 167, 1).CGColor;

        _redLayer.lineWidth = 1;
        
    }
    return _redLayer;
}

- (CAShapeLayer *)pinkLayer
{
    if (!_pinkLayer) {
        _pinkLayer = [CAShapeLayer layer];
        _pinkLayer.fillColor = HKColor(255, 153, 167, 1).CGColor;
        _pinkLayer.strokeColor = HKColor(255, 153, 167, 1).CGColor;
        _pinkLayer.lineWidth = 1;


    }
    return _pinkLayer;
}

2.四边形可以看做是一条条直线组成，弧线可以用半圆来近似绘制,这两种绘制都可以用贝塞尔曲线很容易的实现，如下所示：

            [path moveToPoint:CGPointMake(0+_singleSquareWidth*(i-1), _singleSquareHeight)];
            [path addLineToPoint:CGPointMake(0+_singleSquareOffset+_singleSquareWidth*(i-1), 0)];
            [path addLineToPoint:CGPointMake(0+_singleSquareOffset+_singleSquareWidth*(i-1)+_singleSquareWidth,0)];
            [path addLineToPoint:CGPointMake(0+_singleSquareWidth+_singleSquareWidth*(i-1),_singleSquareHeight)];
            [path addLineToPoint:CGPointMake(0+_singleSquareWidth*(i-1), _singleSquareHeight)];

            [redPath addArcWithCenter:CGPointMake(0, _singleSquareHeight/2) radius:_singleSquareHeight/2 startAngle:M_PI_2 endAngle:M_PI_2*3 clockwise:YES];

这两种都是贝塞尔曲线的基本用法

3.由于我们的图标比较大，所以占据的进度条的长度是不可以忽略不计的，所以我们需要图标占位大小一个值，方便我们做进度条进度的比例剔除掉这部分的长度，避免出现进度条进度和进度值不符的现象。

4.要确定进度条画多长我们要先确定，进度值是在当前哪一段进度中，就是我的代码中定义的index属性，从0开始。

if (self.currentGrowUpValue == [[self.growUpValueArray firstObject] integerValue]) {
        self.index = 0;
        return;
    }
    for (NSInteger i = 0;i= indexValue) {
            self.index = i;
        }else{
            return;
        }
        
        
    }

确定了index之后我们再确定进度条的长度，如果进度值为0我们是不绘制进度条的，进度值等于最大值就是绘制满进度条，其他情况需要按比例计算进度条长度。

    if (self.index == self.growUpValueArray.count - 1) {
        
        self.processLayerWidth = _lineWidth;
    }else{
        
        CGFloat lastScale = (CGFloat)(self.currentGrowUpValue - [self.growUpValueArray[self.index] integerValue])/(CGFloat)([self.growUpValueArray[self.index+1] integerValue]- [self.growUpValueArray[self.index] integerValue]);
        self.processLayerWidth = (self.singleLineWidth + self.iconPlaceHolderPT)*self.index + self.singleLineWidth*lastScale+self.iconPlaceHolderPT/2 - (lastScale == 0? self.iconPlaceHolderPT/2:0);
    }

这里进度条的计算是最核心的部分，我的绘制原则是如果lastScale是0，就绘制到占位的图标中心位置结束，如果lastScale>0,要从占位图标的最右侧开始绘制，这就是我再上面说的，剔除掉占位图标的大小，不能算做计算进度比例的基数，也不能算作长度，之所以lastScale = 0，要绘制到占位图标中心，是因为占位图标多数有透明背景，只绘制到图标左侧有进度不满的既视感。

有了进度条的长度我们就很好计算平行四边形的个数了

    NSInteger singleCount = _processLayerWidth/self.singleSquareWidth;

大家都能明白这里是不能整除的，剩下的部分就是进度条末端的长度了，然后再加上个半圆就完成了

    [path moveToPoint:CGPointMake(_layerLeft+(singleCount-1)*self.singleSquareWidth + self.singleSquareOffset, +_layerTop)];
    [path addLineToPoint:CGPointMake(_layerLeft+_processLayerWidth, +_layerTop)];
    [path addArcWithCenter:CGPointMake(_layerLeft+_processLayerWidth, _singleSquareHeight/2+_layerTop) radius:_singleSquareHeight/2 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
    
    [path addLineToPoint:CGPointMake(_layerLeft+(singleCount-1)*self.singleSquareWidth, _singleSquareHeight+_layerTop)];

方案二：切整个红粉相间的进度条的图，然后黄色部分动态绘制剩下长度的layer
这种比较简单，就不用贴代码了。

这里是GitHub地址：https://github.com/SunshineTeemo/SSCustomProcessView/tree/master
请大家多指教！