使用CAShapeLayer與UIBezierPath實(shí)現(xiàn)簡單的進(jìn)度顯示:效果圖如下

app.gif

具體步驟如下:
1.新建一個繼承自UIView的GKProgressView

2.在初始化方法中,新建CAShapelayer類型的路徑圖層trackLayer和進(jìn)度圖層progressLayer

3.將trackLayer和progressLayer添加到主圖層中

4.給外界提供一個progress進(jìn)度屬性,重寫該屬性的set方法完成進(jìn)度顯示

5.具體代碼如下

GKProgressView聲明文件

#import <UIKit/UIKit.h>

@interface GKProgressView : UIView
/** 路徑顏色 */
@property (nonatomic, strong) UIColor *trackColor;
/** 進(jìn)度顏色 */
@property (nonatomic, strong) UIColor *progressColor;
/** 進(jìn)度 */
@property (nonatomic,assign) CGFloat progress;//0~1之間的數(shù)
/** 進(jìn)度邊框?qū)挾?*/
@property (nonatomic,assign) CGFloat progressWidth;
@end

GKProgressView實(shí)現(xiàn)文件

#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;
/** 顯示進(jìn)度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還是純代碼加載都會執(zhí)行該方法
 */
- (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;
    
    //默認(rèn)5
    self.progressWidth = 5;

}

#pragma mark -
#pragma mark - 路徑設(shè)置
- (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

項(xiàng)目demo地址:https://github.com/ChrisCaixx/GKProgressView.git