项目中有界面需要显示自定义的电池条，大概有两种解决方案。第一，让设计给出一个电池条样式的图标；第二，用 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 绘制电池条
