最近同样是新App，设计稿里出现一种圆形进度条的设计，如下：
想了想，圆形进度条实现起来不难，但是其中显示百分比的文本确需要自适应，虽然可以使用时自己设定文本字体的大小，但是这样显得很麻烦，也很low。
查了一圈，目前实现的自适应UILabel，都是根据font大小动态调整frame的size，并不能满足我们的需求。
那么问题来了
如何实现一种能够根据frame大小自适应调整文本font size的圆形进度条呢？
我的实现思路很简单，首先计算出能够给予UILabel的frame最大尺寸，然后根据高度优先，宽度次之的原则，计算出最合适的字体大小，这样可以完美的适配各种尺寸。
效果如下：
实现代码：
CircleProgressBar继承于UIView，具有四个属性，分别如下：
//
// CircleProgressBar.h
// demo
//
// Created by ZhangChangwei on 15/4/1.
// Copyright (c) 2015年 Changwei. All rights reserved.
// #import <UIKit/UIKit.h> @interface CircleProgressBar : UIView
//进度条百分比值
@property (nonatomic) float percentValue;
//进度条宽度
@property (nonatomic) float lineWidth;
//文本颜色
@property (nonatomic ) UIColor *textColor;
//进度条颜色
@property (nonatomic ) UIColor *barColor;
@end
实现方式主要采用CoreGraphics绘制图形，其中文字绘制采用自适应计算大小的方式实现，实现了根据控件frame大小动态改变字体的行为，非常灵活。
//
// CircleProgressBar.m
// demo
//
// Created by ZhangChangwei on 15/4/1.
// Copyright (c) 2015年 Changwei. All rights reserved.
// #import "CircleProgressBar.h" @implementation CircleProgressBar /**
* init and set up property
*
* @param frame <#frame description#>
*
* @return <#return value description#>
*/
-(instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) { }
return self;
} /**
* redraw
*
* @param rect frame
*/
- (void)drawRect:(CGRect)rect {
if(_lineWidth==0.0f){
_percentValue=;
NSLog(@"%@",@"请输入颜色，数值等参数");
}
//开始绘制图形
CGContextRef ctx=UIGraphicsGetCurrentContext();
CGContextSetLineWidth(ctx, _lineWidth);
CGContextBeginPath(ctx);
CGContextSetStrokeColorWithColor(ctx, _barColor==nil?[UIColor orangeColor].CGColor:_barColor.CGColor);
CGContextAddArc(ctx, self.frame.size.width/, self.frame.size.width/, self.frame.size.width/-_lineWidth, M_PI*1.5, M_PI*(1.5-*_percentValue), );
CGContextStrokePath(ctx);
//绘制计算最佳文本大小
CGSize maxSize=CGSizeMake(rect.size.width*0.75, rect.size.height/);
int currentFontSize=;
NSString *str=[NSString stringWithFormat:@"%.1f%%",_percentValue*];
CGSize requiredSize = [str boundingRectWithSize:maxSize options:NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:currentFontSize]} context:nil].size;
if(requiredSize.height<=maxSize.height)
{
while (requiredSize.height<=maxSize.height&&requiredSize.width<maxSize.width) {
currentFontSize++;
requiredSize=[str boundingRectWithSize:maxSize options:NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:currentFontSize]} context:nil].size;
}
}else
{
while (requiredSize.height>maxSize.height||requiredSize.width>maxSize.width) {
currentFontSize--;
requiredSize=[str boundingRectWithSize:maxSize options:NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:currentFontSize]} context:nil].size;
}
requiredSize=[str boundingRectWithSize:maxSize options:NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:currentFontSize]} context:nil].size;
}
//绘制自适应文本
[str drawAtPoint:CGPointMake(rect.size.width/-requiredSize.width/, rect.size.height/-requiredSize.height/)
withAttributes:@{
NSFontAttributeName:[UIFont systemFontOfSize:currentFontSize],
NSForegroundColorAttributeName:_textColor==nil?[UIColor blackColor]:_textColor
}]; } @end
使用方法：
CircleProgressBar使用起来非常简单，只需要提供相应参数即可，如下：
- (void)viewDidLoad {
[super viewDidLoad];
CircleProgressBar *bar1=[[CircleProgressBar alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/-, SCREEN_HEIGHT*0.2, , )];
bar1.barColor=[UIColor redColor];
bar1.lineWidth=1.0f;
bar1.percentValue=0.85;
bar1.backgroundColor=[UIColor clearColor];
[self.view addSubview:bar1];
CircleProgressBar *bar2=[[CircleProgressBar alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/-, SCREEN_HEIGHT*0.3, , )];
bar2.barColor=[UIColor orangeColor];
bar2.lineWidth=;
bar2.percentValue=0.45;
bar2.backgroundColor=[UIColor clearColor];
[self.view addSubview:bar2];
CircleProgressBar *bar3=[[CircleProgressBar alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/-, SCREEN_HEIGHT*0.5, , )];
bar3.barColor=[UIColor greenColor];
bar3.lineWidth=;
bar3.textColor=[UIColor blueColor];
bar3.percentValue=0.75;
bar3.backgroundColor=[UIColor clearColor];
[self.view addSubview:bar3];
CircleProgressBar *bar4=[[CircleProgressBar alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/-, SCREEN_HEIGHT*0.7, , )];
bar4.barColor=[UIColor blueColor];
bar4.textColor=[UIColor purpleColor];
bar4.lineWidth=;
bar4.percentValue=0.55;
bar4.backgroundColor=[UIColor clearColor];
[self.view addSubview:bar4];
}
完成了圆形进度条的实现后，想了想，其实可以加入动画，使得进度条动态展现，下次有时间再实现