使 UILabel 很好地适合集合视图单元格

Posted 2023-03-13

【中文标题】使 UILabel 很好地适合集合视图单元格

【英文标题】：Making a UILabel fit nicely into a Collection View Cell

【发布时间】：2018-05-13 17:22:44

【问题描述】：

我在流布局中有宽度和高度相等的集合视图单元格。它们包含一个 UILabel，其中 numberOfLines 属性设置为 0。标签的约束是：

单元格是圆形的：

 cell.layer.cornerRadius = cell.frame.width / 2
 cell.clipsToBounds = true

我根据标签的文本大小增加每个单元格的大小。但是，它的宽度和高度不能大于150。以下是我确定每个单元格大小的方法：

private func estimatedFrameForText(text: String) -> CGRect 
    let size = CGSize(width: 100, height: 1000)
    let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)

    return NSString(string: text).boundingRect(with: size, options: options, attributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 17)], context: nil)


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 


    let hashLabelText = textArray[indexPath.item]
    let textSize = estimatedFrameForText(text: hashLabelText)


    let width = min(150, textSize.width + 20)
    let height = width

    return CGSize(width: width, height: height)

这样我得到以下结果（我显示单元格的宽度和高度等于150的部分）。：

如您所见，当单元格达到其最大可能大小并且标签的文本继续增加时，在某些时候，文本会脱离单元格的可见部分。我理解为什么会发生这种情况（布局调试器清楚地显示了这一点），但是我找不到问题的解决方案。

我想要的是无论单元格的大小如何，标签的边缘都保持可见。如果单元格达到其最大大小，文本的尾部可能会被截断，但文本会继续增加。

我尝试增加标签和单元格边界之间的间距，但这会影响文本在最小单元格中的外观。我也尝试过更改标签的最小字体比例，但同样没有成功。

【参考方案1】：

您必须为此使用UIEdgeInsets，为 UILabel 创建一个类：

import UIKit

class UILabelDraw: UILabel 
    override func drawText(in rect: CGRect) 
        let insets: UIEdgeInsets = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
        super.drawText(in: UIEdgeInsetsInsetRect(rect, insets))
    

将此类用作标签类，如下所示：

UIEdgeInsets 的输出如下：

【讨论】：

欢迎您，很高兴为您提供帮助。