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