因為年前看到了關(guān)于CAShapeLayer方面的東西，所以想用它來實現(xiàn)在工作當(dāng)中比較容易出現(xiàn)的進(jìn)度條。之前一直從事的是關(guān)于理財?shù)腶pp，而在這類產(chǎn)品當(dāng)中就很容易出現(xiàn)進(jìn)度條來展示項目進(jìn)度，顯然的，系統(tǒng)自帶的進(jìn)度條并不能滿足我們的需求。。。

屏幕快照 2016-03-17 下午12.30.57.png

完成后的效果如下圖所示：（PS：還存在有繼續(xù)封裝的空間）

主頁

環(huán)形進(jìn)度條

環(huán)形進(jìn)度條+文字

弧形進(jìn)度條

弧形進(jìn)度條+文字

主要技術(shù)點

1.這里主要使用了貝塞爾曲線和CAShapeLayer的綜合使用
2.確定曲線的端點樣式
3.確定進(jìn)度的起始點方向

以第二個環(huán)形并且?guī)в形淖置枋龅臑槔?/h2>

CircleWithTextProgressView.h 文件

#import <UIKit/UIKit.h>

@interface CircleWithTextProgressView : UIView

@property (nonatomic,assign) CGFloat percent;

@property (nonatomic,assign) CGFloat  lineWidth;

@property (strong, nonatomic) NSTimer *timer;
@end

.m文件

//
//  CircleWithTextProgressView.m
//  SHProgressView
//
//  Created by zxy on 16/3/16.
//  Copyright ? 2016年 Chenshaohua. All rights reserved.
//

#import "CircleWithTextProgressView.h"
@interface CircleWithTextProgressView()
{
    CAShapeLayer *_bottomShapeLayer;
    CAShapeLayer *_upperShapeLayer;
    CGFloat _percent;
    UILabel *_percentLabel;
}
@end
@implementation CircleWithTextProgressView

- (instancetype)initWithFrame:(CGRect)frame
{
    if ((self = [super initWithFrame:frame])) {
        [self drawBottomLayer];
        [self drawUpperLayer];
        [self.layer addSublayer:_bottomShapeLayer ];
        
        [_bottomShapeLayer addSublayer:_upperShapeLayer];
        
        // 文本框
        [self drawTextLabel];
        [self addSubview:_percentLabel];
    }
    return self;
}

- (UILabel *)drawTextLabel
{
    _percentLabel               = [[UILabel alloc] init];
    CGFloat centerX             = (CGRectGetMaxX(self.frame) - CGRectGetMinX(self.frame)) / 2;
    CGFloat centerY             = (CGRectGetMaxY(self.frame) - CGRectGetMinY(self.frame)) / 2;
    CGFloat width               = self.frame.size.width / 2;
    CGFloat height              = self.frame.size.height / 2;
    _percentLabel.center        = CGPointMake(centerX, centerY);
    _percentLabel.bounds        = CGRectMake(0, 0, width, height);

    _percentLabel.font          = [UIFont boldSystemFontOfSize:40];
    _percentLabel.textAlignment = NSTextAlignmentCenter;
    _percentLabel.textColor     = [UIColor redColor];
    
    if (!_timer) {
        _timer = [NSTimer scheduledTimerWithTimeInterval:.1 target:self selector:@selector(percentChange) userInfo:nil repeats:YES];
    }
    return _percentLabel;
}

- (void)percentChange
{
    _percentLabel.text = [NSString stringWithFormat:@"%.0f%%",_percent * 100];
}


- (CAShapeLayer *)drawBottomLayer
{
    _bottomShapeLayer                 = [[CAShapeLayer alloc] init];
    _bottomShapeLayer.frame           = self.bounds;
    CGFloat width                     = self.bounds.size.width;
    
    UIBezierPath *path                = [UIBezierPath bezierPathWithArcCenter:CGPointMake((CGRectGetMaxX(self.frame) - CGRectGetMinX(self.frame)) / 2, (CGRectGetMaxY(self.frame) - CGRectGetMinY(self.frame)) / 2)  radius:width / 2 startAngle:0 endAngle:6.28 clockwise:YES];
    _bottomShapeLayer.path            = path.CGPath;
    
    //    _bottomShapeLayer.lineCap = kCALineCapButt;
    //    _bottomShapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:5],[NSNumber numberWithInt:5], nil];
    
    _bottomShapeLayer.lineCap     = kCALineCapSquare;

    _bottomShapeLayer.lineWidth   = 15;
    _bottomShapeLayer.strokeColor = [UIColor blackColor].CGColor;
    _bottomShapeLayer.fillColor   = [UIColor clearColor].CGColor;
    return _bottomShapeLayer;
}


- (CAShapeLayer *)drawUpperLayer
{
    _upperShapeLayer       = [[CAShapeLayer alloc] init];
    _upperShapeLayer.frame = self.bounds;
    CGFloat width          = self.bounds.size.width;
    
    UIBezierPath *path                = [UIBezierPath bezierPathWithArcCenter:CGPointMake((CGRectGetMaxX(self.frame) - CGRectGetMinX(self.frame)) / 2, (CGRectGetMaxY(self.frame) - CGRectGetMinY(self.frame)) / 2)
                                                                       radius:width/ 2
                                                                   startAngle:-1.57
                                                                     endAngle:4.71
                                                                    clockwise:YES];
    _upperShapeLayer.path        = path.CGPath;
    _upperShapeLayer.strokeStart = 0;
    _upperShapeLayer.strokeEnd   = 0;
    [self performSelector:@selector(shapeChange) withObject:nil afterDelay:0.3];
    _upperShapeLayer.lineWidth   = 15;
    
    //    _upperShapeLayer.lineCap = kCALineCapButt;
    //    _upperShapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:5],[NSNumber numberWithInt:5], nil];
    
    _upperShapeLayer.lineCap     = kCALineCapRound;

    _upperShapeLayer.strokeColor = [UIColor redColor].CGColor;
    _upperShapeLayer.fillColor   = [UIColor clearColor].CGColor;
    return _upperShapeLayer;
}

@synthesize percent = _percent;
- (CGFloat )percent
{
    return _percent;
}
- (void)setPercent:(CGFloat)percent
{
    _percent = percent;

    if (percent > 1) {
    percent  = 1;
    }else if (percent < 0){
    percent  = 0;
    }
    
}

- (void)shapeChange
{
    _upperShapeLayer.strokeEnd = _percent;
}

@end

項目github地址

希望大家多多指教交流：468080538