一、为啥要自定义进度条？
系统的不好用、系统的不好用、系统的不好用，说了三遍心里爽多了。具体怎么不好用？无法设置高度...，要想设置高度只能放大、缩小（what？Are you kinding me ？）
二、啥样式：圆形？、线性？
回答：当然都可以。
三、思路
绘制CAShapeLayer设置strokeEnd的属性值。
四、简单粗暴代码：
https://github.com/dszhangyu/processView
（1）直线进度条：
#import
@interfaceSABUpgradeProcessView :UIView
@property (strong , nonatomic)UIColor * defaultColor;//背景颜色（默认值RGBA(216, 216, 216, 1)）
@property (strong , nonatomic)UIColor * fillColor;//进度颜色（默认值RGBA(33, 178, 123, 1)）
@property(assign , nonatomic)float processValue;//进度值
@end
#import "SABUpgradeProcessView.h"
@implementationSABUpgradeProcessView{
CAShapeLayer* _layer;
}
- (instancetype)init
{
self = [super init];
if(self) {
[self setupView];
}
return self;
}
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setupView];
}
return self;
}
-(void)awakeFromNib{
[super awakeFromNib];
[self setupView];
}
-(void)setupView{
CGFloat width =self.bounds.size.width;
CGFloat height = self.bounds.size.height;
UIBezierPath * bezierPath = [[UIBezierPath alloc]init];
[bezierPathmoveToPoint:CGPointMake(0, height/2)];
[bezierPathaddLineToPoint:CGPointMake(width, height/2)];
_layer = [CAShapeLayer layer];
_layer.path= bezierPath.CGPath;
_layer.fillColor = [UIColor clearColor].CGColor;
_layer.strokeEnd = 0;
_layer.strokeColor = RGBA(33, 178, 123, 1).CGColor;
_layer.lineWidth = height;//线宽
_layer.lineCap = @"round";//圆角
[self.layer addSublayer:_layer];
self.layer.cornerRadius= (height *KProportionHeight)/2;
self.clipsToBounds = YES;
self.backgroundColor = RGBA(216, 216, 216, 1);
}
-(void)setProcessValue:(float)processValue{
_processValue= processValue;
_layer.strokeEnd= processValue;
}
-(void)setFillColor:(UIColor*)fillColor{
_fillColor= fillColor;
_layer.strokeColor = _fillColor.CGColor;
}
-(void)setDefaultColor:(UIColor*)defaultColor{
_defaultColor= defaultColor;
self.backgroundColor= defaultColor;
}
@end
（2）圆形进度条（带有渐变色可以自己调节）
使用的时候只需设置ovalShapeLayer.strokeEnd的值0~1
@interfaceSABCircleProcessView :UIView
/** 圆CAShapeLayer */
@property(nonatomic,strong)CAShapeLayer *ovalShapeLayer;
@end
#import "SABCircleProcessView.h"
@interface SABCircleProcessView ()
@end
@implementationSABCircleProcessView
- (instancetype)init
{
self = [super init];
if(self) {
[self setupView];
}
return self;
}
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setupView];
}
return self;
}
-(void)awakeFromNib{
[super awakeFromNib];
[self setupView];
}
- (void)setupView{
CGFloat selfW = self.bounds.size.width;
///虚线圆View=============
self.layer.cornerRadius = selfW/2;
self.layer.masksToBounds = YES;
self.backgroundColor = [UIColor clearColor];
self.transform = CGAffineTransformMakeRotation(-M_PI_2);
CGFloatlineWidth =22.0;
CGFloatleft =2;
CGFloatwidth = selfW-left*2;
// 第一层浅白色的虚线圆
CAShapeLayer *ovalLayer = [CAShapeLayer layer];
ovalLayer.strokeColor = [UIColor colorWithRed:0.64 green:0.71 blue:0.87 alpha:0.2].CGColor;
ovalLayer.fillColor = [UIColor clearColor].CGColor;
ovalLayer.lineWidth= lineWidth;
//线的宽度 每条线的间距
ovalLayer.lineDashPattern =@[@2,@6];
ovalLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(left,left,width,width)].CGPath;
[self.layer addSublayer:ovalLayer];
// 第二层黄色的虚线圆 电量多少的
self.ovalShapeLayer = [CAShapeLayer layer];
self.ovalShapeLayer.strokeColor = [UIColor yellowColor].CGColor;
self.ovalShapeLayer.fillColor = [UIColor clearColor].CGColor;
self.ovalShapeLayer.lineWidth = lineWidth;
self.ovalShapeLayer.lineDashPattern =@[@2,@6];
self.ovalShapeLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(left,left,width,width)].CGPath;
self.ovalShapeLayer.strokeEnd = 0;
[self.layer addSublayer:self.ovalShapeLayer];
//设置渐变颜色
UIColor*endcolor = [UIColorredColor];
UIColor *startcolor = [UIColor greenColor];
CAGradientLayer*gradientLayer = [CAGradientLayer layer];
gradientLayer.frame=self.bounds;
[gradientLayersetColors:[NSArrayarrayWithObjects:(id)[startcolorCGColor],(id)[endcolorCGColor],nil]];
gradientLayer.startPoint=CGPointMake(0,0);
gradientLayer.endPoint=CGPointMake(0,1);
[gradientLayersetMask:self.ovalShapeLayer]; //用progressLayer来截取渐变层
[self.layeraddSublayer:gradientLayer];
}
@end
