iOS - 关于百分比圆环的解读

前言:

百分比圆环几乎是所有项目，中都会有的。针对于下面的Demo,我们采取双圆的形式，进行百分比圆环的案例分析，并且封装后，以方便备用。

案例展示

yuanhuan.gif

在这当中，有以下几个难点，需要我们清楚:

• 1.画圆弧利用的是贝塞尔曲线，我们必须清楚显示圆环和辅助圆环的起点角度和终点角度。
• 2.显示圆环和辅助圆环的起点相同，终点不同
• 3.显示圆环和辅助圆环重合(半径相同，位置相同)，显示圆环的终点小于等于辅助圆环的终点

必须理解一下三幅图
第一幅图

第二幅图

通过上图,我们可以这样想，终点的弧度点 - 起点弧度点 = 整个圆弧的弧度 ，整个圆弧的弧度，我们可以把它看成0%~100%这样的百分比，例如:在用20%乘以整个圆弧的弧度这个就说明 ，在整个弧度中占有20%是多少。求出来之后在加上起点，就是显示圆的终点。

第三幅图

通过上幅图，我们要知道起点和终点是怎么平行在一条线上。

代码示例
ZYCircle.h

#import <UIKit/UIKit.h>

@interface ZYCircle : UIView
//起点 角度
@property(nonatomic) CGFloat startAngle;
//终点 角度
 @property(nonatomic)CGFloat endInnerAngle;
//线宽
@property(nonatomic)CGFloat lineWith;
//百分比数字
@property (nonatomic)CGFloat percentage;
//基准圆环颜色
@property(nonatomic,strong)UIColor *unfillColor;
//显示圆环颜色
@property(nonatomic,strong)UIColor *fillColor;
//中心数据显示标签
@property (nonatomic ,strong)UILabel *centerLable;

- (instancetype) initWithFrame:(CGRect)frame;

@end

ZYCircle.m
#import "ZYCircle.h"
#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/ 180)
@interface ZYCircle ()

@property(nonatomic) CGPoint CGPoinCerter;
@property(nonatomic) CGFloat endAngle;
@property(nonatomic) BOOL clockwise;

@end

@implementation ZYCircle
{
    CGFloat _radius;
}

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
if (self) {
    self.lineWith = 10.0;
    self.fillColor = [UIColor greenColor];
    self.unfillColor = [UIColor lightGrayColor];
    self.clockwise = YES;
    self.backgroundColor = [UIColor clearColor];
    self.percentage = 0;
    self.startAngle = 180;
    self.endAngle = 360;
}

return self;
}

#pragma mark setMethod
/**
 *  画图函数
 *
 *  @param rect rect description
 */
-(void)drawRect:(CGRect)rect{
    [self initData];
    [self drawMiddlecircle];
    [self drawOutCCircle];
}

-(void)initData
{
>
//中心标签设置
CGFloat center =MIN(self.bounds.size.height/2, self.bounds.size.width/2);
self.CGPoinCerter = CGPointMake(center, center);
self.centerLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 2*center, 2*center)];
self.centerLable.textAlignment=NSTextAlignmentCenter;
self.centerLable.backgroundColor=[UIColor clearColor];
self.centerLable.adjustsFontSizeToFitWidth = YES;
self.centerLable.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
self.contentMode = UIViewContentModeRedraw;
[self addSubview: self.centerLable];

//半径计算
_radius = MIN(self.bounds.size.height/2-self.lineWith/2, self.bounds.size.width/2-self.lineWith/2);
self.centerLable.font = [UIFont systemFontOfSize:_radius/3];
self.centerLable.text = [NSString stringWithFormat:@"%.1lf%%",self.percentage*100];
//起点与终点坐标
self.endInnerAngle = DEGREES_TO_RADIANS(self.endInnerAngle);
self.startAngle = DEGREES_TO_RADIANS(self.startAngle);
self.endAngle = self.percentage*(self.endInnerAngle - self.startAngle) + self.startAngle;

//0%标签
UILabel *zeroPercentLable = [[UILabel alloc]init];
zeroPercentLable.text = [NSString stringWithFormat:@"0%%"];
CGFloat zeroPercentLableX =_radius + _radius*cos(self.startAngle);
CGFloat zeroPercentLableY = _radius*sin(self.startAngle)+(self.startAngle>DEGREES_TO_RADIANS(180)?-_radius:_radius);
zeroPercentLable.frame = CGRectMake(zeroPercentLableX, zeroPercentLableY+self.lineWith, 2.1*_radius/7.5 + 15, 25);
zeroPercentLable.textAlignment = NSTextAlignmentCenter;
zeroPercentLable.font = [UIFont boldSystemFontOfSize:_radius/7.5 ];
zeroPercentLable.textColor = [UIColor orangeColor];
[self addSubview:zeroPercentLable];
//100%标签
UILabel *hundredPercentLable = [[UILabel alloc]init];
hundredPercentLable.text = [NSString stringWithFormat:@"100%%"];
CGFloat hundredPercentLableX =_radius + _radius*cos(self.endInnerAngle)-8;
CGFloat hundredPercentLableY = _radius*sin(self.endInnerAngle)+(self.endInnerAngle<DEGREES_TO_RADIANS(180)?-_radius:_radius);
hundredPercentLable.frame = CGRectMake(hundredPercentLableX, hundredPercentLableY+self.lineWith, 2.9*_radius/7.5 + 15, 25);
hundredPercentLable.textAlignment = NSTextAlignmentCenter;
hundredPercentLable.font = [UIFont boldSystemFontOfSize:_radius/7.5 ];
hundredPercentLable.textColor = [UIColor orangeColor];
[self addSubview:hundredPercentLable];

}

#pragma mark - 利用layer的 strokeEnd、strokeStart和lineWidth 属性添加CA动画
- (void)addAnimationOneOnLayer:(CAShapeLayer *)layer duration:(CFTimeInterval)duration
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @(0);
animation.toValue = @(1);
animation.duration = duration;
[layer addAnimation:animation forKey:nil];
}

/**
 *  显示圆环
 */
-(void )drawOutCCircle{
UIBezierPath *bPath = [UIBezierPath bezierPathWithArcCenter:self.CGPoinCerter radius:_radius startAngle:self.startAngle endAngle:self.endAngle clockwise:self.clockwise];
>
CAShapeLayer *layer =  [CAShapeLayer layer];
layer.lineWidth = self.lineWith;
layer.lineCap = kCALineCapRound;
layer.lineJoin = kCALineJoinRound;
layer.strokeColor = self.fillColor.CGColor;
layer.fillColor = nil;
layer.path = bPath.CGPath;
[self.layer addSublayer:layer];
>
[self addAnimationOneOnLayer:layer duration:1.0];
}
/**
 *  辅助圆环
 */
-(void)drawMiddlecircle{
UIBezierPath *cPath = [UIBezierPath bezierPathWithArcCenter:self.CGPoinCerter radius:_radius startAngle:self.startAngle endAngle:self.endInnerAngle clockwise:self.clockwise];
cPath.lineWidth=self.lineWith;
cPath.lineCapStyle = kCGLineCapRound;
cPath.lineJoinStyle = kCGLineJoinRound;
UIColor *color = self.unfillColor;
[color setStroke];
[cPath stroke];
}

用法
- (void)setCircle{

ZYCircle *circle = [[ZYCircle alloc] initWithFrame:CGRectMake(30, 20,SCREEN_WIDTH-60 , SCREEN_WIDTH-60)];
circle.percentage = 0.23;    //百分比数值
circle.lineWith = 30;       //线宽
circle.fillColor = [UIColor redColor];          //填充颜色
circle.unfillColor = [UIColor lightGrayColor];  //未填充颜色
circle.startAngle = 150;        //百分百的圆环起点
circle.endInnerAngle = 390;     //百分百的圆环终点
//  circle.centerLable.text = @"111"; //中心标签的显示数值，默认为百分数
      [self.displayView addSubview:circle];

 }

#pragma mark - 点击方法
- (IBAction)百分比圆环:(id)sender {
[self setCircle];
 }