Swift iOS开发：实现CollectionViewCell宽度适配文本宽度

作为Swift和iOS开发新手，遇到Cell尺寸固定导致文本截断的问题太常见了，我来一步步带你实现Cell宽度自动适配文本的效果，重点讲清楚collectionView(_:sizeForItemAt:)里的处理，以及如何准确计算文本宽度~

一、先做好基础配置 #

首先得确保你的CollectionView是横向滚动的，并且Cell里的Label设置正确：

1. 设置CollectionView的横向布局 #

创建UICollectionViewFlowLayout时指定滚动方向为横向，同时可以设置Cell之间的间距：

// 在ViewController的viewDidLoad里
let flowLayout = UICollectionViewFlowLayout()
flowLayout.scrollDirection = .horizontal
flowLayout.minimumInteritemSpacing = 8 // Cell之间的水平间距
flowLayout.minimumLineSpacing = 8

let collectionView = UICollectionView(frame: CGRect(x: 20, y: 100, width: view.bounds.width - 40, height: 44), collectionViewLayout: flowLayout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(TextAutoSizeCell.self, forCellWithReuseIdentifier: "TextAutoSizeCell")
view.addSubview(collectionView)

2. 自定义Cell的布局 #

Cell里的Label要设置为单行显示，并且和Cell的contentView添加内边距约束（避免文本贴在Cell边缘）：

class TextAutoSizeCell: UICollectionViewCell {
    // 初始化Label
    let titleLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 1 // 强制单行，确保文本不换行
        label.font = .systemFont(ofSize: 16) // 这里的字体要和后面计算宽度时一致！
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView.addSubview(titleLabel)
        
        // 添加约束：Label和contentView左右各留8pt，上下各留4pt的内边距
        NSLayoutConstraint.activate([
            titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
            titleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
            titleLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 4),
            titleLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -4)
        ])
        
        // 可选：给Cell加个背景色和圆角，方便看效果
        contentView.backgroundColor = .systemGray5
        contentView.layer.cornerRadius = 8
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

二、核心：计算文本宽度的方法 #

要让Cell宽度跟随文本，首先得准确算出文本在指定字体下的显示宽度，这里推荐两种可靠的方法：

方法1：用Label的sizeThatFits（简单直观） #

这种方法模拟Label的布局，直接获取文本的实际宽度：

func getTextWidth(text: String, font: UIFont) -> CGFloat {
    let tempLabel = UILabel()
    tempLabel.font = font
    tempLabel.text = text
    tempLabel.numberOfLines = 1
    // 传入一个极大的宽度，让Label自动计算所需的最小宽度
    let fittingSize = tempLabel.sizeThatFits(CGSize(width: CGFloat.greatestFiniteMagnitude, height: CGFloat.greatestFiniteMagnitude))
    return fittingSize.width
}

方法2：用boundingRect（更严谨，支持富文本） #

如果需要处理富文本（比如不同字体、颜色），用这种方法更准确：

func getTextWidthForAttributedText(text: String, font: UIFont) -> CGFloat {
    let attributes: [NSAttributedString.Key: Any] = [.font: font]
    // 计算文本的边界矩形，同样传入极大的宽度
    let boundingRect = text.boundingRect(
        with: CGSize(width: CGFloat.greatestFiniteMagnitude, height: CGFloat.greatestFiniteMagnitude),
        options: .usesLineFragmentOrigin,
        attributes: attributes,
        context: nil
    )
    // 向上取整，避免小数宽度导致的显示偏差
    return ceil(boundingRect.width)
}

三、在sizeForItemAt里设置Cell尺寸 #

现在把计算好的文本宽度用到Cell尺寸里，记得加上Label的内边距（左右各8pt，所以总共加16）：

// 假设你的数据源是一个字符串数组
let textArray = ["短文本", "这是一段稍长的文本", "我是非常非常长的测试文本，用来验证Cell宽度是否会自动适配"]

// 实现UICollectionViewDelegateFlowLayout的方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let currentText = textArray[indexPath.item]
    let textFont = UIFont.systemFont(ofSize: 16) // 和Cell里Label的字体完全一致！
    let textWidth = getTextWidth(text: currentText, font: textFont)
    
    // Cell宽度 = 文本宽度 + 左右内边距（8+8），高度固定为44（可以根据需求调整）
    let cellWidth = textWidth + 16
    return CGSize(width: cellWidth, height: 44)
}

四、额外注意事项 #

• 字体一致性：计算宽度时用的字体必须和Cell里Label的字体完全相同，否则宽度会不准
• 动态字体支持：如果要适配系统字体大小变化，改用UIFont.preferredFont(forTextStyle: .body)，并监听字体变化通知刷新CollectionView
• 避免文本截断：确保Label的numberOfLines设为1，并且不要设置固定宽度约束
• 刷新时机：如果数据源变化，记得调用collectionView.reloadData()刷新Cell尺寸

内容的提问来源于stack exchange，提问作者muizidn