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

本文介绍了如何根据美工需求,使用iOS编程实现一个可自定义段数和颜色的圆环视图,用于展示资产占比。通过创建CAShapeLayer和UIBezierPath,并结合数组存储每段的占比和颜色信息,动态生成并动画展示圆环效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


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

      直接上代码:
     #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 -> strokeColorprecent

@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


以上便是全部,,如有更好的方法和建议,欢迎联系,,非常感谢!!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值