iOS-圆环统计图(CircleChart)
2018-12-19 本文已影响6人
码渣
前言:圆环统计图在我们工程中比较常用,正好我们公司项目中要用到,所以自己封装了一下,以方便以后复用。
首先,我们看一下效果图:
其次,实现原理也是比较简单的,底部是一个圆,上面同样位置现叠加一个有会值的圆,中间的文字引用第三方框架***UICountingLabel ***
我们来看一下.h文件中包含哪些方法和属性:
#import <UIKit/UIKit.h>
#import "UICountingLabel.h"
@interface GBCircleChart : UIView
#pragma mark - 属性
/** 计数Label */
@property (strong, nonatomic) UICountingLabel *countingLabel;
/** 圆环颜色 */
@property (nonatomic) UIColor *strokeColor;
/** 开始渐变颜色 */
@property (nonatomic) UIColor *strokeColorGradientStart;
/** 圆环的阴影颜色,默认为nil */
@property (nonatomic) UIColor *shadowColor;
/** 最大的值 */
@property (nonatomic) NSNumber *total;
/** 当前的值 */
@property (nonatomic) NSNumber *current;
/** 线宽 */
@property (nonatomic) NSNumber *lineWidth;
/** 动画持续时长 */
@property (nonatomic) NSTimeInterval duration;
/** 是否显示文字 */
@property (nonatomic) BOOL displayCountingLabel;
/** 是否动画,默认yes */
@property (nonatomic) BOOL displayAnimated;
#pragma mark - 初始化方法
- (id)initWithFrame:(CGRect)frame
total:(NSNumber *)total
current:(NSNumber *)current
clockwise:(BOOL)clockwise;
- (id)initWithFrame:(CGRect)frame
total:(NSNumber *)total
current:(NSNumber *)current
clockwise:(BOOL)clockwise
shadow:(BOOL)hasBackgroundShadow
shadowColor:(UIColor *)backgroundShadowColor;
- (id)initWithFrame:(CGRect)frame
total:(NSNumber *)total
current:(NSNumber *)current
clockwise:(BOOL)clockwise
shadow:(BOOL)hasBackgroundShadow
shadowColor:(UIColor *)backgroundShadowColor
displayCountingLabel:(BOOL)displayCountingLabel;
- (id)initWithFrame:(CGRect)frame
total:(NSNumber *)total
current:(NSNumber *)current
clockwise:(BOOL)clockwise
shadow:(BOOL)hasBackgroundShadow
shadowColor:(UIColor *)backgroundShadowColor
displayCountingLabel:(BOOL)displayCountingLabel
overrideLineWidth:(NSNumber *)overrideLineWidth;
#pragma mark - 绘制或更新图表
- (void)strokeChart;
- (void)growChartByAmount:(NSNumber *)growAmount;
- (void)updateChartByCurrent:(NSNumber *)current;
- (void)updateChartByCurrent:(NSNumber *)current byTotal:(NSNumber *)total;
@end
然后,我们再看一下.m中的实现
#import "GBCircleChart.h"
@interface GBCircleChart ()
@property (nonatomic) CAShapeLayer *circle;
@property (nonatomic) CAShapeLayer *gradientMask;
@property (nonatomic) CAShapeLayer *circleBackground;
@end
@implementation GBCircleChart
- (id)initWithFrame:(CGRect)frame total:(NSNumber *)total current:(NSNumber *)current clockwise:(BOOL)clockwise {
return [self initWithFrame:frame total:total current:current clockwise:clockwise shadow:NO shadowColor:[UIColor clearColor]];
}
- (id)initWithFrame:(CGRect)frame total:(NSNumber *)total current:(NSNumber *)current clockwise:(BOOL)clockwise shadow:(BOOL)hasBackgroundShadow shadowColor:(UIColor *)backgroundShadowColor {
return [self initWithFrame:frame total:total current:current clockwise:clockwise shadow:hasBackgroundShadow shadowColor:backgroundShadowColor displayCountingLabel:YES];
}
- (id)initWithFrame:(CGRect)frame total:(NSNumber *)total current:(NSNumber *)current clockwise:(BOOL)clockwise shadow:(BOOL)hasBackgroundShadow shadowColor:(UIColor *)backgroundShadowColor displayCountingLabel:(BOOL)displayCountingLabel {
return [self initWithFrame:frame total:total current:current clockwise:clockwise shadow:hasBackgroundShadow shadowColor:backgroundShadowColor displayCountingLabel:displayCountingLabel overrideLineWidth:@8];
}
- (id)initWithFrame:(CGRect)frame total:(NSNumber *)total current:(NSNumber *)current clockwise:(BOOL)clockwise shadow:(BOOL)hasBackgroundShadow shadowColor:(UIColor *)backgroundShadowColor displayCountingLabel:(BOOL)displayCountingLabel overrideLineWidth:(NSNumber *)overrideLineWidth {
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor whiteColor];
_total = total;
_current = current;
_strokeColor = [UIColor blueColor];
_lineWidth = overrideLineWidth;
_duration = 1.0;
_displayAnimated = YES;
_displayCountingLabel = displayCountingLabel;
CGPoint center = CGPointMake(frame.size.width/2, frame.size.height/2);
CGFloat r = MIN(CGRectGetWidth(frame), CGRectGetHeight(frame))/2 - _lineWidth.floatValue/2;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:r startAngle:-M_PI_2 endAngle:-M_PI_2+2*M_PI clockwise:clockwise];
_circle = [CAShapeLayer layer];
_circle.lineWidth = _lineWidth.floatValue;
_circle.lineCap = kCALineCapRound;
_circle.strokeColor = _strokeColor.CGColor;
_circle.fillColor = [UIColor clearColor].CGColor;
_circle.path = path.CGPath;
[self.layer addSublayer:_circle];
if (hasBackgroundShadow) {
_circleBackground = [CAShapeLayer layer];
_circleBackground.lineWidth = _lineWidth.floatValue;
_circleBackground.lineCap = kCALineCapRound;
_circleBackground.strokeColor = backgroundShadowColor.CGColor;
_circleBackground.fillColor = [UIColor clearColor].CGColor;
_circleBackground.path = path.CGPath;
[self.layer addSublayer:_circleBackground];
}
if (_displayCountingLabel) {
_countingLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(0, 0, 2*(r - 20), 2*(r - 20))];
_countingLabel.center = center;
_countingLabel.textColor = [UIColor darkTextColor];
_countingLabel.font = [UIFont systemFontOfSize:16];
_countingLabel.textAlignment = NSTextAlignmentCenter;
_countingLabel.numberOfLines = 0;
// _countingLabel.backgroundColor = [UIColor lightGrayColor];
_countingLabel.method = UILabelCountingMethodEaseInOut;
_countingLabel.format = @"%.1f%%";
[self addSubview:_countingLabel];
}
}
return self;
}
- (void)strokeChart {
if (_shadowColor) {
_circle.shadowColor = _shadowColor.CGColor;
_circle.shadowRadius = 3;
_circle.shadowOpacity = 0.5;
_circle.shadowOffset = CGSizeMake(0, 0);
}
_circle.strokeColor = _strokeColor.CGColor;
_circle.strokeEnd = _current.floatValue/_total.floatValue;
if (_displayCountingLabel) {
CGFloat totalPercentageValue = [_current floatValue]/([_total floatValue]/100.0);
[_countingLabel countFromZeroTo:totalPercentageValue withDuration:_duration];
}
if (_strokeColorGradientStart) {
self.gradientMask = [CAShapeLayer layer];
self.gradientMask.fillColor = [[UIColor clearColor] CGColor];
self.gradientMask.strokeColor = [[UIColor blackColor] CGColor];
self.gradientMask.lineWidth = _circle.lineWidth;
self.gradientMask.lineCap = kCALineCapRound;
CGRect gradientFrame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
self.gradientMask.frame = gradientFrame;
self.gradientMask.path = _circle.path;
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0.5, 0.0);
gradientLayer.endPoint = CGPointMake(0.5, 1.0);
gradientLayer.colors = @[(id)_strokeColorGradientStart.CGColor, (id)_strokeColor.CGColor];
gradientLayer.frame = gradientFrame;
gradientLayer.mask = _gradientMask;
[_circle addSublayer:gradientLayer];
_gradientMask.strokeEnd = _current.floatValue/_total.floatValue;
}
if (_displayAnimated) {
[self addAnimationIfNeededWithFromValue:@0 toValue:@(_current.floatValue/_total.floatValue)];
}
}
- (void)updateChartByCurrent:(NSNumber *)current {
[self updateChartByCurrent:current byTotal:_total];
}
- (void)updateChartByCurrent:(NSNumber *)current byTotal:(NSNumber *)total {
_circle.strokeEnd = current.floatValue/total.floatValue;
if (_strokeColorGradientStart && _gradientMask) {
_gradientMask.strokeEnd = _circle.strokeEnd;
}
if (_displayCountingLabel) {
CGFloat totalPercentageValue = [current floatValue]/([total floatValue]/100.0);
[_countingLabel countFrom:_current.floatValue to:totalPercentageValue withDuration:_duration];
}
[self addAnimationIfNeededWithFromValue:@(_current.floatValue/_total.floatValue) toValue:@(current.floatValue/total.floatValue)];
_current = current;
_total = total;
}
- (void)growChartByAmount:(NSNumber *)growAmount {
NSNumber *currrentNumber = @(_current.floatValue + growAmount.floatValue);
[self updateChartByCurrent:currrentNumber byTotal:_total];
}
- (void)addAnimationIfNeededWithFromValue:(NSNumber *)fromValue toValue:(NSNumber *)toValue{
CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
ani.fromValue = fromValue;
ani.toValue = toValue;
ani.duration = _duration;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[_circle addAnimation:ani forKey:nil];
if (_gradientMask && _strokeColorGradientStart) {
[_gradientMask addAnimation:ani forKey:nil];
}
}
大功告成,最后当然是附上demo和源代码了,希望下载与指正哦~~~~
传送门:demo下载