今天產品要弄乙個圓形的進度條
有很多開源的進度條不用，非要弄這種效果，就不吐槽了，還是想想怎麼實現
廢話就不多說了 直接上**
#import
@inte***ce 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)
@inte***ce 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];
[self.progressview updateprogress:25];
ios弧形進度條 iOS 圓形進度條
釋放雙眼，帶上耳機，聽聽看 今天產品要弄乙個圓形的進度條 有很多開源的進度條不用，非要弄這種效果，就不吐槽了，還是想想怎麼實現 廢話就不多說了 直接上 import inte ce roundprogressview uiview 進度條顏色 property strong,nonatomic ui...
IOS 圓形進度條
demo created by leao on 2017 8 7.import typedef ns enum nsinteger,ccprogressviewstyle inte ce ccprogressview uiview property nonatomic,assign,setter s...
使用canvas畫圓形（弧形）進度條
效果如下 可以展示整個圓 半圓以及任意角度弧形 左右對稱 的進度條。整體思路如下 完整 如下 關於動畫部分，可以使用requestanimationframe做優化，函式改寫如下 function draw percent,sr if sr math.pi 2 sr 3 2 math.pi var ...