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

最新推荐文章于 2021-08-31 21:20:11 发布
最新推荐文章于 2021-08-31 21:20:11 发布
阅读量7.2k 收藏 8
点赞数 1
分类专栏： iOS 文章标签： ios ios开发 界面 圆形进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a174455171/article/details/50387934
版权

今天做一个健身的项目，客户需要一个圆形的进度条来查看个人的运动记录等，做了一些功课之后贴出代码大家一起分享下


代码比较长，多，在这里我先放上demo下载地址  http://download.csdn.net/detail/a174455171/9517479

新建一个继承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 *innerBackgroundColorUI_APPEARANCE_SELECTOR;

@property (nonatomic,strong) UIColor *outerBackgroundColorUI_APPEARANCE_SELECTOR;


@property (nonatomic,strong) UIFont *fontUI_APPEARANCE_SELECTOR;


/**

 *  只有一种颜色时使用

 */

@property (nonatomic,strong) UIColor *progressFillColorUI_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 == [MyProgressViewclass])

    {

        id appearance = [selfappearance];

        

        [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 = [UIBezierPathbezierPathWithArcCenter:center

                                                                   radius:radius - circleWidth

                                                               startAngle:2*M_PI

                                                                 endAngle:0.0

                                                                clockwise:YES];

        

        [_innerBackgroundColorsetFill];

        

        [innerCircle fill];

    }

    

    if (_outerBackgroundColor)

    {

        //外环

        // Fill outerCircle with outerBackgroundColor

        UIBezierPath *outerCircle = [UIBezierPathbezierPathWithArcCenter: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];

        

        [_outerBackgroundColorsetFill];

        

        [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)[[UIColorcolorWithWhite:0.7alpha:1] CGColor],

                                    (id)[[UIColorcolorWithWhite:0.7alpha:1] CGColor],

                                    (id)[[UIColorcolorWithWhite:0.7alpha:1] CGColor],

                                    (id)[[UIColorcolorWithWhite:0.7alpha: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 ([selfviewWithTag:5]) {

            [_textLabelremoveFromSuperview];

        }

        //中间显示label

        _textLabel = [[UILabelalloc] init];

        //字符串处理

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

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

        //前6位字符 颜色

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

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

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

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

        [progressStr addAttribute:NSFontAttributeNamevalue:[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)

    {

        [_progressFillColorsetFill];

        [path fill];

    }

    elseif (_progressTopGradientColor &&_progressBottomGradientColor)

    {

        [path addClip];

        

        NSArray *backgroundColors = @[

                                      (id)[_progressTopGradientColorCGColor],

                                      (id)[_progressBottomGradientColorCGColor],

                                      ];

        

        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 = [[NSMutableArrayalloc] init];

        for (UIColor *colorin _colorArray)

        {

            [backgroundColors addObject:(id)[colorCGColor]];

        }

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

    

    [selfsetNeedsDisplay];

}


#pragma mark - UIAppearance


- (void)setShowText:(NSInteger)showText

{

    _showText = showText;

    

    [selfsetNeedsDisplay];

}


- (void)setRoundedHead:(NSInteger)roundedHead

{

    _roundedHead = roundedHead;

    

    [selfsetNeedsDisplay];

}


- (void)setShowShadow:(NSInteger)showShadow

{

    _showShadow = showShadow;

    

    [selfsetNeedsDisplay];

}

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

- (void)setThicknessRatio:(CGFloat)thickness

{

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

    

    [selfsetNeedsDisplay];

}

//内环

- (void)setInnerBackgroundColor:(UIColor *)innerBackgroundColor

{

    _innerBackgroundColor = innerBackgroundColor;

    

    [selfsetNeedsDisplay];

}

//外环

- (void)setOuterBackgroundColor:(UIColor *)outerBackgroundColor

{

    _outerBackgroundColor = outerBackgroundColor;

    

    [selfsetNeedsDisplay];

}

//进度条颜色

- (void)setProgressFillColor:(UIColor *)progressFillColor

{

    _progressFillColor = progressFillColor;

    

    [selfsetNeedsDisplay];

}

//进度条前半部分颜色

- (void)setProgressTopGradientColor:(UIColor *)progressTopGradientColor

{

    _progressTopGradientColor = progressTopGradientColor;

    

    [selfsetNeedsDisplay];

}

//进度条后半部分颜色

- (void)setProgressBottomGradientColor:(UIColor *)progressBottomGradientColor

{

    _progressBottomGradientColor = progressBottomGradientColor;

    

    [selfsetNeedsDisplay];

}


-(void)setColorArray:(NSArray *)colorArray

{

    _colorArray = colorArray;

    

    [selfsetNeedsDisplay];

}


-(void)setShadeArray:(NSArray *)shadeArray

{

    _shadeArray = shadeArray;

    

    [selfsetNeedsDisplay];

}


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

    }

    [selfsetNeedsDisplay];

}


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


龙龙-iOS
关注
专栏目录
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
外边框动态旋转
WebDestiny的博客
09-16 752
效果图(由于是截图，看不出动态效果): 代码： 图片素材： <template> <div> <div class="box"> <div class="ring-outer"></div> <div class="ring-inner"></div> ...
iOS仿keep5.3.0版本健身等级界面实现自定义UITableViewCell显示进度效果
nanquan11的博客
12-21 1083
我们继续上面那篇来，在实现了头部图片下拉纵向拉伸效果后，紧接着就是这个页面的核心，当前进度占总进度的比例效果显示。按照我的需求就是下面这个图的样子。左侧进度和右侧进度说明整体被封装在一个自定义的TableViewCell里，如下图所示。为了方便控制，我在写的时候把这个自定义cell分为了左右两部分，即左面白色背景部分和右面灰色背景部分。右面灰色背景部分就是普通的空间堆叠，这里不具体阐述，接下来我们讲
ReactNative组件用于利用ReactART创建动画圆形进度条
08-10
React Native 组件用于利用ReactART创建动画、圆形进度条
Echarts 环形进度条 环形图嵌套
不同场景下的水平居中
08-31 2839
效果图如下 其他效果： 效果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中设置 （
Android编程之ProgressBar圆形进度条颜色设置方法
01-05
你是不是还在为设置进度条的颜色而烦恼呢……别着急，且看如下如何解决。 ProgressBar分圆形进度条和水平进度条 我这里就分享下如何设置圆形进度条的颜色吧，希望对大家会有帮助。 源码如下： 布局文件代码： <...
Android实现渐变圆环、圆形进度条效果
08-26
进度条可以使用 Paint 类的 setColor 方法设置颜色，并使用 Canvas 的 drawLine 方法绘制进度条。 使用 Matrix 进行图形变换 Android 提供了 Matrix 类，可以对图形进行旋转、缩放、偏移和扭曲等变换操作。使用 ...
Unity+UGUI 圆形进度条
07-12
本教程将详细介绍如何使用Unity和UGUI来创建一个圆形进度条，并探讨其在进度指示和拖拽验证码功能上的应用。 一、UGUI基础知识 UGUI是Unity 4.6版本引入的新的UI系统，它基于Canvas进行布局，通过 RectTransform ...
圆形进度条
12-11
通过查看和理解这段代码，开发者可以学习到如何创建一个自定义的、可配置的圆形进度条，这对于提高Android UI设计的技能和效率非常有帮助。 总结来说，创建一个圆形进度条涉及到以下几个关键知识点： - 自定义View...
React Native实现圆形进度条
z372574152的博客
04-12 3643
React Native实现自定义的圆形进度条动画，主要需要用到Animated和react native svg这个插件。先看看最终实现的效果： 大致思路如下： 1. 使用Svg创建画布，指定画布的宽高； 2. 创建外层倒计时Circle，这里需要使用两个完全重合的Circle叠起来实现，这两个Circle都只保留边框，其中一个Circle显示为进度条背景色（上图中的灰色），另一个Ci...
环形进度条封装
10-27
对环形进度条进行了一定的封装，方便大家的使用
DashedCircularProgress环形虚线进度条
04-29
DashedCircularProgress环形虚线进度条
react-native 圆弧拖动进度条实现的示例代码
08-27
本篇文章主要介绍了react-native 圆弧拖动进度条实现的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
可分割的环形进度条
06-13
可分割的环形进度条，适合倒计时等场景，已经定义好，只需把文件拷入即可使用
环形嵌套进度条（带百分比）
qq_42506969的博客
01-12 1291
效果图如下： 主要思路：多个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 2880
先上效果图 因为需求需要实现这个效果图 非原生实现， 难点1：绘制 使用svg 难点2：点击事件的处理 难点3：封装 由于绘制需要是使用svg 此处自行百度 按照svg以及api 教学 视图代码块 render() { return ( &lt;View pointerEvents={'box-only'} //事件处理 ...
UI控件--环形进度条（）
小白的秘密空间
08-26 437
1.添加一个对象 var indicator:UIActivityIndicatorView! 根据属性初始化 indicator = UIActivityIndicatorView(style: .whiteLarge) //初始化环形进度条，并设置环形进度条的样式为大白 indicator.center = CGPoint(x: 160, y: 120...
element-ui 修改环形进度条文字颜色
m0_46807881的博客
05-27 5194
如图所示，elementUI的环形进度条文字颜色是默认的，如何修改里面的文字呢； 解决方法：css穿透，点击F12检查我们修改的元素， 在style样式中修改：父元素（要修改元素的父元素）>>> 修改的元素（这里就是.el-progress__text） .left_pie_a >>> .el-progress__text{ color:#FCC81D }; sass可以用deep ...
AndroidUI系列 - View实现圆形进度条
SingleShu的博客
06-10 2012
我就不从canvas和paint开始说了，onMeasure,onLayout,onDraw这些方法的介绍和源码解析。网上一搜很多。一篇解释不清楚，多看几篇。话不多说了，先看看效果吧。做成gif显示会有问题。我们先来分析一下需要什么数据、 1、需要一个进度 2、需要进度条基本信息，颜色，宽度，大小 3、需要字体大小，颜色那么就来看看具体逻辑。package com.example.admini
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值