Quartz 2D - 自定义进度控件

简单自定义下载进度控件

• 使用UISlider作为控制进度条

  
  
  

  下载进度控件.gif

• 界面非常简单,storyBoard中拖入一个UIView(progressView),和一个Lable,Label填充整个View,文字居中显示.创建一个View绑定

  
  
  

  自定义View
  
  
  

  storyBoard

• 控制器的.h文件中

#import "ViewController.h"
#import "GZDProgressView.h"
@interface ViewController ()

/** 进度view */
@property (weak, nonatomic) IBOutlet GZDProgressView *progressView;
/** sliderBar */
@property (weak, nonatomic) IBOutlet UISlider *sliderView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}

- (IBAction)sliderViewValueChange:(id)sender {
    self.progressView.progress = self.sliderView.value;
}

• progressView中暴露一个进度属性让外界传值

#import 
@interface GZDProgressView : UIView
@property (assign, nonatomic) CGFloat progress;

@end

• .m文件中

#import "GZDProgressView.h"

@interface GZDProgressView ()
//进度label
@property (weak, nonatomic) IBOutlet UILabel *progressLabel;
@end

@implementation GZDProgressView

//重写progress的set方法
- (void)setProgress:(CGFloat)progress {
    _progress = progress;
    self.progressLabel.text = [NSString stringWithFormat:@"%.2f%%",progress * 100];
    //调用方法重新绘制
    [self setNeedsDisplay];
    
}

// drawRect方法画线
- (void)drawRect:(CGRect)rect {
    
    CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:35 startAngle: -M_PI_2 endAngle:(self.progress * M_PI * 2) - M_PI_2 clockwise:YES];
    
    [path setLineCapStyle:kCGLineCapRound];
    
    [path setLineWidth:5];
    
    [path stroke];
}
@end