服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS UILabel 设置内容的间距及高度的计算示例

iOS UILabel 设置内容的间距及高度的计算示例

2021-04-04 17:23万家豪 IOS

本篇文章主要介绍了iOS UILabel 设置内容的间距及高度的计算示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

uilabel 是的使用频率是非常频繁,当文字较多的时候,会显得密密麻麻的,不利于ui显示及用户观看。通常我们需要对 label 中“行间距”或“文字间距”进行调整,从而使文字没那么紧密,提高用户体验。

当调整“行间距”或“字间距”后,很多时候需要对label进行高度自适应,此时会出现高度计算错误的问题,所以我们需要对“富文字”高度进行计算。计算结束后,经测试发现:当文字为1行并且全部文字为“中文”时,高度计算不准确,最后对该问题进行处理。

综上所述:分为以下三步进行设置“uilabel 内容的间距及高度的计算”

​ 1. 通过使用 uilbael 的分类实现修改间距的功能。

​ 2 .使用两种方法来计算:“富文字”的高度。

​ 3. 对“高度计算结果”特殊情况进行处理。

一.设置 label “行间距”或“字间距”

设置思路

普通的 nsstring 文字,不能调整字体“行间距”或“字间距”,但
nsattributedstring 富文字,可以调整该间距,所以我们把普通的字体变为富文字,然后使用富文字对应方法即可设置间距。
设置过程

给 label 添加一个分类,在分类中声明并实现三种方法

?
1
2
3
4
5
6
7
8
9
10
@interface uilabel (changelinespaceandwordspace)
//1.设置:行间距
+ (void)changelinespaceforlabel:(uilabel *)label withspace:(float)space;
 
//2.设置:字间距
+ (void)changewordspaceforlabel:(uilabel *)label withspace:(float)space;
 
//3.设置:行间距 与 字间距
+ (void)changespaceforlabel:(uilabel *)label withlinespace:(float)linespace wordspace:(float)wordspace;
@end

1.设置:行间距

?
1
2
3
4
5
6
7
8
9
10
//传入需要设置的 label 与需要设置的行间距数值
+ (void)changelinespaceforlabel:(uilabel *)label withspace:(float)space {
 nsstring *labeltext = label.text;
 nsmutableattributedstring *attributedstring = [[nsmutableattributedstring alloc] initwithstring:labeltext];
 nsmutableparagraphstyle *paragraphstyle = [[nsmutableparagraphstyle alloc] init];
 [paragraphstyle setlinespacing:space];
 [attributedstring addattribute:nsparagraphstyleattributename value:paragraphstyle range:nsmakerange(0, [labeltext length])];
 label.attributedtext = attributedstring;
 [label sizetofit];
}

2.设置:字间距

?
1
2
3
4
5
6
7
8
9
//传入需要设置的 label 与需要设置的字间距数值
+ (void)changewordspaceforlabel:(uilabel *)label withspace:(float)space {
 nsstring *labeltext = label.text;
 nsmutableattributedstring *attributedstring = [[nsmutableattributedstring alloc] initwithstring:labeltext attributes:@{nskernattributename:@(space)}];
 nsmutableparagraphstyle *paragraphstyle = [[nsmutableparagraphstyle alloc] init];
 [attributedstring addattribute:nsparagraphstyleattributename value:paragraphstyle range:nsmakerange(0, [labeltext length])];
 label.attributedtext = attributedstring;
 [label sizetofit];
}

3.同时设置: 行间距 与 字间距

?
1
2
3
4
5
6
7
8
9
10
//传入需要设置的 label 与需要设置的行间距数值与字间距数值
+ (void)changespaceforlabel:(uilabel *)label withlinespace:(float)linespace wordspace:(float)wordspace {
 nsstring *labeltext = label.text;
 nsmutableattributedstring *attributedstring = [[nsmutableattributedstring alloc] initwithstring:labeltext attributes:@{nskernattributename:@(wordspace)}];
 nsmutableparagraphstyle *paragraphstyle = [[nsmutableparagraphstyle alloc] init];
 [paragraphstyle setlinespacing:linespace];
 [attributedstring addattribute:nsparagraphstyleattributename value:paragraphstyle range:nsmakerange(0, [labeltext length])];
 label.attributedtext = attributedstring;
 [label sizetofit];
}

使用示例

?
1
2
3
4
5
6
//设置label内容,将lable内容变为有间距的内容
 testlabel.text = @"测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字";
 [uilabel changelinespaceforlabel:testlabel withspace:20];//设置testlabel中内容的行间距为20
 [uilabel changewordspaceforlabel:self.testlabel withspace:20];//设置testlabel中内容的字间距为20
//
 [uilabel changelinespaceforlabel:self.testlabel withspace:20];//设置testlabel中内容的行间距为20,字间距为20

iOS UILabel 设置内容的间距及高度的计算示例

计算label富文字高度

计算思路

可以直接计算富字体排布高度,该高度即为 label 高度,也可以使用 uilable 的方法来计算 label 高度

方法1.使用uilabel方法:sizethatfits

?
1
- (cgrect)sizethatfits:(cgsize)size;

通过uilabel的方法sizethatfits,该方法需要传入一个参数,即可算出目前label高度。

参数1. size:其中size的宽度为label的宽度,size的一般填入最大高度。

?
1
cgsize size = [label sizethatfits:cgsizemake(label.frame.size.width, cgfloat_max)];

方法2.使用nsstring方法:boundingwithrect

?
1
2
3
- (cgrect)boundingrectwithsize:(cgsize)size
            options:(nsstringdrawingoptions)options
            context:(nullable nsstringdrawingcontext *)context;

该方法需要传入3个参数:

参数1. size:其中size的宽度为label的宽度,size的一般填入最大高度。

参数2. options: 文本绘制时的附加选项

​ 1. nsstringdrawinguseslinefragmentorigin (整个文本将以每行组成的矩形为单位计算整个文本的尺寸 )
​ 2. nsstringdrawingusesfontleading (使用字体的行间距来计算文本占用的范围,即每一行的底部到下一行的底部的距离计算 )
​ 3. nsstringdrawingusesdevicemetrics (将文字以图像符号计算文本占用范围,而不是以字符计算。也即是以每一个字体所占用的空间来计算文本范围 )
​ 4. nsstringdrawingtruncateslastvisibleline (当文本不能适合的放进指定的边界之内,则自动在最后一行添加省略符号。如果nsstringdrawinguseslinefragmentorigin没有设置,则该选项不生效)

参数3. context: 上下文,一般传nil

使用示例

?
1
2
nsstringdrawingoptions options = nsstringdrawinguseslinefragmentorigin | nsstringdrawingusesfontleading;
cgrect rect = [attributestring boundingrectwithsize:cgsizemake(label.frame.size.width, cgfloat_max) options:options context:nil];

label富文字计算高度注意点

出现问题

当文字只有一行并且是全是中文时:高度计算不准确

iOS UILabel 设置内容的间距及高度的计算示例

解决思路

首先: 通过sizethatfits 或 boundingwithrect 计算出未处理的rect值

第一步: 对rect值,进行判断: “是否只有一行 并且 该行文字全为中文”

第二步: 修复高度值,对高度值进行调整: “减去一个行间距值”

示例代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//通过boundingwithrect 计算出未处理的rect值
 nsstringdrawingoptions options = nsstringdrawinguseslinefragmentorigin | nsstringdrawingusesfontleading;
 cgrect rect = [attributestring boundingrectwithsize:cgsizemake(label.frame.size.width, cgfloat_max) options:options context:nil];
 
//判断内容是否只有一行 : (目前高度 - 字体高度) <= 行间距
 if ((rect.size.height - _font.lineheight) <= paragraphstyle.linespacing){
//如果只有一行,进行判断内容中是否全部为汉字
  if ([self containchinese:string]) {
//修正后高度为: 目前高度 - 一个行间距
   rect = cgrectmake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height-paragraphstyle.linespacing);
  }
 }
 
//判断内容中是否全部为汉字
- (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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:http://blog.qiji.tech/archives/16397

延伸 · 阅读

精彩推荐
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25