集合视图项等间距布局

Question

我没有集合视图布局方面的经验，因此我决定征求您的意见。我面临下一个问题。我有一个带有自定义单元格的简单集合视图。 Cell只有label，左右约束都为16，所以cell的宽度取决于label的内容。而且我不知道为什么项目有如此奇怪的间距。我在故事板中设置间距 - 左右间距 12 点。实际结果：我想得到这样的东西：那么我应该朝哪个方向移动呢？感谢您的回答。

更新：iPhone 出现奇怪的行为运行 iOS 12..<13.0

Answer 1

您看到的是 collectionView 布局的默认行为。

您需要继承 UICollectionViewFlowLayout 才能获得此行为。

import UIKit

class LeftAlignCellCollectionFlowLayout: UICollectionViewFlowLayout {
    
    private(set) var cellHeight: CGFloat = 36
    init(cellHeight: CGFloat) {
        super.init()
        self.cellHeight = cellHeight
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let attributes = super.layoutAttributesForElements(in: rect) else { return nil }
        guard let collectionView = self.collectionView else { return nil }
        
        self.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        
        var newAttributes = attributes
        var leftMargin = self.sectionInset.left
        var maxY: CGFloat = -1.0
        
        let availableWidth: CGFloat = collectionView.frame.width
        let layout = collectionView.collectionViewLayout
        
        for attribute in attributes {
            if let cellAttribute = layout.layoutAttributesForItem(at: attribute.indexPath) {
                if cellAttribute.frame.width > availableWidth {
                    cellAttribute.frame.origin.x = 0
                    cellAttribute.frame.size = CGSize(width: availableWidth, height: cellHeight)
                }
                else {
                    if cellAttribute.frame.origin.y >= maxY {
                        leftMargin = self.sectionInset.left
                    }
                    
                    var frame = cellAttribute.frame
                    frame.origin.x = leftMargin
                    frame.size.height = cellHeight
                    cellAttribute.frame = frame
                    
                    leftMargin += cellAttribute.frame.width + self.minimumInteritemSpacing
                    maxY = max(cellAttribute.frame.maxY , maxY)
                }
                
                newAttributes.append(cellAttribute)
            }
        }
        
        return newAttributes
    }
}

现在你可以像这样使用上面的布局了。

let flowLayout = LeftAlignCellCollectionFlowLayout(cellHeight: 40)
flowLayout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
flowLayout.minimumInteritemSpacing = 10
flowLayout.minimumLineSpacing = 10
collectionView.collectionViewLayout = flowLayout

集合视图项等间距布局

Collection view items equal spacing layout

ios

swift

uicollectionview

autolayout

uicollectionviewlayout