您的位置:首页 > 移动开发 > IOS开发

iOS 不同颜色之分段式圆环,段数不固定

2016-03-31 10:32 381 查看

最近美工那边提出一个需求,就是需要展示资产的占比,通过一个圆环展示,于是自己便封装了一个。段数不限制,只需赋值所占比例及该段的颜色即可。

直接上代码:
#import"ColorCircleView.h"

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];

运行效果如下:



自定义一个分类继承UIView
下面是.h文件

#import <UIKit/UIKit.h>

@interface ColorCircleView :
UIView

//数组里面装的是字典,,字典里有两个key -> strokeColor和precent

@property (nonatomic,assign)
NSArray *circleArray;

@end

.m文件

#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 = [CABasicAnimation
animationWithKeyPath:@"strokeEnd"];

pathAnimation.duration =
1.0;

pathAnimation.fromValue =
@(0);

pathAnimation.toValue =
@(1);

pathAnimation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseOut];

[self.shapeLayer
addAnimation:pathAnimation
forKey:@"strokeEnd"];

}];

}

- (void)setCircleArray:(NSArray *)circleArray

{

_circleArray = circleArray;

[selfinitType];

}

@end

以上便是全部,,如有更好的方法和建议,欢迎联系,,非常感谢!!!!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: