展示效果:
请问:实现的步骤是什么?
第一步
搭建界面,需要有一个UISlider滑动控件,UILabel显示进度数值的控件.和自定义View.将UILabel拖入到自定义view的类扩展中,注意:如果不能直接拖线,那么就先写一个IBOutlet输出口.然后再进行连线.将自定义view和UISlider控件连线到控制器中.监听slider的值改变事件.然后在自定义view的.h头文件中定义一个UISlider属性,用来接收控制器传入的值.并重写该属性的setter方法.根据改变的值对下载进度条进行重绘.
第二步
重写自定义view的drawRect:方法,绘制进度条.实现步骤如下:
l1>获取图形上下文
l2>创建路径对象
l3>设置路径状态
l4>将路径添加到上下文中
l5>渲染
第三步
如果要设置个性化样式,可以尝试使用如下代码修改状态.
//第一步代码实现
------------------------------ HMDrawingView.h------------------------------
@property(nonatomic,assign)CGFloatprogress;
------------------------------ HMDrawingView.m------------------------------
@interfaceHMDrawingView()
@property(nonatomic,weak)IBOutletUILabel*progressLabel;
@end
------------------------------ ViewController.m------------------------------
@interfaceViewController()
@property(weak,nonatomic)IBOutletHMDrawingView*progressView;
@end
//监听slider的值改变事件
- (IBAction)sliderValueChanged:(UISlider*)sender {
self.progressView.progress= sender.value;
}
//第二步代码实现
------------------------------ HMDrawingView.m------------------------------
- (void)setProgress:(CGFloat)progress
{
_progress= progress;
//设置进度显示文字
self.progressLabel.text= [NSStringstringWithFormat:@"%.2f%%",progress *100];
//重绘
[selfsetNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
// 1.获取图形上下文
CGContextRefctx =UIGraphicsGetCurrentContext();
// 2.创建路径对象
CGPointcenterP =CGPointMake(rect.size.width*0.5, rect.size.height*0.5);
CGFloatradius =MIN(rect.size.width, rect.size.height) *0.4;
//起始弧度
CGFloatstart = -M_PI_2;
//终止弧度
CGFloatend =M_PI*2*self.progress-M_PI_2;
UIBezierPath*path = [UIBezierPathbezierPathWithArcCenter:centerPradius:radiusstartAngle:startendAngle:endclockwise:YES];
// 4.设置路径状态
CGContextSetLineWidth(ctx,30);
[[UIColorgreenColor]set];
CGContextSetLineCap(ctx,kCGLineCapRound);
// 5.添加路径到上下文中
CGContextAddPath(ctx, path.CGPath);
// 6.渲染
CGContextDrawPath(ctx,kCGPathStroke);
}
//第三步代码实现
[pathaddLineToPoint:centerP];
CGContextDrawPath(ctx,kCGPathFill);
