iOS 用贝塞尔曲线绘制电池

效果图:

iOS 用贝塞尔曲线绘制电池_第1张图片
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 用贝塞尔曲线绘制电池)