Quartz2D是一个二维绘图引擎，同时支持iOS和Mac系统
Quartz2D的API是纯C语言的
Quartz2D的API来自于Core Graphics框架(CoreCraphics.framework)，数据类型和函数都是以CG作为前缀(iOS6之后框架已经默认被导入进来)
1>首先我们需要先创建一个新视图ProgressView继承UIView
为了更方便我们给新视图添加一个Xib将lable控件拖入xib为了显示百分比
好,下面正式开始.
2>首先我们在ProgressView.h中创建一个进度值属性
#pragma mark - 进度值(供调用类去动态设置)
@property (nonatomic, assign) CGFloat progress;
3>接下来开始绘制图形ProgressView.m中
1.我们将xib中的Label用拖拽的方式进行添加
@property (weak, nonatomic) IBOutlet UILabel *progressLabel;
2.绘图需要调用此方法- (void)drawRect:(CGRect)rect
#pragma mark - 当视图第一次显示时就会调用
// 参数：rect(就是相当于self.bounds)
// 作用：绘图
- (void)drawRect:(CGRect)rect
{
// 定义扇形中心
CGPoint origin = CGPointMake(150 , 150);
// 定义扇形半径
CGFloat radius = 100.0f;
// 设定扇形起点位置
CGFloat startAngle = - M_PI_2;
// 根据进度计算扇形结束位置
CGFloat endAngle = startAngle + self.progress * M_PI * 2;
// 根据起始点、原点、半径绘制弧线
UIBezierPath *sectorPath = [UIBezierPath bezierPathWithArcCenter:origin radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
// 从弧线结束为止绘制一条线段到圆心。这样系统会自动闭合图形，绘制一条从圆心到弧线起点的线段。
[sectorPath addLineToPoint:origin];
// 设置扇形的填充颜色
[[UIColor blueColor] set];
// 设置扇形的填充模式
[sectorPath fill];
}
4>既然是可以变动的视图,那么每一次变动都需要重新绘制
#pragma mark - progress的set方法
- (void)setProgress:(CGFloat)progress
{
_progress = progress;
_progressLabel.text = [NSString stringWithFormat:@"%.2f%%", _progress * 100];
// 视图重绘(重新调用drawRect方法)
[self setNeedsDisplay];
}
5>ViewController.m中
创建一个进度条和一个滑动条
// 进度条
@property (nonatomic, strong) ProgressView *progressView;
- (void)viewDidLoad {
[super viewDidLoad];
// 自定义进度条
_progressView = [[NSBundle mainBundle] loadNibNamed:@"ProgressView" owner:nil options:nil].firstObject;
_progressView.bounds = CGRectMake(0, 0, 300, 300);
_progressView.center = CGPointMake(self.view.bounds.size.width / 2.0, 120);
_progressView.progress = 0;
[self.view addSubview:_progressView];
// 滑动条
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 60, 30)];
slider.center = CGPointMake(self.view.bounds.size.width / 2.0, CGRectGetMaxY(_progressView.frame) + 30);
slider.value = 0;
[slider addTarget:self action:@selector(changeSliderValue:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:slider];
}
然后我们需要为滑动条添加一个滑动事件,当值改变的时候进行触发
#pragma mark - 滑动事件
- (void)changeSliderValue:(UISlider *)slider
{
// 动态设置进度条的值(progress)
_progressView.progress = slider.value;
}
搞定