使用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
