美文网首页iOS相关
ios 圆形进度条

ios 圆形进度条

作者: 赵哥窟 | 来源:发表于2018-07-26 11:29 被阅读477次

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


1532512706923.jpg

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

#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
#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;
}

调用

- (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

相关文章

  • iOS 各种圆形进度条

    iOS 各种圆形进度条:UAProgressView iOS手把手教你实现圆形进度条

  • 实现tableViewCell高度自适应(内嵌UITextVei

    iOS进度条圆形 水平 竖直带动画

  • 自定义圆形进度条ProgressView

    进度条在iOS开发中很常见的,我在项目开发中也写过好多进度条,有好多种类的,条形,圆形等,今天给大家总结一种圆形的...

  • 自定义圆形进度条ProgressView

    进度条在iOS开发中很常见的,我在项目开发中也写过好多进度条,有好多种类的,条形,圆形等,今天给大家总结一种圆形的...

  • Android自定义圆形进度条学习

    Android中圆形进度条的应用还是挺多的,最近学习实现了圆形进度条。 思路 要实现圆形进度条, 首先要画灰色背景...

  • ios 圆形进度条

    今天产品要弄一个圆形的进度条 有很多开源的进度条不用,非要弄这种效果,就不吐槽了,还是想想怎么实现废话就不多说了 ...

  • iOS 圆形进度条

    版权声明本文由陈怀哲首发自简书:http://www.jianshu.com/users/9f2e536b78fd...

  • iOS圆形进度条

    最近在做一个类似于滴滴打车派单的功能,需要做一个圆形进度条。效果如下图: 这么调用的: 效果图是这样的:

  • Android圆形进度条自定义

    自定义圆形进度条 实现 圆形进度条api 使用 将MyCircleProgressView和attrs.xml下的...

  • iOS快速实现环形渐变进度条

    前言 进度条相信我们大家都不陌生,往往我们很多时候需要使用到圆形进度条。这篇文章给大家分享了利用ios如何快速实现...

网友评论

  • 小猪也浪漫:哈哈,牛逼的产品经理
  • Felix的笔头:请问为什么
    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];
    出来的圆是不连续的?不应该是不间隔连续的嘛?
    Felix的笔头:@赵哥窟 好的 ,感谢:+1:
    赵哥窟:是因为设置了lineDashPattern 才让圆变得不连续

本文标题:ios 圆形进度条

本文链接:https://www.haomeiwen.com/subject/hvavmftx.html