iOS帶動畫的環形進度條，ios環形進度條

iOS帶動畫的環形進度條，ios環形進度條

本篇寫的是實現環形進度條，並帶動畫效果，要實現這些，僅能通過自己畫一個

方法直接看代碼

為了方便多次調用，用繼承UIView的方式

.m檔案

1 #import <UIKit/UIKit.h>2 3 @interface LoopProgressView : UIView4 5 @property (nonatomic, assign) CGFloat progress;6 7 8 @end

 

.h檔案

NSTimer的調用並非精確，可以自行百度

  1 #import "LoopProgressView.h"  2 #import <QuartzCore/QuartzCore.h>  3   4 #define ViewWidth self.frame.size.width   //環形進度條的視圖寬度  5 #define ProgressWidth 2.5                 //環形進度條的圓環寬度  6 #define Radius ViewWidth/2-ProgressWidth  //環形進度條的半徑  7   8 @interface LoopProgressView()  9 { 10     CAShapeLayer *arcLayer; 11     UILabel *label; 12     NSTimer *progressTimer; 13 } 14 @property (nonatomic,assign)CGFloat i; 15 @end 16  17 @implementation LoopProgressView 18  19 -(id)initWithFrame:(CGRect)frame 20 { 21     self = [super initWithFrame:frame]; 22     if (self) { 23         self.backgroundColor = [UIColor clearColor]; 24     } 25     return self; 26 } 27  28 -(void)drawRect:(CGRect)rect 29 { 30     _i=0; 31     CGContextRef progressContext = UIGraphicsGetCurrentContext(); 32     CGContextSetLineWidth(progressContext, ProgressWidth); 33     CGContextSetRGBStrokeColor(progressContext, 209.0/255.0, 209.0/255.0, 209.0/255.0, 1); 34      35     CGFloat xCenter = rect.size.width * 0.5; 36     CGFloat yCenter = rect.size.height * 0.5; 37  38     //繪製環形進度條底框 39     CGContextAddArc(progressContext, xCenter, yCenter, Radius, 0, 2*M_PI, 0); 40     CGContextDrawPath(progressContext, kCGPathStroke); 41      42 //    //繪製環形進度環 43     CGFloat to = self.progress * M_PI * 2; // - M_PI * 0.5為改變初始位置,此處可修改進度條的初始啟動位置 44      45     // 進度數字字型大小,可自己根據自己需要，從視圖大小去適配字型字型大小，這裡就不做了 46     int fontNum = 15; 47      48     label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, Radius+10, 20)]; 49     label.center = CGPointMake(xCenter, yCenter); 50     label.textAlignment = NSTextAlignmentCenter; 51     label.font = [UIFont boldSystemFontOfSize:fontNum]; 52     label.text = @"0%"; 53     [self addSubview:label]; 54      55     UIBezierPath *path=[UIBezierPath bezierPath]; 56     [path addArcWithCenter:CGPointMake(xCenter,yCenter) radius:Radius startAngle:0 endAngle:to clockwise:YES]; 57     arcLayer=[CAShapeLayer layer]; 58     arcLayer.path=path.CGPath;//46,169,230 59     arcLayer.fillColor = [UIColor clearColor].CGColor; 60     arcLayer.strokeColor=[UIColor colorWithRed:227.0/255.0 green:91.0/255.0 blue:90.0/255.0 alpha:0.7].CGColor; 61     arcLayer.lineWidth=ProgressWidth; 62     arcLayer.backgroundColor = [UIColor blueColor].CGColor; 63     [self.layer addSublayer:arcLayer]; 64      65      66     dispatch_async(dispatch_get_global_queue(0, 0), ^{ 67         [self drawLineAnimation:arcLayer]; 68     }); 69      70     if (self.progress>0) { 71         progressTimer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(timeLabel) userInfo:nil repeats:YES]; 72     } 73      74 } 75  76 //NSTimer不會精準調用 77 -(void)timeLabel 78 { 79     _i += 0.01; 80     label.text = [NSString stringWithFormat:@"%.0f%%",_i*100]; 81  82     if (_i>=self.progress) { 83         [progressTimer invalidate]; 84         progressTimer = nil; 85          86     } 87      88 } 89  90 //定義動畫過程 91 -(void)drawLineAnimation:(CALayer*)layer 92 { 93     CABasicAnimation *bas=[CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 94     bas.duration=1; 95     bas.delegate=self; 96     bas.fromValue=[NSNumber numberWithInteger:0]; 97     bas.toValue=[NSNumber numberWithInteger:1]; 98     [layer addAnimation:bas forKey:@"key"]; 99 }100 101 @end

 

 

完成後在要調用的控制器裡，僅需幾段代碼：傳進的參數：為0-1

1     LoopProgressView *custom = [[LoopProgressView alloc]initWithFrame:CGRectMake(50, 100, 100, 100)];2     custom.progress = 0.44;3     [self.view addSubview:custom];

 

實現後：

這裡沒有對數字和進度條做同步處理，有興趣的可以嘗試下：