圆形进度条的绘制与使用

demo地址:https://github.com/nijino/CircularProgressView

项目中总会遇到一些非原生类的UI效果。最近我就遇到了一个音频播放圆形进度条的需求 。

在网上找了一下，感觉写的都比较复杂。本来需求就不是很复杂，干吗要整复杂呢？于是我参考类似的第三方库代码自己写了一个，并把它封装，放到了github（地址）上。

封装后在要生成进度条时设定圆形进度条的大小、背景色、前景色和音频来源就行了。

    //alloc CircularProgressView instance

    self.circularProgressView = [[CircularProgressView alloc] initWithFrame:CGRectMake(41, 57, 238, 238)

                                                                  backColor:backColor

                                                              progressColor:progressColor

                                                                  lineWidth:30

                                                                  audioPath:audioPath];

    

    //set CircularProgressView delegate

    self.circularProgressView.delegate = self;

    

    //add CircularProgressView

    [self.view addSubview:self.circularProgressView];

圆形进度条里有播放、暂停、恢复的方法，需要的时候可以直接调用。

 

其实，圆形进度条的核心代码就在该类中drawRect方法中，主要用UIBezierPath绘制圆弧，根据音频播放进度以0.1秒的间隔更新进度条。

    UIBezierPath *backCircle = [UIBezierPat bezierPathWithArcCenter:CGPointMake(self.bounds.size.width / 2,self.bounds.size.height / 2)

                              radius:self.bounds.size.width / 2 - self.lineWidth / 2

                          startAngle:(CGFloat) - M_PI_2

                            endAngle:(CGFloat)(1.5 * M_PI)

                           clockwise:YES];