不同颜色之分段式圆环

 

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

标签： ios圆环 分段

2016-03-31 10:32 2889人阅读 评论(0) 收藏 举报

 分类：

一些实用tips（6） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

 

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

     直接上代码：

    #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 = [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