cool hit counter ios circular progress bar_Intefrankly

ios circular progress bar


Today the product is getting a circular progress bar

1532512706923.jpg

There are a lot of open source progress bars do not use, have to get this effect, so do not spit it out, or think about how to achieve Without further ado, let's get right to the code.

#import <UIKit/UIKit.h>

@interface RoundProgressView : UIView

/** Progress bar color*/
@property (strong, nonatomic) UIColor *progressColor;
/**dash pattern*/
@property (strong, nonatomic) NSArray *lineDashPattern;
/** paceLabel font*/
@property (strong, nonatomic) UIFont  *progressFont;

- (void)updateProgress:(CGFloat)progress;

@end
#import "RoundProgressView.h"

#define kBorderWith 10
#define center CGPointMake(self.bounds.size.width / 2.0, self.bounds.size.height / 2.0)

@interface RoundProgressView()

@property (strong, nonatomic) CAShapeLayer *outLayer;
@property (strong, nonatomic) CAShapeLayer *progressLayer;
@property (strong, nonatomic) UILabel *progressLabel;

@end

@implementation RoundProgressView

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self drawProgress];
    }
    return self;
}

-(void)drawProgress{
    
    UIBezierPath *loopPath = [UIBezierPath bezierPathWithArcCenter:center radius:(self.bounds.size.width - kBorderWith)/ 2.0 startAngle:-M_PI_2 endAngle:M_PI * 3.0 / 2.0 clockwise:YES];
    
    //  outer ring
    self.outLayer = [CAShapeLayer layer];
    self.outLayer.strokeColor = [UIColor lightGrayColor].CGColor;
    self.outLayer.lineWidth = kBorderWith;
    self.outLayer.fillColor =  [UIColor clearColor].CGColor;
    self.outLayer.path = loopPath.CGPath;
    [self.layer addSublayer:self.outLayer];
    
    //  progress bar
    self.progressLayer = [CAShapeLayer layer];
    self.progressLayer.fillColor = [UIColor clearColor].CGColor;
    self.progressLayer.strokeColor = [UIColor blackColor].CGColor;
    self.progressLayer.lineWidth = kBorderWith;
    self.progressLayer.strokeStart = 0;
    self.progressLayer.strokeEnd = 0;
    self.progressLayer.path = loopPath.CGPath;
    [self.layer addSublayer:self.progressLayer];
    
    //  paceLabel
    self.progressLabel = [UILabel new];
    self.progressLabel.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    self.progressLabel.font = [UIFont systemFontOfSize:40];
    self.progressLabel.textAlignment = NSTextAlignmentCenter;
    [self addSubview:self.progressLabel];
}

- (void)updateProgress:(CGFloat)progress {
    [CATransaction begin];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
    [CATransaction setAnimationDuration:0.5];
    self.progressLayer.strokeEnd =  progress / 100.0;
    [CATransaction commit];
    
    self.progressLabel.text = [NSString stringWithFormat:@"%.0f",progress];
}

- (void)setLineDashPattern:(NSArray *)lineDashPattern
{
    _lineDashPattern = lineDashPattern;
    self.outLayer.lineDashPattern = lineDashPattern;
    self.progressLayer.lineDashPattern = lineDashPattern;
}

- (void)setProgressColor:(UIColor *)progressColor
{
    self.progressLayer.strokeColor = progressColor.CGColor;
    self.progressLabel.textColor = progressColor;
}

- (void)setProgressFont:(UIFont *)progressFont
{
    self.progressLabel.font = progressFont;
}

invoke

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    self.progressView =[[RoundProgressView alloc]initWithFrame:CGRectMake((ScreenWidth - 200)/2, 100, 200, 200)];
    self.progressView.backgroundColor = [UIColor yellowColor];
    [self.progressView setProgressColor:[UIColor blueColor]];
    self.progressView.lineDashPattern = @[@(8),@(5)];
    self.progressView.progressFont = [UIFont systemFontOfSize:70];
    [self.view addSubview:self.progressView];

}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    [self.progressView updateProgress:25];
}

Demo address.https://github.com/destinyzhao/DrawRound.git


Recommended>>
1、Sword to Offer Code Explanation Interview Question 23 Print a binary tree from top to bottom
2、What knowledge do you have to learn to transition to big data
3、53 Inputoutput IO management
4、Data Mining Answering the doubts in the minds of data mining beginners
5、JVM Memory Model and Performance Optimization for JVM Finetuning Medium

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号