iOS 半圆弧进度条

1.效果图

image.png

2.代码

.h

//  Created by 胡锦涛 on 2021/10/28.
//

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface ArcLineView : UIView
//起始分值
- (void)setStarScore:(CGFloat)starScore title:(NSString *)title;
@end

NS_ASSUME_NONNULL_END

.m

//
//  ArcLineView.m
//  Decorate
//
//  Created by 胡锦涛 on 2021/10/28.
// 初始化只需设置分数(0~1)即可

#import "ArcLineView.h"
#import "PunchCard.h"
#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)//角都转弧度

#define ANGLE 20 //没份20度 共220度


@interface ArcLineView()
///  <#标题#>
@property (nonatomic, strong) UILabel * scoreLabel ;
/// <#数据源#>
@property (nonatomic, strong) NSMutableArray * labelArray ;
/// <#数据源#>
@property (nonatomic, strong) NSMutableArray * titleArray ;
/// 标题
@property (nonatomic, strong) NSString * title ;
@end

@implementation ArcLineView
{
    CGFloat _starScore ;
}
- (void)drawRect:(CGRect)rect {
    self.backgroundColor = [UIColor whiteColor];
    //设置圆弧的半径
    CGFloat radius =  rect.size.width/2;
    //设置圆弧的圆心
    CGPoint center = CGPointMake(radius, radius);

    //背景线条
    CGFloat startAngleBag = DEGREES_TO_RADIANS(165);
    CGFloat endAngleBag = DEGREES_TO_RADIANS(165) + DEGREES_TO_RADIANS(210);
    UIBezierPath *pathBag = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 6 startAngle:startAngleBag endAngle:endAngleBag clockwise:YES];
    pathBag.lineWidth = 12;
    pathBag.lineCapStyle = kCGLineJoinRound;
    [[UIColor lightGrayColor] set];
    [pathBag stroke];
    //显示的进度条
    
    CGFloat startAngle = DEGREES_TO_RADIANS(165);
    CGFloat endAngle = DEGREES_TO_RADIANS(165) + DEGREES_TO_RADIANS(210)*_starScore;
    if (_starScore >= 0.6) {
        
        endAngle = DEGREES_TO_RADIANS(165) + DEGREES_TO_RADIANS(210)*(_starScore-0.5)*2;
    } else {
        endAngle = DEGREES_TO_RADIANS(165) + DEGREES_TO_RADIANS(210)*(_starScore/0.6)*0.2;
        
    }
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 6 startAngle:startAngle endAngle:endAngle clockwise:YES];
    
    path.lineWidth = 12;
    
    path.lineCapStyle = kCGLineJoinRound;
    
    [HKHexString(@"#2e99a4") set];
    
    [path stroke];
    
    
    
    //创建文字说明
    
    if (!self.labelArray.count) {
        
        for (int i = 0; i < self.titleArray.count; i++) {
            
            [self creatLabel:self.titleArray[i] withScore:i];
            
        }
        
        self.scoreLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
        
        self.scoreLabel.center = CGPointMake(center.x, center.y-10);
        
        self.scoreLabel.textAlignment = NSTextAlignmentCenter;
        
        self.scoreLabel.font = [UIFont systemFontOfSize:27];
        
        self.scoreLabel.text = _title == nil || [_title isEqualToString:@""] ? @"20 / 26" : _title;
        
        self.scoreLabel.textColor = HKHexString(@"#222222");
        
        [self addSubview:self.scoreLabel];
        
        
        
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 110, 50)];
        
        label.center = CGPointMake(self.scoreLabel.center.x, center.y+20);
        
        label.text = @"打卡人数 / 应到人数";
        
        label.font = [UIFont systemFontOfSize:12];
        
        label.textColor = HKHexString(@"#666666");
        
        label.textAlignment = NSTextAlignmentCenter;
        
        [self addSubview:label];
        
    }
    
}




//起始分值

- (void)setStarScore:(CGFloat)starScore title:(NSString *)title {
    
    _starScore = starScore;
    _title = title;
    //当下载进度改变时，手动调用重绘方法
    [self setNeedsDisplay];
}




//创建文字说明 label

- (void)creatLabel:(NSString *)title withScore:(CGFloat)index{
    
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 23, 15)];
    
    label.font = [UIFont systemFontOfSize:10];
    
    label.textAlignment = NSTextAlignmentCenter;
    
    label.hidden = YES;
    
    label.text = title;
    
    label.textColor = [UIColor blackColor];
    
    [self addSubview:label];
    
    CGFloat endAngle = index*ANGLE-200+10;
    
    label.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(endAngle)+M_PI_2);//label 旋转
    
    
    
    CGSize size = self.frame.size;
    
    CGFloat  centerY = size.width/2 - (size.width/2-20)*sin(DEGREES_TO_RADIANS(index*ANGLE-10));
    
    CGFloat centerX = size.width/2 - (size.width/2-20)*cos(DEGREES_TO_RADIANS(index*ANGLE-10));
    
    label.center = CGPointMake(centerX, centerY);
    
    
    
    [self.labelArray addObject:label];
    
}



#pragma mark - lazy loading

- (NSMutableArray *)labelArray {
    
    if (!_labelArray) {
        
        _labelArray = [NSMutableArray arrayWithCapacity:0];
        
    }
    
    return _labelArray;
    
}

- (NSMutableArray *)titleArray {//分值对应等级
    
    if (!_titleArray) {
        
        _titleArray = [NSMutableArray arrayWithCapacity:0];
        
        [_titleArray addObject:@"0"];
        
        [_titleArray addObject:@"一般"];
        
        [_titleArray addObject:@"60"];
        
        [_titleArray addObject:@"中等"];
        
        [_titleArray addObject:@"70"];
        
        [_titleArray addObject:@"良好"];
        
        [_titleArray addObject:@"80"];
        
        [_titleArray addObject:@"优秀"];
        
        [_titleArray addObject:@"90"];
        
        [_titleArray addObject:@"极好"];
        
        [_titleArray addObject:@"100"];
        
    }
    
    return _titleArray;
    
}


@end

使用

ArcLineView * view = [ArcLineView new];
view.backgroundColor = HKWhite;
[view setStarScore:0.85 title:@"66 / 88"];
[self.view addSubview:view];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(83);
    make.width.mas_equalTo(180);
    make.top.equalTo(closeButton.mas_bottom).mas_offset(26);
    make.height.mas_equalTo(150);
}];