iOS开发之计算文本高度

iOS开发的过程中,总是避免不了各种高度的自适应,如:UILabel、UITextView、UITableViewCell的高度自适应...而这些适应大部分都源自文本的适应。
计算文本高度的方法有很多种,而我们平时的使用中,富文本的使用几率要大于普通文本,下面以富文本为例介绍三种获取文本高度的方式:

方法1.0:

请看运行效果:

方法一的效果

1.创建label

UILabel *contentLab = [[UILabel alloc]initWithFrame:CGRectMake(20, 64,300, 20)];
contentLab.font = [UIFont systemFontOfSize:15];
contentLab.backgroundColor = [UIColor greenColor];
contentLab.numberOfLines = 0;
contentLab.text = @"如果包含汉字的文本一行就可以显示完,就不需要设置富文本,否则会出现文本错位的问题.";
[self.view addSubview:contentLab];

2.获取高度 重置坐标

CGFloat Height = [self getTextHeightWithStr:contentLab.text
                                  withWidth:300
                            withLineSpacing:10//(预设的行间距)
                                   withFont:15];
    
contentLab.frame = CGRectMake(20,64, 300, Height);

3.如果包含汉字的文本一行就可以显示完,就不需要设置富文本,否则会出现文本错位的问题.
但是什么时候一行显示 还需要自己判断,而且估算的不是十分准确,比较麻烦

    /*我在此处的处理方法是把 计算出来的Height 和 2倍的font高度做比较,
      如果是多行显示,文本高度加上行间距肯定大于2倍的font,
      满足条件,就是 多行,设置行间距.
     */
if (Height > 2*contentLab.font.lineHeight){//多行显示

    NSMutableParagraphStyle *paraStyle  = [[NSMutableParagraphStyle alloc] init];
    paraStyle.lineSpacing = 10;
    NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc]initWithString:contentLab.text
                                                                                       attributes:@{NSParagraphStyleAttributeName:paraStyle,NSFontAttributeName:[UIFont systemFontOfSize:15]}];
    contentLab.attributedText = attributeString;
}
 
    /**
     出现问题的条件:
     条件一:当前文本内容'一行'就可以显示完全
     条件二:文本当中包含'汉字'
     结果:计算出来的高度即使只有一行,也会包'含行间距'
     
     解决办法:
     在封装方法中:
     条件一: '文本高度' - '字体高度',如果只有一行,'差'肯定 <= 行间距
     条件二: 文本中有汉字
     */
    

实现原理:

/**
 计算文本高度
 
 @param str         文本内容
 @param width       lab宽度
 @param lineSpacing 行间距(没有行间距就传0)
 @param font        文本字体大小
 
 @return 文本高度
 */
-(CGFloat)getTextHeightWithStr:(NSString *)str
                     withWidth:(CGFloat)width
               withLineSpacing:(CGFloat)lineSpacing
                      withFont:(CGFloat)font
{
    if (!str || str.length == 0) {
        return 0;
    }
    NSMutableParagraphStyle *paraStyle = [[NSMutableParagraphStyle alloc]init];
    paraStyle.lineSpacing = lineSpacing;
    NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc]initWithString:str
                                                                                       attributes:@{NSParagraphStyleAttributeName:paraStyle,NSFontAttributeName:[UIFont systemFontOfSize:font]}];
    
    CGRect rect = [attributeString boundingRectWithSize:CGSizeMake(width, MAXFLOAT)
                                                options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
                                                context:nil];

    if ((rect.size.height - [UIFont systemFontOfSize:font].lineHeight)  <= lineSpacing){
        if ([self containChinese:str]){
            rect.size.height -= lineSpacing;
        }
    }
    return rect.size.height;
}
//判断是否包含中文
- (BOOL)containChinese:(NSString *)str {
    for(int i=0; i< [str length];i++){
        int a = [str characterAtIndex:i];
        if( a > 0x4e00 && a < 0x9fff){
            return YES;
        }
    }
    return NO;
}
总结:

方法1.0在使用的时候要用计算出来的Height2倍的font高度比较,如果是多行显示,文本高度加上行间距肯定大于2倍的font,满足条件,就是 多行,设置行间距.
否则不能使用行间距,会出现错误的问题(随着行间距大于5之后会越来越明显).

方法 1.1:(和方法1.0相比,判断是否需要多行显示的方法不一样)

1.创建Label(和上面创建的一样)

2.(封装的方法) 判断当前对象的内容 是否 需要多行显示

CGFloat lineSpacing = 0;
if ([self isNeedMultiLineWithStr:contentLab.text withHeight:100 withWidth:300 withFont:15]) {

    NSMutableParagraphStyle *paraStyle = [[NSMutableParagraphStyle alloc] init];

    //只有多行显示才设置行间距 否则会错位     
    paraStyle.lineSpacing = 5;
    NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc]initWithString:contentLab.text
                                                                                       attributes:@{NSParagraphStyleAttributeName:paraStyle,NSFontAttributeName:[UIFont systemFontOfSize:15]}];
    contentLab.attributedText = attributeString;
        
    lineSpacing = paraStyle.lineSpacing;
}

3.获取高度 重置坐标

CGFloat Height = [self getTextHeightWithStr:contentLab.text
                                  withWidth:300
                            withLineSpacing:lineSpacing
                                   withFont:15];

contentLab.frame = CGRectMake(0,64, 300, Height);

实现原理:

/**
 判断是否超过一行

 @param str    文本内容
 @param height 文本高度
 @param width  文本宽度
 @param font   文本描述

 @return 返回判断结果
 */
-(BOOL)isNeedMultiLineWithStr:(NSString *)str
                   withHeight:(CGFloat)height
                    withWidth:(CGFloat)width
                     withFont:(CGFloat)font
{
    
    CGFloat myWidth = [str boundingRectWithSize:CGSizeMake(MAXFLOAT,height)
                                               options:NSStringDrawingUsesFontLeading|NSStringDrawingUsesLineFragmentOrigin
                                            attributes:@{NSFontAttributeName :[UIFont systemFontOfSize:font]}
                                               context:nil].size.width;
    
    
    if (myWidth <= width) {
        return NO;
    }
    else{
        return YES;
    }
}
总结:

和上面的方法相比较,其实就是判断 需不需要多行显示文本 的方法不一样,计算文本高度的核心算法是一样的.

方法二:(简单好用)

1.创建Label(同上)

2. (封装的方法)判断当前对象的内容 是否 需要多行显

//当文本中有'汉字' 且 '一行' 就可以显示完的时候,此时设置行间距就会导致计算不准确,出现错位情况,必须加上判断条件.
if ([self isNeedMultiLineWithStr:contentLab.text
                          Height:100
                           Width:300
                            Font:15]) {

    NSMutableParagraphStyle *paraStyle = [[NSMutableParagraphStyle alloc] init];
    
    //只有多行显示才设置行间距 否则会错位
    paraStyle.lineSpacing = 5;
    NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc]initWithString:contentLab.text
                                                                                       attributes:@{NSParagraphStyleAttributeName:paraStyle,NSFontAttributeName:[UIFont systemFontOfSize:15]}];
    contentLab.attributedText = attributeString;
    
}

3.计算Size (只此一步,短小精悍)

CGSize size = [contentLab sizeThatFits:CGSizeMake(contentLab.frame.size.width, CGFLOAT_MAX)];

contentLab.frame = CGRectMake(0,64, 300, size.height);

实现原理:(同方法1.1的判断方法一样)

总结:

该方法计算文本高度省去不少代码,计算也同样准确,值得推荐.

方法三:(C函数)

首先导入系统的核心文本库#import <CoreText/CoreText.h>

1.创建Label(同上)

2. (封装的方法)判断当前对象的内容 是否 需要多行显(同方法二的第二步一样)

3.计算文本高度

CGFloat Height = [self getTextHeightWithStr:contentLab.text
                                  withWidth:300
                            withLineSpacing:lineSpacing
                                   withFont:15];

contentLab.frame = CGRectMake(0,64, 300, Height);

实现原理:

/**
 计算文本高度
 
 @param str         文本内容
 @param width       lab宽度
 @param lineSpacing 行间距(没有行间距就传0)
 @param font        文本字体大小
 
 @return 文本高度
 */
-(CGFloat)getTextHeightWithStr:(NSString *)str
                     withWidth:(CGFloat)width
               withLineSpacing:(CGFloat)lineSpacing
                      withFont:(CGFloat)font
{
    if (!str || str.length == 0) {
        return 0;
    }
    NSMutableParagraphStyle *paraStyle = [[NSMutableParagraphStyle alloc] init];
    paraStyle.lineSpacing =  lineSpacing;
    NSMutableAttributedString *attStr = [[NSMutableAttributedString alloc] initWithString:str attributes:@{NSParagraphStyleAttributeName:paraStyle,NSFontAttributeName:[UIFont systemFontOfSize:font]}];
    
    CTFramesetterRef frameSetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attStr);
    CGSize attSize = CTFramesetterSuggestFrameSizeWithConstraints(frameSetter, CFRangeMake(0, 0), NULL,CGSizeMake(width, CGFLOAT_MAX), NULL);
    CFRelease(frameSetter);
    
    return attSize.height;

}

总结:

在上面这么多的方法中,一共有2种判断是否需要多行显示的方法,3种计算文本高度的算法.如果把这些组合起来将有6种计算文本高度的方法,大家自由发挥.其实原理都是一样的.所需要解决的问题也是一样的(就是一行能显示全的情况下,而且文本中包含有汉字,不能设置行间距,会出现错位的情况).
最好在使用的时候封装在工具类当中 或者 category中.这样在计算的时候就不需要每个类中重复实现该方法.

我把Demo放在gitHub上面了,有想看的可以download看看~


我在4个viewController中实现了不同的方法,切换window的跟视图就可以运行不同的方法了。

今天就先写到这里吧
千里之行,始于足下~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容