1.效果图
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);
}];