iOS - Quartz 2D 下载进度按钮绘制

1、绘制下载进度按钮

• 具体实现代码见 GitHub 源码 QExtension

• QProgressButton.h

  	@interface QProgressButton : UIButton
  
  	/// 进度值，范围 0 ～ 1
  	@property (nonatomic, assign) CGFloat progress;
  
  	/// 进度终止状态标题，一旦设置了此标题进度条就会停止
  	@property (nonatomic, strong) NSString *stopTitle;
  
  	/**
  	 *  创建带进度条的按钮
  	 *
  	 *  @param frame        按钮的 frame 值
  	 *  @param title        进按钮的标题
  	 *  @param lineWidth    进度条的线宽，default is 2
  	 *  @param lineColor    进度条线的颜色，default is greenColor
  	 *  @param textColor    进度值的颜色，default is blackColor
  	 *  @param backColor    按钮的背景颜色，default is clearColor
  	 *  @param isRound      按钮是否显示为圆形，default is YES
  	 *
  	 *  @return 带进度条的按钮
  	 */
  	+ (instancetype)q_progressButtonWithFrame:(CGRect)frame
  	                                    title:(NSString *)title
  	                                lineWidth:(CGFloat)lineWidth
  	                                lineColor:(nullable UIColor *)lineColor
  	                                textColor:(nullable UIColor *)textColor
  	                                backColor:(nullable UIColor *)backColor
  	                                  isRound:(BOOL)isRound;
  
  	@end
  

• QProgressButton.m

  	@interface QProgressButton ()
  
  	/// 进度条的线宽
  	@property (nonatomic, assign) CGFloat lineWidth;
  
  	/// 进度条线的颜色
  	@property (nonatomic, strong) UIColor *lineColor;
  
  	/// 按钮的背景颜色
  	@property (nonatomic, strong) UIColor *backColor;
  
  	/// 按钮是否显示为圆形
  	@property (nonatomic, assign, getter=isRound) BOOL round;
  
  	@end
  
  	@implementation QProgressButton
  
  	/// 创建带进度条的按钮
  	+ (instancetype)q_progressButtonWithFrame:(CGRect)frame
  	                                    title:(NSString *)title
  	                                lineWidth:(CGFloat)lineWidth
  	                                lineColor:(nullable UIColor *)lineColor
  	                                textColor:(nullable UIColor *)textColor
  	                                backColor:(nullable UIColor *)backColor
  	                                  isRound:(BOOL)isRound {
  
  	    QProgressButton *progressButton = [[self alloc] init];
  
  	    progressButton.lineWidth = lineWidth ? : 2;
  	    progressButton.lineColor = lineColor ? : [UIColor colorWithRed:76/255.0 green:217/255.0 blue:100/255.0 alpha:1.0];
  	    progressButton.backColor = backColor ? : [UIColor clearColor];
  	    progressButton.round = isRound;
  
  	    // 设置按钮的实际 frame
  	    if (isRound) {
  	        CGRect tmpFrame = frame;
  	        tmpFrame.origin.y = frame.origin.y - (frame.size.width - frame.size.height) * 0.5;
  	        tmpFrame.size.height = frame.size.width;
  	        progressButton.frame = tmpFrame;
  	    } else {
  	        progressButton.frame = frame;
  	    }
  
  	    // 设置显示的标题和颜色
  	    [progressButton setTitle:title forState:UIControlStateNormal];
  	    [progressButton setTitleColor:(textColor ? : [UIColor blackColor]) forState:UIControlStateNormal];
  
  	    return progressButton;
  	}
  
  	/// 绘制进度条
  	- (void)drawRect:(CGRect)rect {
  
  	    // 设置按钮圆角
  	    self.layer.masksToBounds = YES;
  	    self.layer.cornerRadius = rect.size.height * 0.5;
  
  	    // 绘制按钮的背景颜色
  	    UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];
  	    [self.backColor set];
  	    [path fill];
  
  	    // 设置进度终止时显示的内容
  	    if (self.stopTitle) {
  
  	        // 设置下载完成后的标题
  	        [self setTitle:self.stopTitle forState:UIControlStateNormal];
  	        return;
  	    }
  
  	    if (self.progress <= 0) {
  	        return;
  	    }
  
  	    // 清除按钮背景图片
  	    [self setBackgroundImage:nil forState:UIControlStateNormal];
  
  	    // 设置进度值
  	    [self setTitle:[NSString stringWithFormat:@"%.2f%%", self.progress * 100] forState:UIControlStateNormal];
  
  	    if (self.isRound) {
  
  	        CGPoint center = CGPointMake(rect.size.height * 0.5, rect.size.height * 0.5);
  	        CGFloat radius = (rect.size.height - self.lineWidth) * 0.5;
  	        CGFloat startA = - M_PI_2;
  	        CGFloat endA = startA + self.progress * 2 * M_PI;
  
  	        // 绘制进度条背景
  	        path = [UIBezierPath bezierPathWithArcCenter:center
  	                                              radius:radius
  	                                          startAngle:0
  	                                            endAngle:2 * M_PI
  	                                           clockwise:YES];
  	        [[[UIColor lightGrayColor] colorWithAlphaComponent:0.5] set];
  	        path.lineWidth = self.lineWidth;
  	        [path stroke];
  
  	        // 绘制进度条
  	        path = [UIBezierPath bezierPathWithArcCenter:center
  	                                              radius:radius
  	                                          startAngle:startA
  	                                            endAngle:endA
  	                                           clockwise:YES];
  	        path.lineWidth = self.lineWidth;
  	        path.lineCapStyle = kCGLineCapRound;
  	        [self.lineColor set];
  	        [path stroke];
  
  	    } else {
  
  	        CGFloat w = self.progress * rect.size.width;
  	        CGFloat h = rect.size.height;
  
  	        // 绘制进度条背景
  	        path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, rect.size.width, rect.size.height)];
  	        [[[UIColor lightGrayColor] colorWithAlphaComponent:0.5] set];
  	        [path fill];
  
  	        // 绘制进度条
  	        path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, w, h)];
  	        [self.lineColor set];
  	        [path fill];
  	    }
  	}
  
  	/// 设置进度值
  	- (void)setProgress:(CGFloat)progress {
  
  	    _progress = progress;
  
  	    [self setNeedsDisplay];
  	}
  
  	/// 设置进度终止状态标题
  	- (void)setStopTitle:(NSString *)stopTitle {
  
  	    _stopTitle = stopTitle;
  
  	    [self setNeedsDisplay];
  	}
  
  	@end
  

• ViewController.m

  	// 创建进度按钮
  	QProgressButton *progressButton = [QProgressButton q_progressButtonWithFrame:CGRectMake(100, 100, 100, 50)
  	                                                                       title:@"开始下载"
  	                                                                   lineWidth:10
  	                                                                   lineColor:[UIColor blueColor]
  	                                                                   textColor:[UIColor redColor]
  	                                                                   backColor:[UIColor yellowColor]
  	                                                                     isRound:YES];
  
  	// 设置按钮点击事件
  	[progressButton addTarget:self action:@selector(progressUpdate:) forControlEvents:UIControlEventTouchUpInside];
  
  	// 将按钮添加到当前控件显示
  	[self.view addSubview:progressButton];
  
  	// 设置按钮的进度值
  	self.progressButton.progress = progress;
  
  	// 设置按钮的进度终止标题，一旦设置了此标题进度条就会停止
  	self.progressButton.stopTitle = @"下载完成";
  

• 效果