一般成长值类型的进度条都是纯色的，比如这样的：
纯色的进度条无论用layer还是view，只要计算好比例就是很好做的。
我们的需求是自定义的进度条是这样的：
从图中可以看出我们的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<self.growUpValueArray.count ; i++) {
NSInteger indexValue = [self.growUpValueArray[i] integerValue];
if (self.currentGrowUpValue >= 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
请大家多指教！
