Quartz2D_进度显示

工程描述图:

屏幕快照 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 

@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