美文网首页iOS Developer
猫猫学iOS之Quartz2D下载进度条

猫猫学iOS之Quartz2D下载进度条

作者: 翟乃玉 | 来源:发表于2016-06-30 15:45 被阅读231次

    猫猫分享,必须精品

    原创文章,欢迎转载。转载请注明:翟乃玉的博客
    地址:http://www.jianshu.com/notebooks/4236923/latest

    一:效果图

    思路

    • 界面主要由一个滑杆,一个进度条组成,拖动滑竿的时候就是在上面画弧。从最上面,按顺时针画,所以,它的起始角度是-90度.结束角度也是-90度,也是从起始角度开始画,起始角度-90度, 看你下载进度是多少。假如说你下载进度是100,就是1 * 360度也就是说这个进度占你360度多少分之一。

    二:代码实现

    #import "ProgressView.h"
    
    @implementation ProgressView
    
    -(void)setProgress:(CGFloat)progress{
        _progress = progress;
        
        //如果我们手动调用drawRect,系统是不会给我们生成跟View相关联的上下文.
        //系统调用drawRect的时候,才会生成跟View相关联上下文.
        [self drawRect:self.bounds];
        
        //调用setNeedsDisplay系统底层就会自动调用drawRect
        [self setNeedsDisplay];
    }
    
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect {
        // Drawing code
        
        //上下文
        CGContextRef ref = UIGraphicsGetCurrentContext();
        //画弧路径的参数以及路径
        CGPoint center = CGPointMake(rect.size.width * 0.5 , rect.size.height * 0.5 );
        CGFloat radius = rect.size.width * 0.5 - 10;
        CGFloat startA = -M_PI_2;
        CGFloat endA = -M_PI_2 + self.progress * M_PI * 2;
        //路径
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
        
        //设置颜色
        [[UIColor greenColor] set];
        
        //设置线的宽度
        CGContextSetLineWidth(ref, 16);
        
        //设置线条起点和终点的样式为圆角
        CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
        //设置线条的转角的样式为圆角
        CGContextSetLineJoin(UIGraphicsGetCurrentContext(), kCGLineJoinRound); 
        //将路径添加到上下文
        CGContextAddPath(ref, path.CGPath);
        
        //渲染
        CGContextStrokePath(ref);
        
    }
    @end
    

    三:注意问题

    drawRect方法调用问题

    • 当progress每次被传递的时候都需要调用,重新绘制圆弧。
    • drawRect方法是不能手动调用,因为在drawRect方法中才能获取跟View相关联的上下文, 系统在调用DrawRect方法时,会自动帮你创建一个跟View相关联的上下文,并且传递给它。自己调用的,没有给drawRect方法传递上下文,所以在draw方法中拿不到上下文。
    • 想要重绘,调用[self setNeedsDisplay]; 这个方法的作用就是告诉系统重新绘制View,系统就会自动帮你调用drawRect方法,系统在调用drawRect方法,它会帮你创建上下文。

    ps:来简书没多久,发现好多朋友关注我,谢谢大家,虽然猫猫写博客的初衷是督促自己学习,不过能帮助别人那是再好不过的了。
    ps1:博客大多是猫自己学习的过程,有错误希望及时大家指正,在此猫先谢了_
    ps2:有朋友问我能不能把素材发出来,之前猫猫在csdn写博客的时候很多朋友就会问我要素材或者源码学习资料之类的,在这儿,猫不会直接把代码贴出来,这里是猫最新的复习或者学习的过程总结,而不是拿来能用的东东,(当然也会有一些可以拿来直接用的东西的),如果个人需要某些资料,可以在评论里面留言或者说直接加我的微信QQ都可以,猫猫看到会第一时间回复的。

    相关文章

      网友评论

        本文标题:猫猫学iOS之Quartz2D下载进度条

        本文链接:https://www.haomeiwen.com/subject/fjgxjttx.html