UILabel中一个很多人都会踩的坑

一个很严肃的问题,平常你是怎么设置UILabel的高度的?

我见过不少如下普遍的写法:

UILabel *lb = [UILabel new];
lb.text = @"gyjq";
lb.font = [UIFont systemFontOfSize:30];
lb.backgroundColor = [UIColor clearColor];
[self.view addSubview:lb];
lb.frame = CGRectMake(10, 100, 200, 30);

上面的代码你能看出有什么问题吗?

如果将上述代码在真机上运行,得到如下的展示效果:

上图中四个字母底部都被“截”掉了一小部分,如果内容是其他英文字母则展示正常,g,y,j,q这四个字母则会被截掉,但是如果文本是中英文混排结果又是正常的。

我平时使用App时,在不少App界面当中都发现过被截取的情况。

问题出在于UILabel的Frame高度不能简单的和字体的高度等同,UILabel在不同的字体设置下,对Frame的高度要求也不一样,大多数情况下都比Font的高度设置要高一些。

当然我们可以使用其他API来获取正确的UILabel高度:

//方法一
CGSize suggestedSize = [lb sizeThatFits:CGSizeMake(200, 30)];

//方法二
[lb sizeToFit];

//方法三
NSString* text = @"gyjq";
CGSize labelSize = [text sizeWithFont:lb.font
                    constrainedToSize:CGSizeMake(200.f, MAXFLOAT)
                        lineBreakMode:NSLineBreakByWordWrapping];
                        
//方法四                        
CGSize size = [text sizeWithAttributes:@{ NSFontAttributeName: lb.font }];
CGRect frame = lb.frame;
frame.size.width = size.width;
frame.size.height = size.height;
lb.frame = frame;                      

上面四种方式获取到的size都能正确展示所有的文本内容,但size里的height却不尽相同。

第一和第二种方式下,如果设置字体大小为30,则结果为:

(width = 57, height = 36)

第三第四种方式得到的结果则是:

(width = 56.8652344, height = 35.8007813)

而且字体大小不同,超出字体高度的额外空间也不同:

比如font size为13时,算出高度为16,font size为20时,算出高度为24,所以平常设置UILabel高度的时候,也不能简单的在font height基础之上加随意值。

我平常浏览网页的时候,发现web端也有同样的问题,比如web版知乎个人签名档里的label展示:

字母g同样被截断了。

我猜测其原因都是因为,文本渲染引擎在渲染一行文本的时候都需要在label的顶部和底部预留一小部分空间,应该是出于排版美观方面的考量。

欢迎关注公众号:


Hosted by Coding Pages