美文网首页iOS开发
iOS 用贝塞尔曲线绘制电池

iOS 用贝塞尔曲线绘制电池

作者: CMD独白 | 来源:发表于2017-06-20 14:32 被阅读381次

    效果图:

    Simulator Screen Shot - iPhone 8 Plus - 2018-01-26 at 11.03.56.png
    
    //画电池
        UIBezierPath *path1 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x, y, w, h) cornerRadius:2];
        CAShapeLayer *batteryLayer = [CAShapeLayer layer];
        batteryLayer.lineWidth = lineW;
        batteryLayer.strokeColor = [UIColor blackColor].CGColor;
        batteryLayer.fillColor = [UIColor clearColor].CGColor;
        batteryLayer.path = [path1 CGPath];
        [self.view.layer addSublayer:batteryLayer];
        
        UIBezierPath *path2 = [UIBezierPath bezierPath];
        [path2 moveToPoint:CGPointMake(x+w+1, y+h/3)];
        [path2 addLineToPoint:CGPointMake(x+w+1, y+h*2/3)];
        CAShapeLayer *layer2 = [CAShapeLayer layer];
        layer2.lineWidth = 2;
        layer2.strokeColor = [UIColor blackColor].CGColor;
        layer2.fillColor = [UIColor clearColor].CGColor;
        layer2.path = [path2 CGPath];
        [self.view.layer addSublayer:layer2];
    
    
    //绘制进度
        batteryView = [[UIView alloc]initWithFrame:CGRectMake(x,y+lineW, 0, h-lineW*2)];
        batteryView.layer.cornerRadius = 2;
        batteryView.backgroundColor = [UIColor colorWithRed:0.324 green:0.941 blue:0.413 alpha:1.000];
        [self.view addSubview:batteryView];
    

    使用的时候直接调用runProgress方法,progressValue为当前电量

    - (void)runProgress:(NSInteger)progressValue{
        
        [UIView animateWithDuration:1 animations:^{
            CGRect frame = batteryView.frame;
            frame.size.width = (progressValue*(w-lineW*2))/100;
            batteryView.frame  = frame;
            batteryLabel.text = [[NSString stringWithFormat:@"%ld",(long)progressValue] stringByAppendingString:@"%"];
            
            if (progressValue<10) {
                batteryView.backgroundColor = [UIColor redColor];
            }else{
              batteryView.backgroundColor = [UIColor colorWithRed:0.324 green:0.941 blue:0.413 alpha:1.000];
            }
        }];
    }
    

    demo地址:https://github.com/chenmengdi/UIBezierPath-

    相关文章

      网友评论

        本文标题:iOS 用贝塞尔曲线绘制电池

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