工程描述圖:

屏幕快照 2016-07-08 下午8.58.54.png

角度描述圖:

2D24F07C-8335-4419-AF17-F9C92003F78F.png

工程結構:

1. ViewController中創建一個自定義視圖UIView, 和一個UISlider控件, 實現拖動slider控制進度.
2. 自定義UIView : 一個UILabel來顯示進度 + 繪制弧度 根據slider的值, 來改變label的值和弧線的值

工程實現代碼

ViewController.m文件

#import "ViewController.h"
#import "ProgressView.h"

@interface ViewController ()

@property(strong, nonatomic) ProgressView *pView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    //設置自定義View
    self.pView = [[ProgressView alloc] initWithFrame:CGRectMake(100, 230, self.view.frame.size.width - 200, 200)];
    self.pView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:self.pView];
    
    //設置Slider
    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(100, 100, 200, 30)];
    slider.maximumValue = 1;
    slider.minimumValue = 0;
    
    //給slider添加事件
    [slider addTarget:self action:@selector(slider:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:slider];

}

- (void)slider:(UISlider *)slider{
    
    //將slider的值傳遞給View界面的屬性, 用來控制自定View界面的label值和弧形的形狀
    _pView.progress = slider.value;
  
}
@end```

####ProgressView.h文件
```code
#import <UIKit/UIKit.h>

@interface ProgressView : UIView

//用于接收傳值
@property (assign, nonatomic) CGFloat progress;

@end```

####ProgressView.m文件
```code
#import "ProgressView.h"
@interface ProgressView ()

//用于顯示進度值
@property (strong, nonatomic) UILabel *label;

@end

@implementation ProgressView

- (UILabel *)label{
    
    if (_label == nil) {
        
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 100, 20)];
        label.textAlignment = NSTextAlignmentCenter;
        label.textColor = [UIColor colorWithRed:0.069 green:0.362 blue:1.000 alpha:1.000];
        
        self.label = label;
        
        [self addSubview:label];

    }
    
    return _label;
}

- (void)drawRect:(CGRect)rect {
    
    //獲取上下文
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    
    
    //路徑
    CGPoint center = CGPointMake(50, 50);
    //半徑
    CGFloat radius = 50;
    //開始弧度
    CGFloat start = -M_PI_2;
    //結束弧度
    CGFloat end = start + self.progress * M_PI * 2;
    # 注意: 該處創建路徑的方法
    //參數一: 值弧形的中心位置
    //參數二: 弧形的半徑
    //參數三: 弧形的起始角度
    //參數四: 弧形的結束角度
    //參數五: 是否順時針
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:start endAngle:end clockwise:YES];
    
    //將路徑添加到上下文
    CGContextAddPath(cxt, path.CGPath);
    
    //渲染
    CGContextStrokePath(cxt);

}

//想要將顯示到view上, 需要重寫setting方法
- (void)setProgress:(CGFloat)progress{
    
    
    _progress = progress;
    
    self.label.text = [NSString stringWithFormat:@"%.1f%%", progress * 100];
    
    
    //重寫調用drawRect方法, 實時繪制進度
    [self setNeedsDisplay];
}

@end