iOS 开发 - UIBezierPath 绘制电池条

项目中有界面需要显示自定义的电池条，大概有两种解决方案。第一，让设计给出一个电池条样式的图标；第二，用 UIBezierPath 绘制，考虑到代码绘制的种种好处，比如灵活性高、可定制性强等等，就选择了用 UIBezierPath 绘制。

• 先贴出效果图

效果图

• 接下来是核心代码

- (void)creatBatteryView {

    // 电池的宽度

    CGFloat w = self.bounds.size.width;

    // 电池的高度

    CGFloat h = self.bounds.size.height;

    // 电池的x的坐标

    CGFloat x = self.bounds.origin.x;

    // 电池的y的坐标

    CGFloat y = self.bounds.origin.y;

    // 电池的线宽

    self.lineW = 1;

    // 画电池

    UIBezierPath *path1 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x, y, w, h) cornerRadius:2];

    CAShapeLayer *batteryLayer = [CAShapeLayer layer];

    batteryLayer.lineWidth = self.lineW;

    batteryLayer.strokeColor = [UIColor whiteColor].CGColor;

    batteryLayer.fillColor = [UIColor clearColor].CGColor;

    batteryLayer.path = [path1 CGPath];

    [self.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 whiteColor].CGColor;

    layer2.fillColor = [UIColor clearColor].CGColor;

    layer2.path = [path2 CGPath];

    [self.layer addSublayer:layer2];

    // 绘制进度

    self.batteryView = [[UIView alloc] initWithFrame:CGRectMake(x + 1, y + self.lineW, 0, h - self.lineW * 2)];

    self.batteryView.layer.cornerRadius = 2;

    self.batteryView.backgroundColor = [UIColor whiteColor];

    [self addSubview:self.batteryView];

}

• 由于代码实现比较简单另外又加了注释，这里就不对代码做过多的阐述了，欢迎各位同行一起交流学习！

这里是demo地址： UIBezierPath 绘制电池条