UICollectionview 自定尺寸单元格自动布局，间距恒定答案

【问题标题】：UICollectionview self sizing cells autolayout with constant spacingUICollectionview 自定尺寸单元格自动布局，间距恒定
【发布时间】：2020-03-29 16:24:14
【问题描述】：

我希望创建一个如下所示的 uicollectionview。

单元格的高度将保持不变，但宽度应根据标签文本的长度自动改变。

流式布局：

        func prepareFlowLayout() -> UICollectionViewFlowLayout{
    let flowLayout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
    flowLayout.minimumInteritemSpacing = 3
    flowLayout.minimumLineSpacing = 3
    return flowLayout
}

标签：

let nameLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    //label.backgroundColor = .black

    return label
}()

单元格内自动布局：

 backgroundColor = .green
    let conView = contentView
    layer.cornerRadius = 5
    clipsToBounds = true
    conView.addSubview(nameLabel)
    NSLayoutConstraint.activate([
        nameLabel.centerXAnchor.constraint(equalTo: conView.centerXAnchor, constant: 0),
        nameLabel.centerYAnchor.constraint(equalTo: conView.centerYAnchor, constant: 0),
        nameLabel.heightAnchor.constraint(equalTo: conView.heightAnchor, multiplier: 0.8),
        nameLabel.widthAnchor.constraint(equalTo: conView.widthAnchor, multiplier: 0.8)
    ])

目前结果：

任何人都可以向我发送正确的方向以找到实现此目标的方法吗？

【问题讨论】：

在这种情况下，您的单元格的大小适合其内容，但您需要它们占用额外的空间（在我假设的单元格中平均分配）。您不能在单个单元格中执行此操作；您将需要继承 UICollectionViewLayout 并计算那里的属性，因为它可以同时考虑一行中的所有单元格。

标签： ios swift uicollectionview autolayout

【解决方案1】：

我所做的是使用sizeForItemAt 函数来检查视图的正确大小，具体取决于文本。

// MARK: - UICollectionViewDelegateFlowLayout
extension <#myCollectionVC#>: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let height: CGFloat = <#myHeight#>

        //Calculate size for current view
        let stringName: NSString = <#myObjects#>[indexPath.row] as NSString
        let width = stringName.size(attributes: [NSFontAttributeName: UIFont.systemFont(ofSize: 14)]).width
        let padding: CGFloat = <#yourTotalPaddingSize#>
        return CGSize(width: width + padding, height: height)
    }
}

之后，您可能希望将所有视图左对齐，在这种情况下，您需要创建自己的 UICollectionViewFlowLayout，并分配给您的 collectionView（在情节提要中选择 Collection View Flow Layout，在您的集合视图，并将类名更改为 MyCustomviewLayout）：

class <#MyCustomViewLayout#>: UICollectionViewFlowLayout {
    let spacing = CGFloat(<#spacing#>) // spacing between views

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let oldAttributes = super.layoutAttributesForElements(in: rect) else {
            return super.layoutAttributesForElements(in: rect)
        }

        var newAttributes = [UICollectionViewLayoutAttributes]()
        var leftMargin = self.sectionInset.left
        for attributes in oldAttributes {
            if (attributes.frame.origin.x == self.sectionInset.left) {
                leftMargin = self.sectionInset.left
            } else {
                var newLeftAlignedFrame = attributes.frame
                newLeftAlignedFrame.origin.x = leftMargin
                attributes.frame = newLeftAlignedFrame
            }

            leftMargin += attributes.frame.width + spacing
            newAttributes.append(attributes)
        }
        return newAttributes
    }
}

【讨论】：