使用CAShapeLayer与UIBezierPath实现简单的

使用CAShapeLayer与UIBezierPath实现简单的进度显示:效果图如下

app.gif

具体步骤如下:
1.新建一个继承自UIView的GKProgressView

2.在初始化方法中,新建CAShapelayer类型的路径图层trackLayer和进度图层progressLayer

3.将trackLayer和progressLayer添加到主图层中

4.给外界提供一个progress进度属性,重写该属性的set方法完成进度显示

5.具体代码如下

GKProgressView声明文件

#import <UIKit/UIKit.h>

@interface GKProgressView : UIView
/** 路径颜色 */
@property (nonatomic, strong) UIColor *trackColor;
/** 进度颜色 */
@property (nonatomic, strong) UIColor *progressColor;
/** 进度 */
@property (nonatomic,assign) CGFloat progress;//0~1之间的数
/** 进度边框宽度 */
@property (nonatomic,assign) CGFloat progressWidth;
@end

GKProgressView实现文件

#import "GKProgressView.h"
#import <QuartzCore/QuartzCore.h>
#define GKProgressCenter CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5)
@interface GKProgressView ()
@property(nonatomic, weak) CAShapeLayer *trackLayer;
@property(nonatomic, weak) CAShapeLayer *progressLayer;
@property(nonatomic, strong) UIBezierPath *trackPath;
@property(nonatomic, strong) UIBezierPath *progressPath;
/** 显示进度label */
@property(nonatomic, weak) UILabel *progressLabel;

@end
@implementation GKProgressView
#pragma mark -
#pragma mark - 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)awakeFromNib
{
    [self setup];
}
/**
 *  不论从XIB还是纯代码加载都会执行该方法
 */
- (void)setup
{
    CAShapeLayer *trackLayer = [[CAShapeLayer alloc]init];
    [self.layer addSublayer:trackLayer];
    trackLayer.fillColor = nil;
    trackLayer.frame = self.bounds;
    _trackLayer = trackLayer;
    
    CAShapeLayer *progressLayer = [[CAShapeLayer alloc]init];;
    [self.layer addSublayer:progressLayer];
    progressLayer.fillColor = nil;
    progressLayer.lineCap = kCALineCapRound;
    progressLayer.frame = self.bounds;
    _progressLayer = progressLayer;
    
    //默认5
    self.progressWidth = 5;

}

#pragma mark -
#pragma mark - 路径设置
- (void)setTrack
{
    
    _trackPath = [UIBezierPath bezierPathWithArcCenter:GKProgressCenter radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;
    _trackLayer.path = _trackPath.CGPath;
}

- (void)setProgress
{
    _progressPath = [UIBezierPath bezierPathWithArcCenter:GKProgressCenter radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * _progress - M_PI_2 clockwise:YES];
    _progressLayer.path = _progressPath.CGPath;
}

#pragma mark -
#pragma mark - 边框尺寸
- (void)setProgressWidth:(CGFloat)progressWidth
{
    _progressWidth = progressWidth;
    _trackLayer.lineWidth = _progressWidth;
    _progressLayer.lineWidth = _progressWidth;
    
    [self setTrack];
    [self setProgress];
}

#pragma mark -
#pragma mark - set
- (void)setTrackColor:(UIColor *)trackColor
{
    _trackLayer.strokeColor = trackColor.CGColor;
}

- (void)setProgressColor:(UIColor *)progressColor
{
    _progressLayer.strokeColor = progressColor.CGColor;
}

- (void)setProgress:(CGFloat)progress
{
    _progress = progress;
    self.progressLabel.hidden = progress == 0;
    self.progressLabel.text = [NSString stringWithFormat:@"%.1f%%",progress * 100];
    [self setProgress];
}

#pragma mark -
#pragma mark - 懒加载
- (UILabel *)progressLabel
{
    if (!_progressLabel) {
        UILabel *progressLabel = [[UILabel alloc]init];
        [self addSubview:progressLabel];
        progressLabel.textColor = [UIColor blackColor];
        progressLabel.font = [UIFont systemFontOfSize:10];
        progressLabel.textAlignment = NSTextAlignmentCenter;
        _progressLabel = progressLabel;
        
    }
    return _progressLabel;
}

/**
 *  布局子控件
 */
- (void)layoutSubviews {
    [super layoutSubviews];
    CGFloat labelW = self.bounds.size.width * 0.6;
    CGFloat labelH = self.bounds.size.height * 0.5;
    CGFloat labelX = (self.bounds.size.width - labelW) * 0.5;
    CGFloat labelY = (self.bounds.size.height - labelH) * 0.5;
    _progressLabel.frame = CGRectMake(labelX, labelY, labelW, labelH);
}

@end

项目demo地址:https://github.com/ChrisCaixx/GKProgressView.git