最近整理以前寫(xiě)的一些小玩意,發(fā)現(xiàn)以前寫(xiě)的一個(gè)圓形進(jìn)度環(huán),覺(jué)得代碼寫(xiě)的還挺簡(jiǎn)潔的,在此分享給大家.
控件效果:

圓形進(jìn)度條

#import <UIKit/UIKit.h>

@class JWProgressView;

@protocol JWProgressViewDelegate <NSObject>

-(void)progressViewOver:(JWProgressView *)progressView;

@end

@interface JWProgressView : UIView

//進(jìn)度值0-1.0之間
@property (nonatomic,assign)CGFloat progressValue;


//內(nèi)部label文字
@property(nonatomic,strong)NSString *contentText;

//value等于1的時(shí)候的代理
@property(nonatomic,weak)id<JWProgressViewDelegate>delegate;

@end

#import "JWProgressView.h"
@interface JWProgressView ()
{
    CAShapeLayer *backGroundLayer;      //背景圖層
    CAShapeLayer *frontFillLayer;       //用來(lái)填充的圖層
    UIBezierPath *backGroundBezierPath; //背景貝賽爾曲線
    UIBezierPath *frontFillBezierPath;  //用來(lái)填充的貝賽爾曲線
    UILabel *_contentLabel;              //中間的label
}
@end


@implementation JWProgressView

@synthesize progressValue = _progressValue;
- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder]) {
        [self setUp];
    }
    return self;
}
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        [self setUp];
        
    }
    return self;
    
}

//初始化創(chuàng)建圖層
- (void)setUp
{
    //創(chuàng)建背景圖層
    backGroundLayer = [CAShapeLayer layer];
    backGroundLayer.fillColor = nil;

    //創(chuàng)建填充圖層
    frontFillLayer = [CAShapeLayer layer];
    frontFillLayer.fillColor = nil;

    //創(chuàng)建中間label
    _contentLabel = [[UILabel alloc]init];
    _contentLabel.textAlignment = NSTextAlignmentCenter;
    _contentLabel.text = @"120";
    _contentLabel.font = [UIFont systemFontOfSize:15];
    _contentLabel.backgroundColor = [UIColor clearColor];
    [self addSubview:_contentLabel];
    
    [self.layer addSublayer:backGroundLayer];
    [self.layer addSublayer:frontFillLayer];
    
    //設(shè)置顏色
    frontFillLayer.strokeColor = [UIColor colorWithRed:78/255.0 green:194/255.0 blue:0/255.0 alpha:1.0].CGColor;
    _contentLabel.textColor = [UIColor colorWithRed:78/255.0 green:194/255.0 blue:0/255.0 alpha:1.0];
    backGroundLayer.strokeColor = [UIColor colorWithRed:190/255.0 green:255/255.0 blue:167/255.0 alpha:1.0].CGColor;
  
}

#pragma mark -子控件約束
-(void)layoutSubviews {

    [super layoutSubviews];
    
    CGFloat width = self.bounds.size.width;
    _contentLabel.frame = CGRectMake(0, 0, width - 4, 20);
    _contentLabel.center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    backGroundLayer.frame = self.bounds;


    backGroundBezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(width/2.0f, width/2.0f) radius:(CGRectGetWidth(self.bounds)-2.0)/2.f startAngle:0 endAngle:M_PI*2
                                                       clockwise:YES];
    backGroundLayer.path = backGroundBezierPath.CGPath;
    
    
    frontFillLayer.frame = self.bounds;

    //設(shè)置線寬
    frontFillLayer.lineWidth = 2.0;
    backGroundLayer.lineWidth = 2.0;
}

#pragma mark - 設(shè)置label文字和進(jìn)度的方法
-(void)setContentText:(NSString *)contentText {

    if (_progressValue == 1) {
        
        return;
    }
    if (contentText) {
        
        _contentLabel.text = contentText;
    }
}

- (void)setProgressValue:(CGFloat)progressValue
{
    
     progressValue = MAX( MIN(progressValue, 1.0), 0.0);
     _progressValue = progressValue;
     if (progressValue == 1) {
        
        if ([self.delegate respondsToSelector:@selector(progressViewOver:)]) {
            
            [self.delegate progressViewOver:self];
        }
        return;
    }
    
    CGFloat width = self.bounds.size.width;
    
    frontFillBezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(width/2.0f, width/2.0f) radius:(CGRectGetWidth(self.bounds)-2.0)/2.f startAngle:-0.25*2*M_PI endAngle:(2*M_PI)*progressValue - 0.25*2*M_PI clockwise:YES];
    frontFillLayer.path = frontFillBezierPath.CGPath;
}
- (CGFloat)progressValue
{
    return _progressValue;
}

@end

因?yàn)樵陧?xiàng)目中只用到一次所以就只是做了一個(gè)格式化的控件,使用起來(lái)也非常的方便.

#import "ViewController.h"
#import "JWProgressView.h"
@interface ViewController ()<JWProgressViewDelegate>
{
    JWProgressView *progressView;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    progressView = [[JWProgressView alloc]initWithFrame:CGRectMake(100, 100, 87, 85)];
    progressView.delegate = self;

    [self.view addSubview:progressView];
    [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(changeProgressValue) userInfo:nil repeats:YES];
    
}

- (void)changeProgressValue
{
    progressView.progressValue = ((int)((progressView.progressValue * 100.0f) + 1.01) % 100) / 100.0f;;
    
    progressView.contentText=[NSString stringWithFormat:@"%f",progressView.progressValue];

}

-(void)progressViewOver:(JWProgressView *)progressView {

    NSLog(@"value為1");

}

對(duì)于這種簡(jiǎn)單并且不會(huì)在項(xiàng)目中用到很多次的控件,我的個(gè)人理解是不要在外面暴露太多的屬性,這樣會(huì)給代碼看起來(lái)很不整潔.要是讀者想要不同的顏色以及線寬,可以在控件內(nèi)部代碼中修改,屬性都有詳細(xì)的標(biāo)注.

希望這篇文章有對(duì)你實(shí)現(xiàn)圓形進(jìn)度條有所幫助.