圆形进度条，可设置内外环，多彩

最新推荐文章于 2021-08-31 21:20:11 发布
最新推荐文章于 2021-08-31 21:20:11 发布
阅读量253 收藏
点赞数

新建一个继承UIView类

.h文件

@interface MyProgressView : UIView


@property (strong,nonatomic) UILabel *textLabel;



@property (nonatomic) double progress;


@property (nonatomic) NSInteger showTextUI_APPEARANCE_SELECTOR;

@property (nonatomic) NSInteger roundedHeadUI_APPEARANCE_SELECTOR;

@property (nonatomic) NSInteger showShadowUI_APPEARANCE_SELECTOR;


@property (nonatomic) CGFloat thicknessRatioUI_APPEARANCE_SELECTOR;


/**

 *  设置内环和外环时使用

 */

@property (nonatomic, strong) UIColor*innerBackgroundColor UI_APPEARANCE_SELECTOR;

@property (nonatomic, strong) UIColor*outerBackgroundColor UI_APPEARANCE_SELECTOR;


@property (nonatomic, strong) UIFont *fontUI_APPEARANCE_SELECTOR;


/**

 *  只有一种颜色时使用

 */

@property (nonatomic, strong) UIColor*progressFillColor UI_APPEARANCE_SELECTOR;


@property (nonatomic, strong) UIColor*progressTopGradientColorUI_APPEARANCE_SELECTOR;

@property (nonatomic, strong) UIColor*progressBottomGradientColorUI_APPEARANCE_SELECTOR;


@property (strong,nonatomic) NSArray*colorArray;       //多彩时使用

@property (strong,nonatomic) NSArray*shadeArray;       //每个颜色处于的位置

@property (nonatomic,readonly) CGFloat *back;


/**

 *  设置多彩圆环

 *

 *  @param colorArray 颜色数组

 *  @param shadeArray 每个颜色处于的位置

 */

-(void)setColorArray:(NSArray *)colorArray shadeArray:(NSArray *)shadeArray;


.m文件

#import <math.h>


#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)


@interface MyProgressView ()


@property (nonatomic) UIBezierPath *path;

@property (nonatomic) CAShapeLayer *shapeLayer;

@property (nonatomic) UIBezierPath *path1;

@property (nonatomic) CAShapeLayer *shapeLayer1;


@property (strong,nonatomic) UIImageView*imageView;






@end


@implementation MyProgressView


+ (void)initialize

{

    if (self == [MyProgressView class])

    {

        id appearance = [self appearance];

        

        [appearance setShowText:NO];//用来控制是否显示显示label

        [appearance setRoundedHead:YES];//用来控制是否对进度两边进行处理

        [appearance setShowShadow:YES];//控制圆环进度条的样式

        

        [appearance setThicknessRatio:0.1f];//圆环进度条的宽度

        

        [appearance setInnerBackgroundColor:nil];

        [appearance setOuterBackgroundColor:nil];

        

//        [appearance setProgressFillColor:[UIColor redColor]];//整个进度条颜色

//        [appearance setProgressTopGradientColor:[UIColor greenColor]];//进度条前半部分颜色

//        [appearance setProgressBottomGradientColor:[UIColor redColor]];//进度条后半部分颜色

        [appearance setBackgroundColor:[UIColorclearColor]];

    }

}


- (void)drawRect:(CGRect)rect

{

    // Calculate position of the circle

    CGFloat progressAngle = _progress * 360.0 - 90;

    CGPoint center = CGPointMake(rect.size.width/ 2.0f, rect.size.height / 2.0f);

    CGFloat radius = MIN(rect.size.width, rect.size.height) / 2.0f;

    

    CGRect square;

    if (rect.size.width > rect.size.height)

    {

        square = CGRectMake((rect.size.width - rect.size.height) / 2.0, 0.0, rect.size.height, rect.size.height);

    }

    else

    {

        square = CGRectMake(0.0, (rect.size.height - rect.size.width) / 2.0, rect.size.width, rect.size.width);

    }

    

    //进度条宽度

    CGFloat circleWidth = radius * _thicknessRatio;

    CGContextRef context =UIGraphicsGetCurrentContext();

    CGContextSaveGState(context);

    

    if (_innerBackgroundColor)

    {

        //内环

        // Fill innerCircle with innerBackgroundColor

        UIBezierPath *innerCircle = [UIBezierPath bezierPathWithArcCenter:center

                                                                   radius:radius - circleWidth

                                                               startAngle:2*M_PI

                                                                 endAngle:0.0

                                                                clockwise:YES];

        

        [_innerBackgroundColor setFill];

        

        [innerCircle fill];

    }

    

    if (_outerBackgroundColor)

    {

        //外环

        // Fill outerCircle with outerBackgroundColor

        UIBezierPath *outerCircle = [UIBezierPath bezierPathWithArcCenter:center

                                                                   radius:radius

                                                               startAngle:0.0

                                                                 endAngle:2*M_PI

                                                                clockwise:NO];

        [outerCircle addArcWithCenter:center

                               radius:radius - circleWidth

                           startAngle:2*M_PI

                             endAngle:0.0

                            clockwise:YES];

        

        [_outerBackgroundColor setFill];

        

        [outerCircle fill];

    }

    

    if (_showShadow)

    {

        //圆环背景处理

        CGFloat locations[5] = { 0.0f, 0.33f,0.66f, 1.0f };

//                NSArray *gradientColors = @[

//                                            (id)[[UIColor colorWithWhite:0.3 alpha:0.5] CGColor],

//                                            (id)[[UIColor colorWithWhite:0.9 alpha:0.0] CGColor],

//                                            (id)[[UIColor colorWithWhite:0.9 alpha:0.0] CGColor],

//                                            (id)[[UIColor colorWithWhite:0.3 alpha:0.5] CGColor],

//                                            ];

        

        NSArray *gradientColors = @[

                                    (id)[[UIColor colorWithWhite:0.7 alpha:1] CGColor],

                                    (id)[[UIColor colorWithWhite:0.7 alpha:1] CGColor],

                                    (id)[[UIColor colorWithWhite:0.7 alpha:1] CGColor],

                                    (id)[[UIColor colorWithWhite:0.7 alpha:1] CGColor],

                                    ];

        

        CGColorSpaceRef rgb =CGColorSpaceCreateDeviceRGB();

        CGGradientRef gradient = CGGradientCreateWithColors(rgb, (__bridgeCFArrayRef)gradientColors, locations);

        CGContextDrawRadialGradient(context, gradient, center, radius - circleWidth, center, radius, 0);

        CGGradientRelease(gradient);

        CGColorSpaceRelease(rgb);

    }

    

    if (_showText)

    {

        if (!_progress) {

            return;

        }

        if ([self viewWithTag:5]) {

            [_textLabel removeFromSuperview];

        }

        //中间显示label

        _textLabel = [[UILabel alloc] init];

        //字符串处理

        NSString *str = [NSStringstringWithFormat:@"%0.2f%%\n收益率",_progress * 100.0];

        NSMutableAttributedString *progressStr = [[NSMutableAttributedString alloc] initWithString:str];

        //前6位字符  颜色

        [progressStr addAttribute:NSForegroundColorAttributeNamevalue:[UIColor redColor] range:NSMakeRange(0,6)];

        //第七位向后的3个字符 颜色

        [progressStr addAttribute:NSForegroundColorAttributeNamevalue:[UIColor blackColor] range:NSMakeRange(7,3)];

        [progressStr addAttribute:NSFontAttributeName value:[UIFontboldSystemFontOfSize:16.0] range:NSMakeRange(0,6)];

        [progressStr addAttribute:NSFontAttributeName value:[UIFontsystemFontOfSize:13] range:NSMakeRange(7, 3)];

        _textLabel.attributedText = progressStr;

        _textLabel.numberOfLines = 0;

        _textLabel.bounds = CGRectMake(0, 0, 100, 50);

        _textLabel.center =CGPointMake(self.bounds.size.width/2.0,self.bounds.size.height/2.0);

        _textLabel.tag = 5;

        _textLabel.textAlignment =NSTextAlignmentCenter;

        [self addSubview:_textLabel];

        

    }

    

    UIBezierPath *path = [UIBezierPathbezierPath];

    

    

    [path appendPath:[UIBezierPathbezierPathWithArcCenter:center

                                                    radius:radius

                                                startAngle:DEGREES_TO_RADIANS(-90)

                                                  endAngle:DEGREES_TO_RADIANS(progressAngle)

                                                 clockwise:YES]];

    

    if (_roundedHead)

    {

        //终点处理   也可以给终点放置一些图片等

        CGPoint point;

        point.x = (cos(DEGREES_TO_RADIANS(progressAngle)) * (radius - circleWidth/2)) + center.x;

        point.y = (sin(DEGREES_TO_RADIANS(progressAngle)) * (radius - circleWidth/2)) + center.y;

        

        [path addArcWithCenter:point

                        radius:circleWidth/2

                    startAngle:DEGREES_TO_RADIANS(progressAngle)

                      endAngle:DEGREES_TO_RADIANS(270.0 + progressAngle - 90.0)

                     clockwise:YES];

    }

    

    [path addArcWithCenter:center

                    radius:radius-circleWidth

                startAngle:DEGREES_TO_RADIANS(progressAngle)

                  endAngle:DEGREES_TO_RADIANS(-90)

                 clockwise:NO];

    //起始点添加分割线

//    UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(radius, 0, 1, circleWidth)];

//    lineView.backgroundColor = [UIColor whiteColor];

//    [self addSubview:lineView];

    

    if (_roundedHead)

    {

        //起始点处理

        //        CGPoint point;

        //        point.x = (cos(DEGREES_TO_RADIANS(-90)) * (radius - circleWidth/2)) + center.x;

        //        point.y = (sin(DEGREES_TO_RADIANS(-90)) * (radius - circleWidth/2)) + center.y;

        //

        //        [path addArcWithCenter:point

        //                        radius:circleWidth/2

        //                    startAngle:DEGREES_TO_RADIANS(90)

        //                      endAngle:DEGREES_TO_RADIANS(-90)

        //                     clockwise:NO];

    }

    

    [path closePath];

    //进度条颜色处理

    if (_progressFillColor)

    {

        [_progressFillColor setFill];

        [path fill];

    }

    else if (_progressTopGradientColor &&_progressBottomGradientColor)

    {

        [path addClip];

        

        NSArray *backgroundColors = @[

                                      (id)[_progressTopGradientColor CGColor],

                                      (id)[_progressBottomGradientColor CGColor],

                                      ];

        

        CGFloat backgroudColorLocations[2] = {0.0f,1.0f};

        

        CGColorSpaceRef rgb =CGColorSpaceCreateDeviceRGB();

        CGGradientRef backgroundGradient = CGGradientCreateWithColors(rgb, (__bridgeCFArrayRef)(backgroundColors), backgroudColorLocations);

        CGContextDrawLinearGradient(context,

                                    backgroundGradient,

                                    CGPointMake(0.0f, square.origin.y),

                                    CGPointMake(0.0f, square.size.height),

                                    0);

        CGGradientRelease(backgroundGradient);

        CGColorSpaceRelease(rgb);

    }

    else

    {

        [path addClip];

        

        NSMutableArray *backgroundColors = [[NSMutableArray alloc] init];

        for (UIColor *color in _colorArray)

        {

            [backgroundColors addObject:(id)[color CGColor]];

        }

        CGColorSpaceRef rgb =CGColorSpaceCreateDeviceRGB();

        CGGradientRef backgroundGradient = CGGradientCreateWithColors(rgb, (__bridgeCFArrayRef)(backgroundColors), _back);

        CGContextDrawLinearGradient(context,

                                    backgroundGradient,

                                    CGPointMake(0.0f, square.origin.y),

                                    CGPointMake(0.0f, square.size.height),

                                    0);

        CGGradientRelease(backgroundGradient);

        CGColorSpaceRelease(rgb);

    }

    CGContextRestoreGState(context);

}


#pragma mark - Setter

//设置进度

- (void)setProgress:(double)progress

{

    _progress = MIN(1.0, MAX(0.0, progress));

    

    [self setNeedsDisplay];

}


#pragma mark - UIAppearance


- (void)setShowText:(NSInteger)showText

{

    _showText = showText;

    

    [self setNeedsDisplay];

}


- (void)setRoundedHead:(NSInteger)roundedHead

{

    _roundedHead = roundedHead;

    

    [self setNeedsDisplay];

}


- (void)setShowShadow:(NSInteger)showShadow

{

    _showShadow = showShadow;

    

    [self setNeedsDisplay];

}

//进度条宽度与半径之比

- (void)setThicknessRatio:(CGFloat)thickness

{

    _thicknessRatio = MIN(MAX(0.0f, thickness),1.0f);

    

    [self setNeedsDisplay];

}

//内环

- (void)setInnerBackgroundColor:(UIColor*)innerBackgroundColor

{

    _innerBackgroundColor = innerBackgroundColor;

    

    [self setNeedsDisplay];

}

//外环

- (void)setOuterBackgroundColor:(UIColor*)outerBackgroundColor

{

    _outerBackgroundColor = outerBackgroundColor;

    

    [self setNeedsDisplay];

}

//进度条颜色

- (void)setProgressFillColor:(UIColor*)progressFillColor

{

    _progressFillColor = progressFillColor;

    

    [self setNeedsDisplay];

}

//进度条前半部分颜色

- (void)setProgressTopGradientColor:(UIColor*)progressTopGradientColor

{

    _progressTopGradientColor = progressTopGradientColor;

    

    [self setNeedsDisplay];

}

//进度条后半部分颜色

- (void)setProgressBottomGradientColor:(UIColor*)progressBottomGradientColor

{

    _progressBottomGradientColor = progressBottomGradientColor;

    

    [self setNeedsDisplay];

}


-(void)setColorArray:(NSArray *)colorArray

{

    _colorArray = colorArray;

    

    [self setNeedsDisplay];

}


-(void)setShadeArray:(NSArray *)shadeArray

{

    _shadeArray = shadeArray;

    

    [self setNeedsDisplay];

}


-(void)setColorArray:(NSArray *)colorArray shadeArray:(NSArray *)shadeArray

{

    _colorArray = colorArray;

    _shadeArray = shadeArray;

    _back = (CGFloat*)malloc(shadeArray.count*sizeof(CGFloat));

    for (int i=0; i<shadeArray.count; i++)

    {

        _back[i] = [_shadeArray[i] floatValue];

    }

    [self setNeedsDisplay];

}


其中有时候会碰到一些需要一个小点或者在进度终点做一些处理，代码里面都有说明


00烽火连城00
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-native-dashed-progress：动画的圆形进度条，适用于ios和android
02-10
React本机-虚线-进展 React Native组件绘制圆形虚线进度条。 例 安装 安装react-native-dashed-progress组件和react-native-svg： npm i --save react-native-dashed-progress react-native-svg 如果您使用react-native> = 0.60，请跳过步骤2 链接SVG的本机代码： react-native link react-native-svg 用法 import { DashedProgress } from 'react-native-dashed-progress' ; < DashedProgress fill = { 20 } countBars = { 50 } radius = { 50 } strokeColor = "#00
iOS仿keep5.3.0版本健身等级界面实现自定义UITableViewCell显示进度效果
nanquan11的博客
12-21 1051
我们继续上面那篇来，在实现了头部图片下拉纵向拉伸效果后，紧接着就是这个页面的核心，当前进度占总进度的比例效果显示。按照我的需求就是下面这个图的样子。左侧进度和右侧进度说明整体被封装在一个自定义的TableViewCell里，如下图所示。为了方便控制，我在写的时候把这个自定义cell分为了左右两部分，即左面白色背景部分和右面灰色背景部分。右面灰色背景部分就是普通的空间堆叠，这里不具体阐述，接下来我们讲
ReactNative组件用于利用ReactART创建动画圆形进度条
08-10
React Native 组件用于利用ReactART创建动画、圆形进度条
Echarts 环形进度条 环形图嵌套
不同场景下的水平居中
08-31 2681
效果图如下 其他效果： 效果1：https://blog.csdn.net/weixin_41192581/article/details/104840199 效果2：https://www.cnblogs.com/myprogramer/p/12509764.html 注意： （1）最内层背景色、白色内框、进度条、外框，都是在 series 里设置 type为pie 的canvas （2）最内层背景色 和 背景色上的文字用 z: 2 和 zlevel: 100 提升层级 文字在graphic中设置 （
Unity+UGUI 圆形进度条
07-12
UGUI实现的圆形进度条 可用于进度条显示 也可用于拖拽验证码的功能
Android编程之ProgressBar圆形进度条颜色设置方法
08-31
主要介绍了Android编程之ProgressBar圆形进度条颜色设置方法,涉及ProgressBar布局及属性设置相关操作技巧,需要的朋友可以参考下
Android自定义漂亮的圆形进度条
01-05
这几天对Android中实现画圆弧及圆弧效果中所实现的效果进行了修改，改为进度圆心进度条，效果如图所示 TasksCompletedView.java 代码如下 import android.content.Context; import android.content.res....
圆形进度条
12-11
圆形进度条需要自定义控件来实现 ，简单来说，只需要继承View 重写 onMeasure() 和 onLayout() 方法 重新绘制即可 ，其中也用到了自定义属性。可以直接拿来使用
React Native实现圆形进度条
z372574152的博客
04-12 3442
React Native实现自定义的圆形进度条动画，主要需要用到Animated和react native svg这个插件。先看看最终实现的效果： 大致思路如下： 1. 使用Svg创建画布，指定画布的宽高； 2. 创建外层倒计时Circle，这里需要使用两个完全重合的Circle叠起来实现，这两个Circle都只保留边框，其中一个Circle显示为进度条背景色（上图中的灰色），另一个Ci...
DashedCircularProgress环形虚线进度条
04-29
DashedCircularProgress环形虚线进度条
环形进度条封装
10-27
对环形进度条进行了一定的封装，方便大家的使用
带进度的圆形进度条,可显示百分比
06-12
带进度的圆形进度条,可显示百分比。可以在统计控球率的时候使用
可分割的环形进度条
06-13
可分割的环形进度条，适合倒计时等场景，已经定义好，只需把文件拷入即可使用
html5＋css3 svg环形进度 多嵌套
03-23
对于常用的环形进度条，网络上大多都是使用DIV，canvas 本人研究了这几种实现，最终采用SVG实现。 DIV环形进度条有毛边，而且无法多环嵌套。 canvas不适用移动段，有毛边。 本案例采用矢量图svg，完美。 10分良心分。有不懂的可以发邮件[email protected]。
环形嵌套进度条（带百分比）
qq_42506969的博客
01-12 1118
效果图如下： 主要思路：多个echarts饼图嵌套 其中，刻度的实现，想破了脑袋，想了这个方法，好在也是实现了，如果有更好的方法，欢迎分享交流。 下面直接上代码 var myChart = echarts.init(document.getElementById('main')); let resData = [{ name: 'CPP', value: 80 }, { name: 'Shared', value: 40 }, { name: 'Exclusive', value: 60 }]
react-native 圆弧拖动进度条实现
否命题的博客
04-09 2747
先上效果图 因为需求需要实现这个效果图 非原生实现， 难点1：绘制 使用svg 难点2：点击事件的处理 难点3：封装 由于绘制需要是使用svg 此处自行百度 按照svg以及api 教学 视图代码块 render() { return ( &lt;View pointerEvents={'box-only'} //事件处理 ...
直播代码React Native实现圆形进度条
云豹网络科技
06-16 325
大致思路如下： 使用Svg创建画布，指定画布的宽高； 创建外层倒计时Circle，这里需要使用两个完全重合的Circle叠起来实现，这两个Circle都只保留边框，其中一个Circle显示为进度条背景色（上图中的灰色），另一个Circle显示为进度条的前景色（上图的绿色）。而且由于Svg采用的是渲染叠加图层的方式，所以下层的图形会叠在上层图形之上。因此作为背景的Circle需要放置在上方。 const outerCircleCommonConfig = { fill: 'none',
react-native 圆形进度条
hahahhahahahha123456的博客
06-21 3440
项目中录制视频需要用到圆形进度条，从网上搜了很多，终于发现一个好用的组件react-native-progress，这个组件支持线形和圆形多种形式的进度条，先来看看效果图~官方效果图.gif这个组件有四种进度条：Progress.BarProgress.PieProgress.CircleProgress.CircleSnail今天主要结合自己的项目需求讲下圆形进度条Progress.Circle...
cc.ProgressTimer 圆形进度条如何设置成一般游戏里loading的转动方式
最新发布
06-13
8. 在 cc.ProgressTimer 组件中通过 setBarChangeRate() 方法设置进度条的改变率，使其只在 y 轴方向上变化，以呈现出圆形进度条的效果。 9. 在 cc.ProgressTimer 组件中使用 cc.Animation 组件中创建的动画，通过 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值