CollectionView 上的自定义布局

Question

我有一个单元格，其宽度取决于内容。现在内容分别如图所示。中间有一个很大的缝隙，有点难看。

我希望得到的最终结果类似于下一张图片。我希望单元格之间的 space 保持不变，即使该特定行的末尾有一些巨大的差距。

Answer 1

您可以使用集合的自定义布局来对齐集合视图中的单元格。

class CustomCollectionViewLayout: UICollectionViewFlowLayout {

// function which will return attributes for elements...
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    
    // for section insets and item spacing...
    sectionInset = UIEdgeInsets(top: 10, left: 5, bottom: 10, right: 5)
    minimumLineSpacing = 15
    
    // get original attributes of elements in collection view for further modification (in this case to align collection view cells to left side)...
    guard let originalAttributes = super.layoutAttributesForElements(in: rect) else {
        return nil
    }
    
    // margin for cells for spacing...
    var leftMargin: CGFloat = sectionInset.left
    
    // maxY property which helps in resetting leftMargin when cells switch to next line...
    var maxY: CGFloat = -1.0
    
    // modifying original attributes to align them on left side...
    let attributes = originalAttributes.map { (attribute) -> UICollectionViewLayoutAttributes in
        
        // reset leftMargin and maxY when cell will switch to next line...
        if attribute.frame.maxY > maxY {
            leftMargin = sectionInset.left
            maxY = attribute.frame.maxY
        }
        
        // setting oring x for current attribute...
        attribute.frame.origin.x = leftMargin
        
        // appending width of attribute + line spacing to calculate origin x for next attribute
        leftMargin += attribute.frame.width + minimumLineSpacing
        
        // return attribute for current element
        return attribute
    }
    
    // return attributes for all elements in collection view
    return attributes
    
}

}

然后只需在您的视图控制器中，您就可以像这样为您的集合视图设置此自定义布局：

let layout = CustomCollectionViewLayout()
collectionView.collectionViewLayout = layout

CollectionView 上的自定义布局

Custom Layout on CollectionView

uicollectionview

swift