iOS-電池圖標【結合貝塞爾曲線控制電量顯示】
阿新 • • 發佈:2018-03-01
radius 顯示 ios ner att OS super 1.0 self.
基於UIView類:WKJBatteryView
WKJBatteryView.h
#import <UIKit/UIKit.h>
@interface WKJBatteryView : UIView
/**
value:0 - 100
*/
- (void)setBatteryValue:(NSInteger)value;
@end
WKJBatteryView.m
#import "WKJBatteryView.h"
@interface WKJBatteryView()
///電池寬度
@property (nonatomic,assign) CGFloat b_width;
///電池高度
@property (nonatomic,assign) CGFloat b_height;
///電池外線寬
@property (nonatomic,assign) CGFloat b_lineW;
@property (nonatomic,strong) UIView *batteryView;
@end
@implementation WKJBatteryView
- (instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
[self drawBattery];
}
return self;
}
///畫圖標
- (void)drawBattery{
///x坐標
CGFloat b_x = 1;
///y坐標
CGFloat b_y = 1;
_b_height = self.bounds.size.height - 2;
_b_width = self.bounds.size.width - 5;
_b_lineW = 1;
//畫電池【左邊電池】
UIBezierPath *pathLeft = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(b_x, b_y, _b_width, _b_height) cornerRadius:2 ];
CAShapeLayer *batteryLayer = [CAShapeLayer layer];
batteryLayer.lineWidth = _b_lineW;
batteryLayer.strokeColor = [UIColor lightGrayColor].CGColor;
batteryLayer.fillColor = [UIColor clearColor].CGColor;
batteryLayer.path = [pathLeft CGPath];
[self.layer addSublayer:batteryLayer];
//畫電池【右邊電池箭頭】
UIBezierPath *pathRight = [UIBezierPath bezierPath];
[pathRight moveToPoint:CGPointMake(b_x + _b_width+1, b_y + _b_height/3)];
[pathRight addLineToPoint:CGPointMake(b_x + _b_width+1, b_y + _b_height * 2/3)];
CAShapeLayer *layerRight = [CAShapeLayer layer];
layerRight.lineWidth = 2;
layerRight.strokeColor = [UIColor lightGrayColor].CGColor;
layerRight.fillColor = [UIColor clearColor].CGColor;
layerRight.path = [pathRight CGPath];
[self.layer addSublayer:layerRight];
///電池內填充
_batteryView = [[UIView alloc]initWithFrame:CGRectMake(b_x + 1,b_y + _b_lineW, 0, _b_height - _b_lineW * 2)];
_batteryView.layer.cornerRadius = 2;
_batteryView.backgroundColor = [UIColor colorWithRed:0.324 green:0.941 blue:0.413 alpha:1.000];
[self addSubview:_batteryView];
}
///控制電量顯示
- (void)setBatteryValue:(NSInteger)value{
if (value<10) {
_batteryView.backgroundColor = [UIColor redColor];
}else{
_batteryView.backgroundColor = [UIColor colorWithRed:0.324 green:0.941 blue:0.413 alpha:1.000];
}
CGRect rect = _batteryView.frame;
rect.size.width = (value*(_b_width - _b_lineW * 2))/100;
_batteryView.frame = rect;
}
@end
iOS-電池圖標【結合貝塞爾曲線控制電量顯示】