如何让Tab菜单的CollectionViewCell根据内容自适应宽度且布局美观

你的核心问题是同时启用了自动尺寸计算和固定宽度返回，导致布局逻辑冲突，进而出现混乱。下面是具体的修复步骤和代码调整：

1. 移除固定宽度的代理方法 #

你当前在UICollectionViewDelegateFlowLayout中实现了sizeForItemAt，强制返回均分宽度，这会直接覆盖estimatedItemSize的自动尺寸计算逻辑。删除这个方法，让系统根据Cell内容计算宽度：

extension HeaderCollectionView: UICollectionViewDelegateFlowLayout {
    // 移除 sizeForItemAt 方法

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 8 // 增加Tab间间距，提升美观度
    }
}

2. 配置Cell内Label的自适应属性 #

确保Label能正确驱动Cell宽度计算，在Cell的configure方法中添加以下Label配置：

private func configure() {
    addSubview(selectionView)
    selectionView.addSubview(titleLabel)

    // 关键：让Label优先保持自身内容宽度
    titleLabel.numberOfLines = 1
    titleLabel.lineBreakMode = .byTruncatingTail // 单行文本超出时截断
    titleLabel.setContentHuggingPriority(.required, for: .horizontal)
    titleLabel.setContentCompressionResistancePriority(.required, for: .horizontal)

    NSLayoutConstraint.activate([
        selectionView.topAnchor.constraint(equalTo: topAnchor, constant: padding),
        selectionView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 4),
        selectionView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -4),
        selectionView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -padding),

        titleLabel.topAnchor.constraint(equalTo: selectionView.topAnchor, constant: padding),
        titleLabel.leadingAnchor.constraint(equalTo: selectionView.leadingAnchor, constant: 4),
        titleLabel.trailingAnchor.constraint(equalTo: selectionView.trailingAnchor, constant: -4),
        titleLabel.bottomAnchor.constraint(equalTo: selectionView.bottomAnchor, constant: -padding)
    ])
}

3. 优化FlowLayout的自动尺寸设置 #

给estimatedItemSize设置一个合理的初始估计值，帮助系统更稳定地计算布局，同时调整间距避免Tab过于拥挤：

private func setupCollectionView() {
    let layout = UICollectionViewFlowLayout()
    // 设置初始估计尺寸，避免布局跳动
    layout.estimatedItemSize = CGSize(width: 80, height: 44)
    layout.minimumInteritemSpacing = 8

    collectionView = UICollectionView(frame: bounds, collectionViewLayout: layout)
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.register(TabCollectionViewCell.self, forCellWithReuseIdentifier: TabCollectionViewCell.cellID)

    [notificationLabel, collectionView].forEach { view in
        guard let view = view else { return }
        view.translatesAutoresizingMaskIntoConstraints = false
        addSubview(view)
    }

    NSLayoutConstraint.activate([
        notificationLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
        notificationLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: padding),
        notificationLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -padding),

        collectionView.topAnchor.constraint(equalTo: notificationLabel.bottomAnchor, constant: 8),
        collectionView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: padding),
        collectionView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -padding),
        collectionView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
        // 可选：给CollectionView设置固定高度，比如 heightAnchor.constraint(equalToConstant: 44)，布局更稳定
    ])
}

可选：添加Cell最小宽度约束 #

如果想避免过短的Tab出现，可以在Cell的configure方法中添加最小宽度限制：

// 在Cell的configure方法中添加
widthAnchor.constraint(greaterThanOrEqualToConstant: 70).isActive = true

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