iOS--圆环进度条

PercentCircle
名字很土，实现简单

• OC

//
//  PercentCircle.m
//  ZLingyi
//
//  Created by Leopard on 15/5/13.
//  Copyright (c) 2015年 Leopard. All rights reserved.
//

#define   pi 3.14159265358979323846
#define   DEGREES_TO_RADIANS(degrees)  ((pi * (degrees))/ 180)

#import "PercentCircle.h"

@implementation PercentCircle {
    CGFloat _width;
    CGFloat _height;
    CGFloat _percent;
    CGColorRef _bgStrokeColor;
    CGColorRef _bgFillColor;
    CGColorRef _strokeColor;
    CGColorRef _fillColor;
    CGFloat _lineWidth;
}
- (instancetype)initWithFrame:(CGRect)frame percent:(CGFloat)percent color:(CGColorRef )color {
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        _percent = percent/100.0;
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame percent:(CGFloat)percent BgStrokeColor:(CGColorRef)bgStrokeColor StrokeColor:(CGColorRef)strokeColor LineWidth:(CGFloat)lineWidth {
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        _bgStrokeColor = bgStrokeColor;
        _strokeColor = strokeColor;
        _percent = percent/100.0;
        _lineWidth = lineWidth;
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame percent:(CGFloat)percent BgStrokeColor:(CGColorRef)bgStrokeColor BgFillColor:(CGColorRef)bgFillColor StrokeColor:(CGColorRef)strokeColor FillColor:(CGColorRef)fillColor LineWidth:(CGFloat)lineWidth {
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        _bgStrokeColor = bgStrokeColor;
        _bgFillColor = bgFillColor;
        _strokeColor = strokeColor;
        _fillColor = fillColor;
        _percent = percent/100.0;
        _lineWidth = lineWidth;
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    _width = rect.size.width;
    _height = rect.size.height;
    
    [self setClearsContextBeforeDrawing: YES];
    
    for (UIView *vi in self.subviews) {
        [vi removeFromSuperview];
    }
    
    CGFloat totalAngel = 360;
    if (_percent > 1.0) {
        _percent = 1.0;
    }
    
    CGFloat curAngel = totalAngel * _percent;
    
    // 贝塞尔曲线(创建一个圆)
    UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width*0.5, rect.size.height *0.5)
                                                         radius:_width *0.49
                                                     startAngle:DEGREES_TO_RADIANS(-90)
                                                       endAngle:DEGREES_TO_RADIANS(270)
                                                      clockwise:YES];
    
    // 创建一个shapeLayer
    CAShapeLayer *layer1 = [CAShapeLayer layer];
    layer1.frame         = CGRectMake(0, 0, _width, _height);   // 与showView的frame一致
    layer1.strokeColor   = _bgStrokeColor;                      // 边缘线的颜色
    layer1.fillColor     = [[UIColor clearColor] CGColor];      // 闭环填充的颜色
    layer1.path          = path1.CGPath;                        // 从贝塞尔曲线获取到形状
    layer1.lineWidth     = _lineWidth;                          // 线条宽度
    layer1.strokeStart   = 0.0f;
    layer1.strokeEnd     = 1.0f;
    [self.layer addSublayer:layer1];
    
    UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width*0.5, rect.size.height *0.5)
                                                         radius:_width *0.49
                                                     startAngle:DEGREES_TO_RADIANS(-90)
                                                       endAngle:DEGREES_TO_RADIANS(curAngel-90)
                                                      clockwise:YES];
    
    CAShapeLayer *layer2 = [CAShapeLayer layer];
    layer2.frame         = CGRectMake(0, 0, _width, _height);
    layer2.strokeColor   = _strokeColor;
    layer2.fillColor     = [[UIColor clearColor] CGColor];
    layer2.path          = path2.CGPath;
    layer2.lineWidth     = _lineWidth;
    layer2.strokeStart   = 0.0f;
    layer2.strokeEnd     = 1.0f;
    [self.layer addSublayer:layer2];
    
    // 给这个layer添加动画效果
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 0.6;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [layer2 addAnimation:pathAnimation forKey:nil];
}

@end

• swift

//
//  PercentCircle.swift
//  IwownCare
//
//  Created by A$CE on 2017/8/7.
//  Copyright © 2017年 Leopard. All rights reserved.
//

import UIKit

let pi = 3.14159265358979323846
public func DEGREES_TO_RADIANS(degrees: CGFloat) -> CGFloat{
    return CGFloat((pi * Double(degrees)) / 180)
}

class PercentCircle: UIView {

    var _width:CGFloat = 0
    var _height:CGFloat = 0
    var _percent:CGFloat = 0
    var _lineWidth:CGFloat = 0
    var _bgStrokeColor:CGColor? = nil
    var _bgFillColor:CGColor? = nil
    var _strokeColor:CGColor? = nil
    var _fillColor:CGColor? = nil
    
    public static func defaultCicle(percent: Int, lineWidth: CGFloat) -> PercentCircle{
        let pcObj = PercentCircle.init()
        pcObj.backgroundColor = UIColor.white
        pcObj._percent = CGFloat(percent) * CGFloat(0.01)
        pcObj._lineWidth = lineWidth
        pcObj._bgStrokeColor = UIColor.black.cgColor
        pcObj._bgFillColor = UIColor.yellow.cgColor
        pcObj._strokeColor = UIColor.red.cgColor
        pcObj._fillColor = UIColor.blue.cgColor
        return pcObj
    }
    
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
        _width = rect.size.width
        _height = rect.size.height
        
        self.clearsContextBeforeDrawing = true
        
        for vi in self.subviews {
            vi.removeFromSuperview()
        }
        
        let totalAngel:CGFloat = 360
        if (_percent > 1.0) {
            _percent = 1.0
        }
        
        let curAngel:CGFloat = totalAngel * _percent
        
        // 贝塞尔曲线(创建一个圆)
        let point:CGPoint = CGPoint(x:rect.size.width * CGFloat(0.5), y: rect.size.height * CGFloat(0.5))
        let radius:CGFloat = _width * CGFloat(0.49)
        let startAngle = DEGREES_TO_RADIANS(degrees: -90)
        let endAngle = DEGREES_TO_RADIANS(degrees: 270)
        let path1:UIBezierPath = UIBezierPath.init(arcCenter: point, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
       
        let layer1:CAShapeLayer = CAShapeLayer.init()                   // 创建一个shapeLayer
        layer1.frame = CGRect(x:0, y:0, width:_width, height:_height)   // 与showView的frame一致
        layer1.strokeColor   = _bgStrokeColor                           // 背景边缘线的颜色
        layer1.fillColor     = UIColor.clear.cgColor                    // 闭环填充的颜色
        layer1.path          = path1.cgPath                             // 从贝塞尔曲线获取到形状
        layer1.lineWidth     = _lineWidth                               // 线条宽度
        layer1.strokeStart   = 0.0
        layer1.strokeEnd     = 1.0
        self.layer.addSublayer(layer1)
        
        // 贝塞尔曲线(创建另一个圆)
        let point2:CGPoint = CGPoint(x:rect.size.width * CGFloat(0.5), y: rect.size.height * CGFloat(0.5))
        let radius2:CGFloat = _width * CGFloat(0.49)
        let startAngle2 = DEGREES_TO_RADIANS(degrees: -90)
        let endAngle2 = DEGREES_TO_RADIANS(degrees: curAngel-90)
        let path2:UIBezierPath = UIBezierPath.init(arcCenter: point2, radius: radius2, startAngle: startAngle2, endAngle: endAngle2, clockwise: true)

        let layer2:CAShapeLayer = CAShapeLayer.init()
        layer2.frame = CGRect(x:0, y:0, width:_width, height:_height)
        layer2.strokeColor   = _strokeColor
        layer2.fillColor     = UIColor.clear.cgColor
        layer2.path          = path2.cgPath
        layer2.lineWidth     = _lineWidth
        layer2.strokeStart   = 0.0
        layer2.strokeEnd     = 1.0
        self.layer.addSublayer(layer2)
        
        let pathAnimation:CABasicAnimation = CABasicAnimation.init(keyPath: "strokeEnd")
        pathAnimation.duration = 0.6
        pathAnimation.fromValue = NSNumber.init(value: 0.0)
        pathAnimation.toValue = NSNumber.init(value: 1.0)
        layer2.add(pathAnimation, forKey: nil)
    }
}