slider进度条 - 绘制圆形

1.效果图


         


2.storyboard设置



3.代码实现

 1.ViewController.m

#import "ViewController.h"

#import "graphicsView.h"

@interface
ViewController ()

@property (weak,
nonatomic) IBOutlet
UILabel *timerLabel;

@property (weak,nonatomic)IBOutlet
graphicsView *progress;

@property (weak,
nonatomic) IBOutlet
UISlider *slid;

//@property (weak,nonatomic)NSTimer *timer;

@end

@implementation ViewController

- (IBAction)slider:(UISlider *)sender {

   
//根据进度条的值,改变label的文本显示值

    self.timerLabel.text = [NSString
stringWithFormat:@"%.2f%%",sender.value *
100];

   
//同时将进度条的值传给绘制路径

    _progress.press = sender.value;

}

 2.graphicsView.h
 

#import <UIKit/UIKit.h>

@interface graphicsView :
UIView

@property (assign,nonatomic)CGFloat press;

@end

 3.graphicsView.m

#import "graphicsView.h"

@implementation graphicsView

-(void)setPress:(CGFloat)press{

    _press = press; 

    [self
setNeedsDisplay]; 
//drawRect在viewwillApear显示时调用,程序后面要重绘,就要调用setNeedsDisplay方法

}

-(void)drawRect:(CGRect)rect{

  

    CGPoint point =
CGPointMake(self.frame.size.width
* 0.5,
self.frame.size.height *0.5); 
//绘制区域

    CGFloat radius =
self.frame.size.width *
0.5 - 20; 
//绘制半径

    CGFloat endA = -M_PI_2 +
2 * M_PI *
_press;         //绘制到哪个角度,根据传进来的progress值进行变化

    //bezierPathWithArcCenter方法用来绘制圆形路径

    UIBezierPath *path = [UIBezierPath
bezierPathWithArcCenter:point radius:radius
startAngle:-M_PI_2
endAngle:endA clockwise:YES];

    [[UIColor redColor]set]; 
//设置绘制线的颜色

    [path stroke];  
//绘制

}

@end