码迷,mamicode.com
首页 > 移动开发 > 详细

iOS-电池图标【结合贝塞尔曲线控制电量显示】

时间:2018-03-01 21:50:17      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:edr   clear   assign   nbsp   ddl   atomic   技术   sub   str   

技术分享图片 

基于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-电池图标【结合贝塞尔曲线控制电量显示】

标签:edr   clear   assign   nbsp   ddl   atomic   技术   sub   str   

原文地址:https://www.cnblogs.com/wangkejia/p/8490260.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!