用Quartz 2D的簡單使用

.h 中

typedef enum
{
    START = 0, //開始
    PAUSE      //暫停
}ViewStatus;

#import <UIKit/UIKit.h>

@interface CircleView : UIView

/**
 *  進度
 */
@property (nonatomic, strong)NSString *progress;

@property (nonatomic, assign)CGFloat pi;
/**
 *  按鈕狀態
 */
@property (nonatomic, assign)ViewStatus status;


@end

.m 中

/**
 *  根據語音進度，畫弧度
 *
 *  @param progress 語音進度
 */
- (void)setProgress:(NSString *)progress
{
    CGFloat pi = [progress floatValue] / 100 * 3.141593;
    self.pi = pi;
    if (self.pi >= 3.14) {
            self.pi = 0.0;
        self.status = PAUSE;
        [self setNeedsDisplay];
    }else
    {
        [self setNeedsDisplay];
    }
    
}

/**
 *  畫按鈕
 */
- (void)drawRect:(CGRect)rect {
    if (self.status == START) {
        [self pauseButton];
        //灰色的圓
        CGFloat pi = self.pi;
        CGFloat colorGray = 102 / 255.0;
        circle(pi,YES,colorGray);
        
        drawBlueColor(pi, NO);
    }else
    {
        //灰色的圓
        CGFloat pi = self.pi;
        CGFloat colorGray = 102 / 255.0;
        circle(pi,YES,colorGray);
        [self beginButton];
        
    }
}

/**
 *  開始播放按鈕
 */
- (void)beginButton
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextMoveToPoint(ctx, 11.5, 8.5);
    CGContextAddLineToPoint(ctx, 11.5, 18.5);
    CGContextAddLineToPoint(ctx, 16.5, 13.5);
    CGContextClosePath(ctx);
    CGContextFillPath(ctx);//這個是畫實心的
//    CGContextStrokePath(<#CGContextRef  _Nullable c#>);這個是畫空心的
}

/**
 *  暫停按鈕
 */
- (void)pauseButton
{
    drawLine(11.5, 18.5);
    drawLine(17.5, 18.5);
}

/**
 *  畫一條線
 *
 *  @param x      線的x值
 *  @param length 線的長度
 */
void drawLine(int x, int length)
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextMoveToPoint(ctx, x, 8.5);
    CGContextAddLineToPoint(ctx, x, length);
    CGContextSetLineWidth(ctx, 2);
    CGContextStrokePath(ctx);
    
}

/**
 *  進度條
 *
 *  @param pi 圓的弧度
 *  @param b  
 */
void drawBlueColor(float pi,bool b)
{
    //0.得到當前圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //1.建立一個繪圖路徑
    CGMutablePathRef path = CGPathCreateMutable();
    
    //2.把繪圖信息添加到路徑中去
    CGContextSetRGBStrokeColor(ctx, 32 / 225, 192 / 255.0, 218 / 255.0, 1);
    
    CGContextSetLineWidth(ctx, 2);
    
    CGPathAddArc(path, NULL, 14, 14, 12.5 , 0, 2 * pi, b);
    
    //3.把路徑添加到上下文中
    CGContextAddPath(ctx, path);
    
    //4.渲染
    CGContextStrokePath(ctx);
    
    //5.釋放路徑
    CGPathRelease(path);
}

/**
 *  畫一個圓
 *
 *  @param
 */
void circle(float pi, bool b, float color)
{
    //0.得到當前圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //1.建立一個繪圖路徑
    CGMutablePathRef path = CGPathCreateMutable();
    
    //2.把繪圖信息添加到路徑中去
    CGContextSetRGBStrokeColor(ctx, color, color, color, 1);
    
    CGContextSetLineWidth(ctx, 2);
//    NSLog(@"%f",pi);
    
    CGPathAddArc(path, NULL, 14, 14, 12.5 ,12.5, 2 * pi, b);
    
    //3.把路徑添加到上下文中
    CGContextAddPath(ctx, path);
    
    //4.渲染
    CGContextStrokePath(ctx);
    
    //5.釋放路徑
    CGPathRelease(path);
    
}

調用

#import "CircleButton.h"

@interface ViewController ()
- (IBAction)buttonClick:(id)sender;
/**
 *  自定義的button
 */
@property (weak, nonatomic) IBOutlet CircleButton *circleButton;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //設定button的初始狀態
    self.circleButton.status = PAUSE;
    
}

- (void)progress
{
    float progress ;
    self.circleButton.progress = [NSString stringWithFormat:@"%f",progress];
    if (progress < 1) {
        progress += 0.01;
        [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(progress) userInfo:nil repeats:NO];
    }
}

//點擊切換狀態，重繪按鈕
- (IBAction)buttonClick:(id)sender {
    
    if (self.circleButton.status == PAUSE) {
        [self.circleButton setNeedsDisplay];
        [self progress];
        self.circleButton.status = START;
    }else{
        [self.circleButton setNeedsDisplay];
        self.circleButton.status = PAUSE;
    }
}

如果想，在暫停的時候顯示進度，只須要把progress 傳給view重繪便可