iOSQuartz2D-02-绘制炫酷的下载进度条

效果图


171205354102612.gif

实现思路


  • 要实现绘图,通常需要自定义一个UIView的子类,重写父类的- (void)drawRect:(CGRect)rect方法,在该方法中实现绘图操作
  • 若想显示下载进度,只需要实例化自定义子类的对象(若是storyboard中控件,只需修改控件的class属性为自定义子类的类名即可)
    • 171206038637718.png
  • 效果图所示的效果其实是绘制一个圆弧,动态的改变终点的位置,最终达到一个封闭的圆
  • 中间的文字是一个UILabel控件,根据进度动态改变文字的现实

实现步骤


  • 自定义一个UIView的子类

    //提供一个成员属性,接收下载进度值
    @property (nonatomic, assign) CGFloat progress;
  • 重写成员属性progress的setter

    //每次改变成员属性progress的值,就会调用它的setter
    - (void)setProgress:(CGFloat)progress
    {
        _progress = progress;
        //当下载进度改变时,手动调用重绘方法
        [self setNeedsDisplay];
    }
  • 重写- (void)drawRect:(CGRect)rect(核心

    - (void)drawRect:(CGRect)rect
    {
        //设置圆弧的半径
        CGFloat radius = rect.size.width * 0.5;
        //设置圆弧的圆心
        CGPoint center = CGPointMake(radius, radius);
        //设置圆弧的开始的角度(弧度制)
        CGFloat startAngle = - M_PI_2;
        //设置圆弧的终止角度
        CGFloat endAngle = - M_PI_2 + 2 * M_PI * self.progress;
        //使用UIBezierPath类绘制圆弧
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 5 startAngle:startAngle endAngle:endAngle clockwise:YES];
        //将绘制的圆弧渲染到图层上(即显示出来)
        [path stroke];
    }

转载于:https://www.cnblogs.com/theDesertIslandOutOfTheWorld/p/4736244.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值