如何根据标签以编程方式扩展集合视图单元格

Question

我的集合视图单元格中有标签。但这些标签正在移出细胞。如何根据标签的长度设置单元格宽度？

这是我的页面：

我想要这个：

如何根据swift中的标签文本更改CollectionView单元格宽度

我尝试过这个问题，但不幸的是它没有成功。这个问题和我的问题的区别在于我不使用故事板。

收藏查看：

    private let wordsCollectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        layout.scrollDirection = .vertical
        layout.minimumLineSpacing = 1
        layout.minimumInteritemSpacing = 1
        
        // Specify the frame and layout of the UICollectionView
        let wordsCollectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        wordsCollectionView.translatesAutoresizingMaskIntoConstraints = false
        wordsCollectionView.register(WordsCustomCollectionViewCell.self, forCellWithReuseIdentifier: WordsCustomCollectionViewCell.identifier)
        wordsCollectionView.backgroundColor = .systemGray6
        return wordsCollectionView
    }()

WordsCustomCollectionViewCell：

WordsCustomCollectionViewCell 类：UICollectionViewCell {

private let wordsLabel: UILabel = {
    let wordsLabel = UILabel()
    wordsLabel.translatesAutoresizingMaskIntoConstraints = false
    wordsLabel.text = "#eagle"
    wordsLabel.textColor = .systemGray6
    wordsLabel.backgroundColor = .red
    wordsLabel.sizeToFit()
    return wordsLabel
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    configureUI()
}

private func configureUI() {
    contentView.addSubViews(wordsLabel)
    NSLayoutConstraint.activate([
        wordsLabel.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
        wordsLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor)
    ])
    wordsLabel.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
    wordsLabel.setContentHuggingPriority(.defaultHigh, for: .horizontal)
}}

Answer 1

您的代码大小依赖于 sizeToFit() 来调整标签大小。单元格大小可能无法准确地适应标签的内容，但在下面它依赖于单元格内的约束。并且添加

numberOfLines

以设置在单行中显示文本。

收藏浏览：

private let wordsCollectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
layout.minimumLineSpacing = 1
layout.minimumInteritemSpacing = 1

let wordsCollectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
wordsCollectionView.translatesAutoresizingMaskIntoConstraints = false
wordsCollectionView.register(WordsCustomCollectionViewCell.self, forCellWithReuseIdentifier: WordsCustomCollectionViewCell.identifier)
wordsCollectionView.backgroundColor = .systemGray6
return wordsCollectionView 
}()

WordsCustomCollectionViewCell：

class WordsCustomCollectionViewCell: UICollectionViewCell {

private let wordsLabel: UILabel = {
    let wordsLabel = UILabel()
    wordsLabel.translatesAutoresizingMaskIntoConstraints = false
    wordsLabel.text = "#eagle"
    wordsLabel.textColor = .systemGray6
    wordsLabel.backgroundColor = .red
    wordsLabel.numberOfLines = 1 // Display text in a single line
    wordsLabel.textAlignment = .center // Center the text horizontally
    return wordsLabel
}

override init(frame: CGRect) {
    super.init(frame: frame)
    configureUI()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

private func configureUI() {
    contentView.addSubview(wordsLabel)
    NSLayoutConstraint.activate([
        wordsLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        wordsLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
        wordsLabel.topAnchor.constraint(equalTo: contentView.topAnchor),
        wordsLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
    ])
}

// Set the label text when configuring the cell
func configure(withText text: String) {
    wordsLabel.text = text
}

}