前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ios 圆形进度条

ios 圆形进度条

作者头像
赵哥窟
发布2018-09-13 11:49:29
1.3K0
发布2018-09-13 11:49:29
举报
文章被收录于专栏:日常技术分享日常技术分享

今天产品要弄一个圆形的进度条

1532512706923.jpg

有很多开源的进度条不用,非要弄这种效果,就不吐槽了,还是想想怎么实现 废话就不多说了 直接上代码

代码语言:javascript
复制
#import <UIKit/UIKit.h>

@interface RoundProgressView : UIView

/**进度条颜色*/
@property (strong, nonatomic) UIColor *progressColor;
/**dash pattern*/
@property (strong, nonatomic) NSArray *lineDashPattern;
/**进度Label字体*/
@property (strong, nonatomic) UIFont  *progressFont;

- (void)updateProgress:(CGFloat)progress;

@end
代码语言:javascript
复制
#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];
    
    // 外圈
    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];
    
    // 进度条
    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];
    
    // 进度Label
    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;
}

调用

代码语言:javascript
复制
- (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地址:https://github.com/destinyzhao/DrawRound.git

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.07.26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档