ios - UICollectionview 自调整单元格自动布局，间距恒定

Question

我希望创建一个如下所示的 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)
    ])

目前结果:

有人能给我指明正确的方向，以找到实现这一目标的方法吗？

Answer 1

我所做的是使用 sizeForItemAt 函数根据文本检查 View 的正确大小。

// 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)
    }
}

之后，您可能希望将所有 View 向左对齐，在这种情况下，您需要创建自己的 UICollectionViewFlowLayout 并分配给您的 collectionView(在中选择 Collection View Flow Layout)您的 Storyboard，在您的 Collection View 中，并将类名称更改为 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
    }
}