转载

iOS开发笔记－根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现

最近同样是新App，设计稿里出现一种圆形进度条的设计，如下：

想了想，圆形进度条实现起来不难，但是其中显示百分比的文本确需要自适应，虽然可以使用时自己设定文本字体的大小，但是这样显得很麻烦，也很low。

查了一圈，目前实现的自适应UILabel，都是根据font大小动态调整frame的size ，并不能满足我们的需求。

那么问题来了

如何实现一种能够根据frame大小自适应调整文本font size的圆形进度条呢？

我的实现思路很简单，首先计算出能够给予UILabel的frame最大尺寸，然后根据高度优先，宽度次之的原则，计算出最合适的字体大小，这样可以完美的适配各种尺寸。

效果如下：

iOS开发笔记－根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现

实现代码：

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=0;    NSLog(@"%@",@"请输入颜色，数值等参数");   }    //开始绘制图形    CGContextRef ctx=UIGraphicsGetCurrentContext();    CGContextSetLineWidth(ctx, _lineWidth);    CGContextBeginPath(ctx);    CGContextSetStrokeColorWithColor(ctx, _barColor==nil?[UIColor orangeColor].CGColor:_barColor.CGColor);    CGContextAddArc(ctx, self.frame.size.width/2, self.frame.size.width/2, self.frame.size.width/2-_lineWidth, M_PI*1.5, M_PI*(1.5-2*_percentValue), 1);    CGContextStrokePath(ctx);    //绘制计算最佳文本大小    CGSize maxSize=CGSizeMake(rect.size.width*0.75, rect.size.height/3);    int currentFontSize=17;    NSString *str=[NSString stringWithFormat:@"%.1f%%",_percentValue*100];    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/2-requiredSize.width/2, rect.size.height/2-requiredSize.height/2)      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/2-10, SCREEN_HEIGHT*0.2, 20, 20)];     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/2-25, SCREEN_HEIGHT*0.3, 50, 50)];     bar2.barColor=[UIColor orangeColor];     bar2.lineWidth=3;     bar2.percentValue=0.45;     bar2.backgroundColor=[UIColor clearColor];     [self.view addSubview:bar2];     CircleProgressBar *bar3=[[CircleProgressBar alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/2-50, SCREEN_HEIGHT*0.5, 100, 100)];     bar3.barColor=[UIColor greenColor];     bar3.lineWidth=5;     bar3.textColor=[UIColor blueColor];     bar3.percentValue=0.75;     bar3.backgroundColor=[UIColor clearColor];     [self.view addSubview:bar3];     CircleProgressBar *bar4=[[CircleProgressBar alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT*0.7, 200, 200)];     bar4.barColor=[UIColor blueColor];     bar4.textColor=[UIColor purpleColor];     bar4.lineWidth=10;     bar4.percentValue=0.55;     bar4.backgroundColor=[UIColor clearColor];     [self.view addSubview:bar4]; }