不同颜色之分段式圆环
![](http://static.blog.csdn.net/images/category_icon.jpg)
版权声明:本文为博主原创文章,未经博主允许不得转载。
最近美工那边提出一个需求,就是需要展示资产的占比,通过一个圆环展示,于是自己便封装了一个。段数不限制,只需赋值所占比例及该段的颜色即可。
float a=301.25,b=235.23,c=452.65;
ColorCircleView *view = [[ColorCircleViewalloc]initWithFrame:CGRectMake(100,200, 100, 100)];
view.circleArray =@[
@{
@"strokeColor":[UIColorredColor],
@"precent" :@(a/(a+b+c))
},
@{
@"strokeColor":[UIColororangeColor],
@"precent" :@(b/(a+b+c))
},
@{
@"strokeColor":[UIColoryellowColor],
@"precent" :@(c/(a+b+c))
}
];
[self.viewaddSubview:view];
运行效果如下:
#import <UIKit/UIKit.h>
@interface ColorCircleView : UIView
//数组里面装的是字典,,字典里有两个key -> strokeColor和precent
@property (nonatomic,assign) NSArray *circleArray;
@end
#import "ColorCircleView.h"
@interface ColorCircleView ()
@property (nonatomic,strong) CAShapeLayer *shapeLayer;
@end
@implementation ColorCircleView
- (void)initType
{
__blockfloat a = 0;
[self.circleArrayenumerateObjectsUsingBlock:^(NSDictionary *obj,NSUInteger idx, BOOL *_Nonnull stop) {
//创建出CAShapeLayer
self.shapeLayer = [CAShapeLayerlayer];
self.shapeLayer.frame =CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height);//设置shapeLayer的尺寸和位置
// self.shapeLayer.position = self.view.center;
self.shapeLayer.fillColor = [UIColorclearColor].CGColor;//填充颜色为ClearColor
//设置线条的宽度和颜色
self.shapeLayer.lineWidth =10.0f;
self.shapeLayer.strokeColor = [obj[@"strokeColor"]CGColor];
//创建出圆形贝塞尔曲线
UIBezierPath *circlePath = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height)];
//让贝塞尔曲线与CAShapeLayer产生联系
self.shapeLayer.path = circlePath.CGPath;
self.shapeLayer.strokeStart = a;
self.shapeLayer.strokeEnd = [obj[@"precent"]floatValue] + a;
a = self.shapeLayer.strokeEnd;
//添加并显示
[self.layeraddSublayer:self.shapeLayer];
//添加圆环动画
CABasicAnimation *pathAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.0;
pathAnimation.fromValue = @(0);
pathAnimation.toValue = @(1);
pathAnimation.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseOut];
[self.shapeLayer addAnimation:pathAnimationforKey:@"strokeEnd"];
}];
}
- (void)setCircleArray:(NSArray *)circleArray
{
_circleArray = circleArray;
[selfinitType];
}
@end