iOS开发笔记-根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现
最近同样是新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];
}
完成了圆形进度条的实现后,想了想,其实可以加入动画,使得进度条动态展现,下次有时间再实现
iOS开发笔记-根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现的更多相关文章
- [转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择 ...
- iOS:进度条控件的详细使用
进度条控件:UIProcessView:UIView 功能:顾名思义,用来显示下载进度或者传输数据进度. 属性: @property(nonatomic) UIProgressViewStyl ...
- iOS项目开发实战——自己定义圆形进度提示控件
iOS中默认的进度条是水平方向的进度条,这往往不能满足我们的需求. 可是我们能够自己定义类似的圆形的进度提示控件,主要使用iOS中的画图机制来实现. 这里我们要实现一个通过button点击然后圆形进度 ...
- iOS开发笔记7:Text、UI交互细节、两个动画效果等
Text主要总结UILabel.UITextField.UITextView.UIMenuController以及UIWebView/WKWebView相关的一些问题. UI细节主要总结界面交互开发中 ...
- iOS开发笔记--什么时候调用layoutSubviews
iOS开发笔记--什么时候调用layoutSubviews 分类: iOS2014-04-22 16:15 610人阅读 评论(0) 收藏 举报 今天在写程序时候遇见layoutSubviews触发时 ...
- iOS开发笔记-两种单例模式的写法
iOS开发笔记-两种单例模式的写法 单例模式是开发中最常用的写法之一,iOS的单例模式有两种官方写法,如下: 不使用GCD #import "ServiceManager.h" ...
- IOS开发笔记(4)数据离线缓存与读取
IOS开发笔记(4)数据离线缓存与读取 分类: IOS学习2012-12-06 16:30 7082人阅读 评论(0) 收藏 举报 iosiOSIOS 方法一:一般将服务器第一次返回的数据保存在沙盒里 ...
- IOS开发笔记 IOS如何访问通讯录
IOS开发笔记 IOS如何访问通讯录 其实我是反对这类的需求,你说你读我的隐私,我肯定不愿意的. 幸好ios6.0 以后给了个权限控制.当打开app的时候你可以选择拒绝. 实现方法: [plain] ...
随机推荐
- SpringBoot打成jar包的配置方式
pom.xml中添加Springboot插件 <build> <plugins> <plugin> <groupId>org.springframewo ...
- WMS接口平台配置培训
供应链管理平台地址:https://twms.ninestargroup.com/ibus/#/processconfig?scShortcutld=3_17__1_303 WMS提供WSWMS固定的 ...
- SOA的理解
SOA架构的概念网上一大堆,笔者也没有发现一个准确.公认的定义.不过笔者在贴吧了发了一个比较好的解释,能够帮助理解: 一个产品有PC端.iOS端.Android端,有个数据查询的功能.传统的设计方法就 ...
- 部分用户访问Polycom视频会议时故障
1.现象 Polycom视频会议服务器部署在防火墙下,通过Paloalto防火墙的一对一映射到公网. 部分同事使用职场网络或者4G通过公网访问时,出现超时问题. 2.分析: Polycom设备并没有做 ...
- c#: 简单的日志管理类(TextWriterTraceListener)
以c#实现轻量级的日志管理,着实简单,置一静态类记之: /// <summary> /// 日志管理 /// </summary> public static class Lo ...
- [leetcode]205. Isomorphic Strings 同构字符串
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- [leetcode]20. Valid Parentheses有效括号序列
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- windows下 zookeeper
1.zookeeper的安装和配置 下载:http://zookeeper.apache.org/releases.html 把conf目录下的zoo_sample.cfg改名成zoo.cfg,这里我 ...
- 我的java学习之旅--一些基础
(因为我粗略学过C,C++,Python,了解过他们的一些语法,所以为了使得java的入门更为顺畅,便会忽略一些和C语法相类似的地方,着重点明一些java自己的特色之处.也减轻一下自己写文字的负担.) ...
- ubuntu,day3,awk, vim的使用
本节内容 : 1,awk 2,vim 1,awk # 命令行调用方式 awk [-F field-separator] 'commands' input-file(s) cat /etc/passw ...